[過去ﾛｸﾞ] 【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net (253ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
9: あづみ ◆WYiR3RzL3U 2017/03/26(日)03:56 ID:V6Kd1IAt(1) AAS
開発環境の作り方について
Game Usersの開発に参加するには、
Reactが動かせる環境を作らなければならないのですが
これが本当にめんどくさい！！
なにがめんどくさいかと言えば日本語の情報が少ない上に
いろんなものをインストール＆設定しないとまともに動かせない。
具体的に挙げると以下のものが必要になります。
・ Webサーバーソフト：例）Apache
・ パッケージインストール：Node.js (npm)
・ コードチェック：例）ESLint / airbnb
省15
10: あづみ ◆WYiR3RzL3U 2017/03/28(火)00:52 ID:pgZj0AEX(1) AAS
記事書くのって大変！
開発環境の作り方について一通り情報を揃えようと思って、
とりあえずXAMPPのインストール、設定
アップデートについての記事を書いてみたけど、めちゃくちゃ大変でした。
ここ何日かコードを書かずにずっとテキストを書いてる感じなんですが
本当に時間があっという間に過ぎていきます。
世の中、役に立つ記事を書いてる人々はその情報を提供するために
すごい時間を費やしてるんだなということに気づかされました。
そもそもなぜXAMPPの導入記事を書く必要があるんだ
という話なんですが、これは開発環境の構築に
省8
11: あづみ ◆WYiR3RzL3U 2017/03/31(金)00:26 ID:RLsnidu8(1) AAS
Reactに興味ある人！
開発環境の作り方をまとめてみたので、ぜひ参考にしてください
XAMPP、Node.js、webpack、EditorConfig、Atomの記事もあるよ
開発環境の作り方 ? まとめページ
https://gameusers.org/dev/blog/environment/index
12: あづみ ◆WYiR3RzL3U 2017/04/02(日)17:07 ID:H8fSaWyc(1) AAS
WordPressのソーシャルボタンを作りたい
開発環境の作り方についての記事作成は一通り終わり、
今なにをしているかというと、WordPressのソーシャルボタンを作ろうとしております。
プラグインで良さ気なのを探してみたのですが
外国製は、はてなやLineに対応しておらず
日本製のは公式のソーシャルボタンを使ってるので重く（非同期ではない）
どちらもいまいち気に入らなかったのです。
そこでGame Usersで使ってるソーシャルボタンを
WordPress用に改造して独自につけようと思ったのですが
どうせやるなら他の人も使えるようなプラグインとして公開しようと考え
省7
13: 2017/04/03(月)15:21 ID:6Gxwj2Uc(1) AAS
とりあえず node_modules/ は.gitignoreに追加したほうがいい
14: あづみ ◆WYiR3RzL3U 2017/04/03(月)15:51 ID:??? AAS
ですよね
この前見つけたGitHubについて書かれてる記事でも
node_modulesは載せないようにと書かれてたので
次、編集するときに消しておきます
15: あづみ ◆WYiR3RzL3U 2017/04/04(火)00:11 ID:gljrwCoE(1) AAS
ソーシャルボタンのサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/share_buttons.jpg
ソーシャルボタンのサンプルをスタイルシートで作ってみました。
画像のボタンは全部素材サイトで集めたものです。
こんな感じで同じように画像を集めてアップロードするだけで
誰でも自分好みのソーシャルボタンを作れるようにしたいのです。
ただプラグインの設定画面で画像のアップロードが
自由にできるのかわからないのが不安ですね。
もしできなかったら、プラグインフォルダに
最初から画像を含めるしかないので
省6
16: 2017/04/05(水)00:58 ID:??? AAS
なんで2chでtwitterみたいなことしてるの？
17: あづみ ◆WYiR3RzL3U 2017/04/05(水)03:27 ID:??? AAS
ここにはWeb制作に関わってる人がいるからです！
最近始めたブログだけだと広がりがありません
1日のアクセスが10くらいしかないんですよ
18: あづみ ◆WYiR3RzL3U 2017/04/08(土)00:45 ID:??? AAS
Chrome Developer Tools便利！
現在、WordPressのソーシャルボタンのプラグインを作っているのですが、
適用されているテーマのスタイルシートが邪魔をして
思うようなデザインにできないという問題に直面しました。
WordPress ソーシャルボタンサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-1.jpg
黒猫の周囲を囲むように存在している
この謎の白枠に2時間以上費やすことに！
marginでもなく、paddingでもなく、borderでもない。
自分なりにいろいろ探してみたのですが
省3
19: あづみ ◆WYiR3RzL3U 2017/04/08(土)00:45 ID:9diq8AUi(1) AAS
box-shadow
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-2.png
box-shadow…。ほとんど使わないから存在を忘れていました。
便利なことにDeveloper Toolsの画面でチェックボックスを外すと
ブラウザ上のデザインにも変更が加えられます。
他の人が作ったものはなにが適用されているのかわからないので
この機能は非常にありがたいですね。
ChromeのDeveloper Toolsはいろいろ機能がついてそうなので
一回ちゃんと勉強した方がいいかもしれません。
フリーキャット
省7
20: あづみ ◆WYiR3RzL3U 2017/04/14(金)23:57 ID:??? AAS
MariaDB ? DEFAULT CURRENT_TIMESTAMP
WordPressのプラグイン制作、なかなか手ごわいです。
独自の書き方を学ばないといけないので、慣れるまで調べることが非常に多いです。
WordPressはデフォルトでjQueryが読み込まれるのですが、
そのバージョンが1.12.4でとても古いのです。
今後、jQuery依存のライブラリを利用するときに
バージョンの問題で使えないといったことが起こると困るので
最新のものを読み込もうとしたのですが
そのためにはまず古いものを読み込まないという処理をしなければなりません。
https://gist.github.com/az1979/34dc72976ce5c71be38ab9de3c216d4e#file-optionpackage-php
省11
21: あづみ ◆WYiR3RzL3U 2017/04/15(土)00:00 ID:jVmNsNw5(1) AAS
MariaDB 日時のデフォルト値
プラグインで使うデータベースのテーブルを作成するコードは以下になるのですが
これを書いているときに、便利な日時のデフォルト値の設定方法を知りました。
https://gist.github.com/az1979/e5e85e157ace7d506f8b3fd2c9c5d489#file-createdatabasetable-php
datetime_renewal DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL
データベースの日時のデフォルト値をこのように設定しておけば
Updateするだけで自動的に日時が更新されることを知って
ちょっとしたショックを受けました。
今までデータベースを更新するたびに 0000-00-00 00:00:00 形式で
日時を作成してから保存してたのに、あの手間はなんだったんだという。
省13
22: あづみ ◆WYiR3RzL3U 2017/04/20(木)23:34 ID:7/HYbBCV(1) AAS
WordPressのプラグインだけでなく？
現在の設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170420-1.jpg
前の記事から6日も経ってるのに進みが遅い！
なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。
当初はWordPressで使えるプラグインの構想だったのですが
作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな？
ということで一部がやり直しになりました。
WordPressはPHPで動いているのですが
PHPでソーシャルボタンを出力する仕様にすると
省15
23: あづみ ◆WYiR3RzL3U 2017/05/12(金)16:52 ID:fB8Uql0I(1) AAS
まだ1/3
ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、
制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。
せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。
2017/5/12 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/05/wp-option-20170512-1.png
画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。
ずらーっと縦に長いページに羅列されるフォームの数々。
この値も編集できるようにした方がいいよな
と思いつくまま追加していくとこんな感じになりました。
省15
24: あづみ ◆WYiR3RzL3U 2017/05/22(月)01:25 ID:c2BJY7oP(1) AAS
有名ブロガーから学ぶ、人気ブログを作るための3つのルール
https://gameusers.org/dev/blog/notes/20170522-1
記事が長いので興味ある人はブログで読んでね
Kindle Unlimitedで読んだブログ集客本の内容をまとめてみました
25: あづみ ◆WYiR3RzL3U 2017/06/18(日)12:03 ID:DCperFa8(1) AAS
https://gameusers.org/dev/blog/wp-content/uploads/2017/06/wp-option-20170618-1-300x220.jpg
すでにソーシャルボタンを出力するコード自体はほぼ完成しており
しばらくソーシャルボタンを作成するページを作っていたのですが
なんと途中でまたもコードの大幅書き直しが発生しました。
画像はWordPressのプラグイン画面なのですが
これはソーシャルボタンを作成するページで
ここで画像をアップロードして設定を行うと
WordPress上でソーシャルボタンが表示されるという仕組みになっています。
普通のサイトでも利用できるように
ソーシャルボタンの作成が行えるページを公式ページとしても
省3
26: あづみ ◆WYiR3RzL3U 2017/06/18(日)12:03 ID:??? AAS
このWordPressのページと
公式ページのコードは共通化しようと考えていたので
当然、Game Users内に設置する公式ページもjQueryになるわけです。
jQueryベースはもうやめて
Reactをメインにして行こうという高い目標を立てたにも関わらず
なぜ未だに古いシステムで作っているんだ？
Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ？
という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページを
Reactで書き直すことになりました。
結構、進んでいた段階での書き直し作業。
省5
27: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:45 ID:hx0CrLeH(1) AAS
Reactで実際にアプリケーションを作ってみて感じたこと
日本語でReactについて述べられている記事はまだまだ少なく
英文サイトを読む時間も多い現状ですが
その現状で微実際にReactを使ってアプリケーションを作ってみて感じたことを
ありのままに語ってみようと思います。
現在、日本人でReactを触っている人たちはアーリーアダプター（初期採用者）層に当たるためか
レベルの高い人が多いです。
記事に含まれる専門用語の多さや、語り口の難しさからそういった印象を受けます。
自分のように趣味プログラマーに毛の生えたレベルの人間で
Reactを触っている人は他にいないんじゃないかと思えてくる日々ですが
省10
28: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:47 ID:??? AAS
自由度が高すぎる
ReactはViewの部分だけを担うというコンセプトで作られています。
View部分だけなのでアプリケーションを作るときに必要になるパッケージは
別途入れなければならないのです。
良いように言えば、作り手が好きなパッケージを採用して
自由度の高い構成にすることができるということになるのですが
実際のところ、あれこれ入れるのは非常にめんどくさく感じます。
他パッケージごとに情報を調べて、それが必要かどうかを判断し
また必要なら学習コストを支払わなければならないのです。
例えばReactについて調べてるとよく名前が上がるパッケージに
省10
上下前次1-新書関写板覧索設栞歴
あと 225 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.010s