tag:crieit.net,2005:https://crieit.net/tags/%E4%B8%80%E4%BA%BA%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A/feed Crieitでタグ「一人もくもく会」に投稿された最近の記事 2018-09-12T17:47:10+09:00 https://crieit.net/tags/%E4%B8%80%E4%BA%BA%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A/feed tag:crieit.net,2005:PublicArticle/14261 2017-03-10T08:49:58+09:00 2018-09-12T17:47:10+09:00 https://crieit.net/posts/CakePHP3 <p>Angular + CakePHP3 で作成していた</p> <p><a target="_blank" rel="nofollow noopener" href="https://mokumoku.alphabrend.com/">一人もくもく会</a></p> <p>だが、Angularを捨ててCakePHPのみに修正した。</p> <p>お客さんのために作成したサイトでも何でもないのでSEO対策とかどうでも良かったのでAngularを入れて試したのだが、<br /> そもそもGoogleボットがレンダリングした状態を認識すらしてくれなかった。</p> <p>インデックスもされないし、コンテンツも取得されない。<br /> 流石にそれはサイトとして存在させるメリットすらないのでAngularを使うのをやめた。</p> <h3 id="Fetch as Google"><a href="#Fetch+as+Google">Fetch as Google</a></h3> <p>Search ConsoleにFetch as Googleという機能があり、<br /> クローラに実際にどのようにサイトが見えているかを確認できるのだが、<br /> それを実行したところ「Loading...」のみが表示されていた。</p> <h3 id="原因"><a href="#%E5%8E%9F%E5%9B%A0">原因</a></h3> <p>原因は不明。<br /> ただ、公開直後はFetch as Googleでちゃんとレンダリングされていた。<br /> 途中でAngularのバージョンをあげたのでそのあたりが原因かもしれない。</p> <h3 id="原因の特定"><a href="#%E5%8E%9F%E5%9B%A0%E3%81%AE%E7%89%B9%E5%AE%9A">原因の特定</a></h3> <p>今回は面倒だったので特定せずにCakePHPのみにした。</p> <p>JavaScriptを使い、tryでエラーをcatchできるので、それで試してみると良い、とどこかに書かれていた。<br /> 結局クローラアクセスの場合だけ出るエラーなどがJavaScript上にある場合、こうなってしまうのかもしれない。<br /> JavaScriptフレームワークでサイトを構築するときに気をつけなければならない点のようだ。</p> だら@Crieit開発者 tag:crieit.net,2005:PublicArticle/14272 2017-02-11T01:22:31+09:00 2018-10-18T01:18:48+09:00 https://crieit.net/posts/f740e34f70d01a0feec3c4c60a66392f <p>一人もくもく会というサービスを作成して公開した。</p> <p><a target="_blank" rel="nofollow noopener" href="https://mokumoku.alphabrend.com/">一人もくもく会</a></p> <h3 id="概要"><a href="#%E6%A6%82%E8%A6%81">概要</a></h3> <p>世の中誰でも夜暇な時に適当にプログラミングをあれこれ試す時があると思うが、<br /> そういった時のログを投稿できるサービス。</p> <p>Qiitaやブログのようにきっちりプログラムや記事を完成させなくても、<br /> 適当にどんどんその日毎のログを残すためのもの。</p> <h3 id="フレームワーク"><a href="#%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF">フレームワーク</a></h3> <ul> <li>Angular</li> <li>CakePHP3</li> </ul> <p>デザインはとりあえずAngular MaterialやMaterial Design Liteをごちゃごちゃに使っている。<br /> できればAngular Materialのみでやりたかったが、こちらは現在betaで開発中のため色々足りない。<br /> 他のあちらこちらから色々使えるパーツを探してきて使う必要がある。</p> <h3 id="現状"><a href="#%E7%8F%BE%E7%8A%B6">現状</a></h3> <p>とりあえず必要最低限以下の機能を作成しただけなので、αバージョン。<br /> 誰でもすぐGithubアカウントかTwitterアカウントでログインできるので、<br /> 気が向いた方は使っていただける状態。<br /> 0円でSSLもつけているので。</p> <h3 id="今後"><a href="#%E4%BB%8A%E5%BE%8C">今後</a></h3> <p>作成は進めていくが、せっかくなのでその開発ログも実際にサービス上に残していく予定。<br /> 誰にも利用されなくてもデータが増えていくというのは一石二鳥だ。</p> <h3 id="その他補足色々"><a href="#%E3%81%9D%E3%81%AE%E4%BB%96%E8%A3%9C%E8%B6%B3%E8%89%B2%E3%80%85">その他補足色々</a></h3> <h4 id="マークダウン"><a href="#%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3">マークダウン</a></h4> <p>投稿はmarkdownで可能。<br /> Github色のシンタックスハイライトも入れてある。</p> <h4 id="SPA"><a href="#SPA">SPA</a></h4> <p>Angularを使っているのでSPAとなっている。<br /> 面倒なのでサーバーサイドレンダリングはしていない。<br /> とりあえずGoogleのクローラに全部お任せ。<br /> きっとそのうちAngular自体がデフォルトでUniversal対応してくれるだろう。</p> <h4 id="Google Analytics"><a href="#Google+Analytics">Google Analytics</a></h4> <p>SPA用にAutotrackというのがあるのでそれを使った。動いているかは不明。</p> <h4 id="ソーシャルシェア、ブックマーク"><a href="#%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%B7%E3%82%A7%E3%82%A2%E3%80%81%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF">ソーシャルシェア、ブックマーク</a></h4> <p>投稿データにシェア、ブックマークボタンをいくつか入れてみた。<br /> SPA用に調整してあるので多分動くと思うがまだ記事が0なので本番では未確認。<br /> うまく動かなかったら投稿しつつ修正していく。</p> <h4 id="タグ"><a href="#%E3%82%BF%E3%82%B0">タグ</a></h4> <p>タグ機能があり自由にタグを追加できるので、<br /> イベントタグを作ってみんなで参加、ということも可能。<br /> これでオフラインもくもく会を流行らせたい。</p> <h4 id="ソース管理"><a href="#%E3%82%BD%E3%83%BC%E3%82%B9%E7%AE%A1%E7%90%86">ソース管理</a></h4> <p>非公開なのでBitBucket。CakePHP3のCIはCodeship。<br /> Angularは元々テストでエラーが出まくってしまうのでエラーを取り切ってから対応予定。</p> <h4 id="不具合"><a href="#%E4%B8%8D%E5%85%B7%E5%90%88">不具合</a></h4> <p>いくつかある。早めに必要な機能などもある。掲載しつつ修正していく。</p> <h4 id="デプロイ"><a href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">デプロイ</a></h4> <p>distフォルダ毎サーバーにアップすれば良いのだが、<br /> それだけでも毎回面倒なのでデプロイ用のプログラムを作る必要がある。</p> <p>ただ、各ファイルのハッシュ値はソースを変更しなければ毎回同じっぽいので、<br /> dist毎pushしてしまえばサーバー側はpullだけでもいいかもしれない。</p> <p>ちなみに、distディレクトリにCakePHP用のindex.phpが入っていて、.htaccessでCakePHP側とAngular側を振り分けている。<br /> またこの詳細は別記事に書く。</p> だら@Crieit開発者