サイトへWebフォントを導入する際の手順。
フォントの変換はFont Converterで、Woff2へはwoff to woff2 converterで行える。
1@font-face { 2 font-family: 'webfont'; 3 src: url('font/webfont.eot'); 4 src: url('font/webfont.eot?#iefix') format('embedded-opentype'), 5 url('font/webfont.woff2') format('woff2') 6 url('font/webfont.woff') format('woff'), 7 url('font/webfont.ttf') format('truetype'), 8 url('font/webfont.svg#icomoon') format('svg'); 9}
IE8以下の対応はもういいかなとも思う。
サイトのWebアプリ化を押し進めるためmanifest.jsonを設置。
MDNにも記事があるし、普段使いのFirefoxでもしっかり動くのだろうか。
上記はモバイルフレンドリーの目線でWebアプリ化に幅広く言及している記事。
この記事はさっと読めて、参考になる。
manifest.json
1{
2 "name": "Kinlan's Amazing Application ++",
3 "short_name": "Kinlan's Amaze App",
4 "icons": [{
5 "src": "launcher-icon-3x.png",
6 "sizes": "144x144",
7 "type": "image/png"
8 }],
9 "start_url": "index.html",
10 "display": "standalone"
11}
これが最低限必要な項目らしい。
index.html
1<link rel="manifest" href="/manifest.json">
あとはヘッドで読み込めばオケ。
これはService Workerを使用した「ホームへ追加」バナーの表示の記事。
1window.addEventListener('load', function() {
2 if ('serviceWorker' in navigator) {
3 navigator.serviceWorker.register('/sw.js');
4 }
5});
これもインストールバナーについて詳しく解説している記事。
Increasing engagement with Web App install banners — Google Web Updates
そしてそのサンプル。
samples/app-install-banner at gh-pages · GoogleChrome/samples
Choromeでは問題なく動作し、インストールバナーも表示された。
ただ一度インストールをしないを選択すると、次回再表示はなさそうなのであまり強力な効果は期待できないかも。
theme-colorの設定がmanifest.json内に記述できるようになったよう。
従来のmetaタグだとこう。
1<meta name="theme-color" content="#2196F3">
manifest.jsonだとこう。
"theme_color": "#2196F3"
しかしmanifest.jsonのみの記述だとホームへ追加しないと効力を発揮しないようなので、現時点では両方記述したほうがいいかもしれない。
FirefoxでもServiceWorkerをテストする。
about:configでdom.serviceWorkersを検索し、フラグをtrueへ変更する。
ServiceWorkerは問題なく作動したが、アプリ化の効果は現時点では無さそう。今後に期待したい。
BetaとDeveloper Edition(Aurora)では64bit版が使えるようなので、導入してみた。
Developer Editionはたまにしか使わないのでよくわからないが、常用しているBetaはいい感じ。
思ったより快適でメモリもまだ余裕があるので、マシンスペックによっては幸せになれるかと。
ついでにChromeも64bitへ上げたが、これこそ僕は検証でしか使用しないので違いは分からず。
でも、きっとよくなってると思う。
最近はずっとSource Code Proを使っていたんだけど、ものは試しとSource Han Code JPを味見してみた。
adobe-fonts/source-han-code-jp
この記事を参考にBracketsへ導入。
(やっぱりすんなりとはいかなかった…)
1'Source Han Code jp Medium', ＭＳ ゴシック, 'MS Gothic', monospace
僕の環境では上記の用に記述すると動いた。
ウェイトをもっと細くしたいが、Medium以外は認識しない…。
最初は結構違和感を感じてフォントサイズなどの微調整は必要だったけど、結果としてはなかなか、いい塩梅。
日本語が入り乱れてるファイルの作業では効力を発揮しそうなので、今後はこれメインでいってみようかと。
フロント向きだと感じた。
Wordpressなどの開発はXamppで十分だが、Nodeを本格的にWindows上で行うのはきつい。
というか本番環境がWindowsならまだいいかもしれないが、現実はほとんどそうではないので仮想環境上で開発すべきであろう。
Windows10へアップグレードしたのを機会に、前々から検討していたVagrantでの開発環境導入を試みる。
Vagrantは仮想環境を使用するため、Virtualization Technologyを有効にする必要がある。
PCのBIOSに入り、Virtualization Technology を Enabled へ
各公式サイトから最新版をダウンロードし、インスコ。
Vagrant 公式サイト
http://www.vagrantup.com/
VirtualBox
https://www.virtualbox.org/
配布サイトから必要なBoxを吟味。
今回はCentOS v6.6 64bit。
Vagrantbox.es
http://www.vagrantbox.es/
ここからコマンドプロンプト
1$ vagrant box add centos6.6 http://sourceforge.net/projects/nrel-vagrant-boxes/files/CentOS-6.6-x86_64-v20150426.box
1$ vagrant box list
ここからコマンドプロンプト on 作業フォルダ
1$ vagrant init centos6.6
1$ vagrant up
1$ vagrant status
1$ vagrant halt
1$ vagrant reload
1$ vagrant destroy
TeraTermで接続した。
1$ sudo yum -y install git
1$ git clone https://github.com/creationix/nvm.git ~/.nvm 2$ source ~/.nvm/nvm.sh$ nvm install 0.12
1$ npm install --no-bin-links
1$ sudo service iptables stop$ sudo chkconfig iptables off
Windows10でも今回は問題はなかったが、環境やVirtualBoxのバージョンによっては不具合も報告されているようなのでもうちょっと待ったほうが安全かもしれない。
Vagrantを開発環境として本格運用していくならイメージの保存や構成管理ツールも合わせるのが楽っぽいので、順次導入していきたい。