ながめのそら
http://ns.you84815.space/
スマホで撮り貯めた空の写真集サイトです。 世間から少し遅ればせながらRiot.js、Pug(Jade)を試してみるという名目で制作しました。
画像自体は沢山あるのですが、まだ選別が出来ておらず少ない状態です。 少しずつ増やしていこうと思ってます。
ソースはこちらにアップしてあります。
画像は全てGoogleフォトのアルバムに登録しており、そのリンクをスプレッドシートで管理しています。 スプレッドシートを簡易CMSとして利用しているイメージです。
定期的にスプレッドシートのGAS(Google Apps Script)を叩くバッチを使い、 JSONを生成してからJSファイルとして保存しています。
最初はJSONをGASから直接取得するように設定したのですが、 リダイレクトが挟まれる理由からなのか、画像が表示されるまで数秒掛かっていました。
ページ表示に時間が掛かるのも気持ち悪いですし、ページアクセスの度にGASを叩くのもどうかと思い、 サーバ側でGASを叩き、結果をJSファイルに出力するように変更しました。
以下、それぞれ使ってみた感想です。
Riot.js
個人的にReactより理解しやすく感じました。 オリジナルのタグにCSSを効かせることも可能なので面白いです。 サンプルを紹介しているサイト等も多く、ページを構築する上であまり困りません。 ただ、私が読み慣れていないからなのか、公式のドキュメントが少し分かりづらい印象でした。
一番困ったところは、ページ遷移時のフェードイン・フェードアウトです。
最初はthis.on('mount',～);、this.on('unmount',～);等を使って試したのですが、
上手く実現できませんでした。ページ切り替わりのタイミングとunmountのタイミングが違うのです。
結局、以下のような処理で対応しました。もっとシンプルな方法があるかもしれません。
route('*', function(id) {
fadeOut();
setTimeout(function() {
require('mytag.tag');
riot.update();
fadeIn();
}, 1000);
});
Pug
速く書けて楽ちんでした。 素のHTMLより断然簡単で、場合によってはemmetを使うよりも楽に書けるかもしれません。
構文に対応しているエディタが少ないと思うので、そこがネックになるかと思います。
少し困ったのは、文章の中でインライン要素を使う場合です。 素のHTMLでは1行で書くことができますが、Pugの場合はタグを入れるところで改行しなればなりません。
HTML
<span>飛び先は<a href="./test">こちら</a>です。</span>
Pug
span 飛び先は
a(href="./test") こちら
| です。
Gulp
実はタスクランナーを使ったことが無く、今回初めて使いました。 Riot、Pugを使うと決めたので必須だなと。
シームレスに編集、更新が出来て快適でした。 一方、まだまだ理解しきれていない処理や、余計なことをしている場所もありそうなので、勉強していきたいところです。
Gulpの情報が多すぎて、やりたいことを実現するための最適解が見えていないという状態です。
Sass
こちらも初体験です。
せいぜい入れ子のスタイル指定をしたくらいで、ほとんど活用できませんでした。
部品を細かく分けており、部品のtagファイルにHTML、CSS、JSを書いているので、 あまり必要なかったというのも理由の一つかもしれません。
Atomic Design
Riotと相性が良さそうなので取り入れてみました。
今回のサイトは小さなコンテンツで共通パーツも少ないこともあり、あまり利点がありませんでした。 でも部品を細かく分けるのは楽しかったです。
これ以上分割出来ないところまで分割し、それを最小部品(atom)として、そこから4つの階層で組み立てていきます。 共通化する必要のない要素もatomとして定義するのかが分からなかったので、とにかく細かく部品を分けていきました。
難点は開くファイルが増えがちというところでしょうか。慣れれば管理できるようになります。
実践導入するならば、命名規則をしっかりと決めておかないと管理しきれなくなりそうです。
課題
画像が増えた場合
画像の枚数が増えると、表示がカクついてしまいます。 枚数が増えるから仕方ないことなのか、それともRiotで負荷が掛かっているのか、 Pugで置き換えたら何か変わるのか、色々試さねばなりません。
非対応ブラウザ
また、EdgeとIEは非対応です。
これは画像のリストを作る時にCSSのclip-pathというプロパティを使っており、
このプロパティが現時点ではEdge、IEには対応していないのです。何とかならないものか。
clip-pathが効かないブラウザ用のスタイルを考えてみます。
制作途中でFireFoxのバージョンが上がり、
clip-pathのurlプロパティ以外も動かせるようになりました。幸運でした。
非レスポンシブ
PCもモバイルも同じように表示されます。なのでスマホで見ると文字がすごく小さいです。
画像の並べ方を絶対配置で指定しているので、横幅を固定にしてあります。 あとSVGのサイズをレスポンシブに変更する方法が分からなかったというのもあります。 そのため、思い切って非レスポンシブにしました。
Gulpの設定や、Riot、Pugの独特な記法に慣れるまで時間が掛かってしましました。 慣れてくると素のHTMLより書きやすくて楽しめました。 もっと理解を深めれば効率よく、ユーザーにとっても快適なサイトの構築が出来るようになりそうです。
参考になるかはわかりませんが、ソースはこちらにアップしてあります。