背景
Webページを新しく作成しなくてはいけなかったのですが、正直面倒だな〜と思ってました。ひとまず承認降りるためにサイトのモックというかプロトタイプを作りたかったのですがどうせ結構時間かかるし、、、と思っていました。
具体的には以下の様なことを今回は実現したかったです。
- あんまり1からうんうん唸ってデザインはしたくないが、それっぽい見た目にしたい
- Bootstrapはもう見飽きた・・・
- もちろんスマホも対応したい
- ひとまず確認してほしいだけなのでURLは適当でいいし、裏側は書かなくていいからさくっと確認してもらいたい
Bootstrapは見慣れているけど嫌だけど、自前でCSSは(本格始動した時にしか)書きたくないし、レスポンシブ対応もさせたくて、確認もPSDではなくURLベースでスムーズに見られるようにしたい、という感じでした。
それを実現するために今回使ったのが以下の2つ！
- Material Design Lite
- Github Pages
です！
対象
- 上のお悩みを持っている人
- HTML/CSSが多少はわかってる人(自分で編集するのに必要)
所要時間
1h 〜 1.5h
僕は全部やるのに1hくらいでした！githubこれからアカウントつくるよ、コマンドラインわからないよ、とかでなければそこまで躓かないかと。
Material Design Liteとは
Googleが最近発表したマテリアルデザインの考えを取り入れた **公式**フロントエンドフレームワークです。
ドキュメントもしっかりしてるし、Webで簡単にマテリアルデザインが出来るとなったので実験的に導入しようとなりました。
グリッドレイアウトや各種コンポーネントなどが多数あります。
他にもTemplatesがあって、簡単にサイトを作れちゃいます。
Github Pagesとは
GithubにはGithub Pagesという無料で静的なWebサイトを公開できる機能があるので今回はこれを使います。
Git/Githubを多少理解してる必要はありますが簡単です！
GitHubでWebページを公開する方法がQiitaだと分かりやすいです。
なので、今回はざっくりと解説します。
Step1. Templatesを選ぶ！
さて、それではサイトを作っていきましょう。さて、ここで1から作成してもいいのですが、確認してもらって結局ダメだった時の時間が勿体無いですよね。
なので、先ほども紹介したTemplatesを使いましょう。
今回はトップページはランディングページ風にしたかったので、ANDROID.COM MDL SKINをチョイス。
Step2. Templatesをダウンロード！
赤枠のところからダウンロードできます。
44b3278.png "download.png")
index.htmlをブラウザで起動すると、、
ローカルで見れました！
Step4. ディレクトリ構成を整理する
さて、まあこのままだとディレクトリ構成ときにGithub Pagesにアップするときに困っちゃうので少しディレクトリ構成を変えてあげます。
$ cd mdl-templates (templateのあるところまで移動)
$ cp material.min.css templates/android-dot-com/material.min.css
$ cp material.min.js templates/android-dot-com/material.min.js
これでコピーできました。cpのところは他のテンプレートを使う予定がなければmvでもいいと思います。
※ コマンドラインよくわからない！って人へ
要するに
android-dot-com以下(使ったtemplateにあわせて変えてください)を
- fonts/
- images/
- index.html
- styles.css
- material.min.css
- material.min.js
にしてあげればOKです！
Step5. パスの変更
さて、このままだとCSSが効いていないところがあるかと思います。
なので、パスを変更してあげましょう。
具体的には30行目の
<link rel="stylesheet" href="../../material.min.css">
を
<link rel="stylesheet" href="./material.min.css">
に変更。
327行目の
<script src="../../material.min.js"></script>
を
<script src="./material.min.js"></script>
に変更してあげます。
これで元通り見れるようになりました！
Step6. 不要なコードやファイルの削除
ほとんど消さなくてもまあOKなのですが、若干そのままあったら違和感あるところは消しましょう。
View Sourceの削除
ソースを見る、があったらさすがに変なので消してあげます。
/* <head>タグの前 */
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
/* 一番下 */
<a href="https://github.com/google/material-design-lite/blob/master/templates/android-dot-com/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
まるっと消しちゃいましょう。
imagesの削除
imagesディレクトリ以下にはtemplatesの画像が入ってます。どうせ画像を差し替えたら必要なくなるので消してしまって問題無いと思います。が、Githubにpushする前でもいいかもしれません。
Step7. 必要に応じてHTMLファイルの編集、削除
あとは必要な画像をimagesディレクトリ以下にアップしたり、使わないHTMLコードは削除、コメントアウトしたりしてそれっぽくするだけですね。
Step8. git/githubで色々準備
githubの設定が完了している前提ですが、
まずgithubで新しくリポジトリを作ります。
その後はgithubにもコマンドが書いてあるとおりですが
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin リポジトリ名
$ git push origin master
をします。
ちなみに gitの管理下に置かれるのは以下のファイルたちです。
- fonts/
- images/
- index.html
- styles.css
- material.min.css
- material.min.js
これで、githubにアップされたと思います。
Step9. Github Pagesで見れるようにする
ローカルのmasterブランチの内容をリモートのgh-pagesブランチにpushしましょう。
git push origin master:gh-pages
これだけ！
あとは
githubのユーザー名.github.io/リポジトリ名
でアクセスすればOK。
あるいは、Github Pagesから Setttings -> Github Pagesの中のLaunch automatic page generatorボタン→ 適当にpublish
したあとに、上のURLにアクセスしていけるか確認
そのあとに
git push -f origin master:gh-pages
でもいけます。が、あんまり意味無いし(あと普段は当然force pushしちゃだめですよ笑)前者のコマンドを叩くやり方をおすすめします。
終わりに
大体修正も含めて所要時間が1h〜1.5hくらいでした。これだけでそこそこのクオリティのものが作れるなら効率がいいですよね。
もちろん、もっとちゃんとしたのを作りたいとなったならテンプレートではなくて1から作ったほうがいいかもしれないですが、プロトタイプくらいだったらこういうアプローチもありなのではないかなと思います。
参考になりましたら幸いです！