Androidのメモとか

ポキオの日記です。今日も遅延してない。

GitHub PagesでWebページを無料でチョッパヤで作ってみた

スポンサードリンク

久々のWebページ制作

GitHub Pages

pages.github.com

GitHubアカウントを持ってれば、簡単にWebページが無料で作れるサービス。もともとはWeb Bluetoothなページを作って、それをスマホデバッグする時に、どこかに簡単にホスティングできないかと調べていた時に見つけたんだけど、意外と簡単に無料で公開できるとのことなので、とりあえずWebページを作ってみようかなと決意。

とはいえ、HTMLを書くだなんて久しぶりだし、iframeでブイブイ言わせてた頃のページを学生の頃に授業で書くくらいしかしたことがなかったので、この際に1からフルスクラッチで作ってみました。特に難しいことは考えず、HTML5+CSS+JSでそれっぽいページを作りました。デザインセンスは皆無なので、テキトーにAndroidのマテリアル感を持たせてみました。

pokiiio.github.io

https://pokiiio.github.io/

やったこと、参考にしたモノなど

ちょっと昔の本

アプリを作ろう! HTML5入門 (アプリを作ろう! シリーズ)

家に転がってた本を参考に書いてみました。本当はもっとナウいテクニックが書かれた本があるのかもしれませんが、ナウくない手法で取り敢えずWebページを作りました。

JavaScript + GitHub APIで最新リポジトリ一覧を表示する

gihyo.jp

これも、もっといい方法があったのかもしれませんが、このページを参考に作りました。

qiita.com

GitHub APIに関しては、このページと本家リファレンスを参考に書きました。JSONリポジトリ一覧が返ってくるので、愚直にパースして、愚直に動的に表示要素をWebページ上に追加しています。jQueryとかは使わずに、純粋なJSで書いてます。

レスポンシブな感じにする

syncer.jp

スマホからも見れるようにしたかったので、レスポンシブなレイアウトにしました。これも結構テキトーに実装しています。

マテリアルっぽくする

まずは、なにはともあれ色。

www.materialpalette.com

この便利なサイトで、色んな色を生成してもらって、愚直にCSSで設定。

あとは、WebフォントでRobotoをつかってAndroid感を醸し出してます。

photoshopvip.net

読んだだけで実践してないこと

qiita.com

qiita.com

開発環境も色々あるんですね(小並感)。AndroidのGradle見たいな仕組みがあったりして面白かったけど、結局使わなかった。

チョッパヤでつくってみた

いやー、Webページ作成は奥が深い。色んな要素がありすぎてどこから手を付けていいかわからなかったけど、とりあえず手を付けてみた感じ。SEO関連とかは一切できてないので、今後触りたい所存。ちなみに、今回作った(作ってる)Webページの作成過程は以下のコミットログで確認できます。突っ込みたいことがあればコメントを頂きたく(笑)

github.com

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。