ちょっとIconのデザインを考えてた。
やはりガイドラインを参考にしたら、理詰めでいい感じできたりする。
ちょっと違うが、GoogleはUI向けマテリアルデザイン用のアイコン群を公開しているようで、Androidに特化する場合はここから使ってもよさそう。
仕様を見ているとスプラッシュイメージの項目があったので、manifest.jsonをアップデートしてみた。
もちろん、現段階で対応しているブラウザは無い。
しかし、Android版 Google Chromeはアイコンをスプラッシュイメージ的に出すようになっているので、今後この機能も有効化されるであろう。
1{
2 "name": "Kinlan's Amazing Application ++",
3 "short_name": "Kinlan's Amaze App",
4 "icons": [
5 {
6 "src": "launcher-icon-3x.png",
7 "sizes": "144x144",
8 "type": "image/png"
9 }
10 ],
11 "splash_screens": [{
12 "src": "splash/lowres",
13 "sizes": "320x240"
14 }, {
15 "src": "splash/hd_small",
16 "sizes": "1334x750"
17 }, {
18 "src": "splash/hd_hi",
19 "sizes": "1920x1080",
20 "density": 3
21 }],
22 "start_url": "index.html",
23 "display": "standalone"
24}
ちなみに我らがFirefoxはOpen Web Appsなるものを提唱している。
Application Cacheなど、現在では非推奨となっている手法の紹介も含まれているが、Open Web Appへの誘いとして分かりやすい記事。
Open Web Appをホスト型とパッケージ型の2つへ分類し、それぞれのメリデメリを紹介。
manifest.webappの詳細
Dewy へクリティカルCSSの最適化を実装した。
色々と下調べを行っていたが、運用コストを図るには運用してみるのが一番だと感じとりあえず小さく始めてみることにした。
サイトはレンダリングにテンプレートエンジンを使用しているため、当初はpenthouseを使用しようと考えた。
これはWebページをPhantomJSを用いて解析するもので、手元でレンダリングを実行する必要がなく導入が容易でサイコーだと感じた。
1penthouse({
2 url : 'https://dewy.me/',
3 css : path.join(__dirname + '/public/css/main.css'),
4 width : 320,
5 height : 480,
6 timeout: 30000
7}, (err, criticalCss) => {
8 if (err) console.error(err);
9
10 const clean = new cleanCSS().minify(criticalCss);
11
12 fs.writeFile('views/inline/index.html', `<span class="subst">${clean.styles}</span>`);
13});
これでクリティカルCSSが記述されたhtmlが生成され、これをhead内でインポートしフルCSSは非同期で読み込む。PhantomJSが重いのか少し実行に時間はかかるが、問題なく作動した。
しかし、内部モジュールのCSSパースの精度がよくないのか正確なクリティカルCSSを吐き出せておらず、ベタにcriticalを使うこととなった。
とりえず一度静的なhtmlへレンダリングを行い、それを解析。それ以外は上記と同じ流れとなる。
criticalの部分は…
1critical.generate({
2 base: 'public/',
3 src: 'index.html',
4 css: ['public/css/normalize.css', 'public/css/evil-icons.min.css', 'public/css/main.css'],
5 width: 320,
6 height: 480
7}).then(output => {
8 const clean = new cleanCSS().minify(output);
9
10 fs.writeFile('views/inline/index.html', `<span class="subst">${clean.styles}</span>`);
11}).error(err => {
12 console.error(err)
13});
こんな感じ。Promiseで書けるので多少複雑になっていっても視認性はよさそうだ。
PageSpeed Insightsの点は結構上がって気持ちがいいので、しばらくこれで運用して改善点と課題を洗い出したいと思う。
今現在、開発にはBracketsを使っている。
前々からVisuale Studio Codeも触っていて、バージョンアップを繰り返すごとに目に見えて良くなっており魅力を感じていたものの、Editorconfigの未対応などがちょっと痛くて導入はできずにいた。
しかし今回のオープンソース化にあたって、早速Editorconfig拡張も有志により追加されたので引っ越しの準備を始めている。
ブログではない、静的なサイトをビルドするにあたって、Metalsmithがよさげなので使ってみた。
公式は上記。
最近は勢いが乏しいらしく、現時点では非推奨のモジュールが公式のサンプルにで使われている。
が、メンテは継続されているようだしエコシステムもほぼ仕上がっているようなので、通常導入する分には問題はなさそう。
上記記事を参考にとりあえずビルドまでもっていく。metalsmith-templatesは非推奨となり、metalsmith-layoutsとmetalsmith-in-placeへ分離したらしいが、今回は気にせず使用していく。テンプレートエンジンはNunjucksへ変えた。
また、metalsmith.jsonに設定を書いていくやりかたは個人的にあまり気持ちのいい方法ではないので、jsでビルドする方法を選択した。
1'use strict';
2const Metalsmith = require('metalsmith');
3const collections = require('metalsmith-collections');
4const markdown = require('metalsmith-markdown');
5const permalinks = require('metalsmith-permalinks');
6const templates = require('metalsmith-templates');
7const metalsmith = new Metalsmith(__dirname)
8 .use(collections({posts: {pattern: "posts/*.md"}}))
9 .use(markdown())
10 .use(permalinks({pattern: ':title'}))
11 .use(templates('nunjucks'))
12 .build(err => {
13 if (err) throw err;
14 });
これだけで今回ほしい部分は大体動く。
柔軟性が高いようなので、ブログでなければMetalsmithのほうが楽に作れると感じた。