久々のWebページ制作
GitHub Pages
GitHubアカウントを持ってれば、簡単にWebページが無料で作れるサービス。もともとはWeb Bluetoothなページを作って、それをスマホでデバッグする時に、どこかに簡単にホスティングできないかと調べていた時に見つけたんだけど、意外と簡単に無料で公開できるとのことなので、とりあえずWebページを作ってみようかなと決意。
明治時代に書かれたと思われる書物を発掘したので、これで勉強してみる。 pic.twitter.com/siaU1DNKjF
— ポキオ (@pokiiio) November 30, 2017
とはいえ、HTMLを書くだなんて久しぶりだし、iframeでブイブイ言わせてた頃のページを学生の頃に授業で書くくらいしかしたことがなかったので、この際に1からフルスクラッチで作ってみました。特に難しいことは考えず、HTML5+CSS+JSでそれっぽいページを作りました。デザインセンスは皆無なので、テキトーにAndroidのマテリアル感を持たせてみました。
やったこと、参考にしたモノなど
ちょっと昔の本
  |
|---|
| アプリを作ろう! HTML5入門 (アプリを作ろう! シリーズ) |
家に転がってた本を参考に書いてみました。本当はもっとナウいテクニックが書かれた本があるのかもしれませんが、ナウくない手法で取り敢えずWebページを作りました。
JavaScript + GitHub APIで最新リポジトリ一覧を表示する
これも、もっといい方法があったのかもしれませんが、このページを参考に作りました。
GitHub APIに関しては、このページと本家リファレンスを参考に書きました。JSONでリポジトリ一覧が返ってくるので、愚直にパースして、愚直に動的に表示要素をWebページ上に追加しています。jQueryとかは使わずに、純粋なJSで書いてます。
レスポンシブな感じにする
スマホからも見れるようにしたかったので、レスポンシブなレイアウトにしました。これも結構テキトーに実装しています。
マテリアルっぽくする
まずは、なにはともあれ色。
この便利なサイトで、色んな色を生成してもらって、愚直にCSSで設定。
あとは、WebフォントでRobotoをつかってAndroid感を醸し出してます。
読んだだけで実践してないこと
開発環境も色々あるんですね（小並感）。AndroidのGradle見たいな仕組みがあったりして面白かったけど、結局使わなかった。
チョッパヤでつくってみた
いやー、Webページ作成は奥が深い。色んな要素がありすぎてどこから手を付けていいかわからなかったけど、とりあえず手を付けてみた感じ。SEO関連とかは一切できてないので、今後触りたい所存。ちなみに、今回作った（作ってる）Webページの作成過程は以下のコミットログで確認できます。突っ込みたいことがあればコメントを頂きたく（笑）
