content.json

{"meta":{"title":"Playlog","subtitle":null,"description":"Webフロントエンドについて徒然と","author":"Hirofumii","url":"https://log.plyrs.net"},"pages":[],"posts":[{"title":"Github Pagesで独自ドメインを利用したサイトをHTTPS化","slug":"GithubPagesで独自ドメインを利用したサイトをHTTPS化","date":"2018-04-24T16:24:47.000Z","updated":"2018-05-16T16:28:43.556Z","comments":true,"path":"2018/04/25/GithubPagesで独自ドメインを利用したサイトをHTTPS化.html","link":"","permalink":"https://log.plyrs.net/2018/04/25/GithubPagesで独自ドメインを利用したサイトをHTTPS化.html","excerpt":"","text":"このブログは Github pages 上で独自ドメインを利用して構築されている。今回ここの HTTPS化を実施した。 参考：Securing your GitHub Pages site with HTTPS - User Documentation いつのまにか独自ドメインのを利用したページも Let’s Encrypt を使用したSSL発行が行われていたようで、HTTPS化を強制することで完了した。詳しい方法は上記リンクを参照したが、特に混在コンテンツの問題もなくスムーズに移行できた。 独自ドメインの Github Pages のHTTPS化は、少し前までは CloudFlare を利用するのが常套句であったが、今回Github内のみで解決できハードルが相当下がった印象だ。 CloudFlare を挟むくらいなら自前のサーバーに上げSSL化した方がいいと感じていたが、今後は逆に、積極的にGithub上へ移行させたくなった。","categories":[],"tags":[{"name":"Github","slug":"Github","permalink":"https://log.plyrs.net/tags/Github/"}]},{"title":"OpenSSLを更新","slug":"Opensslを更新","date":"2017-12-08T16:21:58.000Z","updated":"2018-05-14T16:24:13.520Z","comments":true,"path":"2017/12/09/Opensslを更新.html","link":"","permalink":"https://log.plyrs.net/2017/12/09/Opensslを更新.html","excerpt":"","text":"WordPressを管理画面からアップデートしようと思ったら、以下の様なエラーにより失敗した。 1wordpress 更新 ダウンロードに失敗しました。: cURL error 77: 調べてみると、セキュリティ通信で失敗しており OpenSSL の更新が必要なよう。 そこで以下の手順で更新を実行した。 1234567891011# OpenSSLのバージョンを確認$ rpm -qa | grep openssl# キャッシュを削除$ yum clean all# OpenSSLを更新$ sudo yum update openssl openssl-devel# Webサーバーを再起動（ここではNginx）$ sudo systemctl restart nginx.service 完了後、無事WordPressの更新を確認した。","categories":[],"tags":[]},{"title":"Firefox57とOpenwith","slug":"Firefox57とOpenwith","date":"2017-10-16T16:19:41.000Z","updated":"2018-05-14T16:21:02.736Z","comments":true,"path":"2017/10/17/Firefox57とOpenwith.html","link":"","permalink":"https://log.plyrs.net/2017/10/17/Firefox57とOpenwith.html","excerpt":"","text":"今普段使いしている Firefox Developer Edition は、バージョンが57となったため、拡張機能がWebExtention限定となり、多数が使用不能となった。 いくつかは一旦仕様を諦めるか代替品へ移行したが、Open WithはWebExtention版がベータ版がテスト中とのことで、それを使用した。 Open With WebExtension beta available · Issue #132 · darktrojan/openwith その際の手順は以下の通り。 ここから最新版をインストールする。 もしインストールされていなかったら、pythonをPCへインストールする。（2系、3系のどちらでもOKらしい） FirefoxでOpen withを立ち上げ、そのウィンドウ内にあるClick here to downloadをクリックし、open_with_windows.py というファイルをダウンロードする。 コマンドプロンプトを立ち上げ、open_with_windows.py install のようにインストールを実行する。 ウィンドウ内の Test Installationを実行し、グリーンのチェックマークが表示されると成功。 これによりOpen With がFirefox 57 移行でも使用できる。使いかって、表示は若干差異があるが、ほぼ問題はない。 この調子で順調に著名拡張機能が移行したらいいのだが…そうはなかなかいかんだろうなぁ…。","categories":[],"tags":[{"name":"Firefox","slug":"Firefox","permalink":"https://log.plyrs.net/tags/Firefox/"}]},{"title":"GoogleAppsScriptのローカルで開発","slug":"GoogleAppsScriptのローカル開発","date":"2017-10-01T16:07:47.000Z","updated":"2018-05-14T16:19:04.288Z","comments":true,"path":"2017/10/02/GoogleAppsScriptのローカル開発.html","link":"","permalink":"https://log.plyrs.net/2017/10/02/GoogleAppsScriptのローカル開発.html","excerpt":"","text":"業務上の定期的な通知に、GoogleAppsScriptを使用してChat Work APIを叩くというのを利用している。 しかし、GoogleAppsScriptのコード管理は原則ブラウザ上で行う形となるので、なかなかバージョン管理も難儀で不都合も生じる。よって、ローカルで開発・修正し、アップロードし実行という環境を構築するべく、node-google-apps-scriptを導入した。その際の参考は以下の記事。 danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projects Google Apps Scriptをローカルで開発する - Qiita gapps を使って Google Apps Script を継続的にデプロイする - kakakakakku blog 結果コードの編集と gapps upload コマンドを繰り返すだけで反映が可能となった。GoogleAppScriptはアイデア次第でかなり有用なので、容易に導入できるよう開発環境も整備して行きたい。","categories":[],"tags":[]},{"title":"WHATWG HTMLのLint","slug":"WHATWGHTMLのLint","date":"2017-09-07T15:36:51.000Z","updated":"2018-05-15T13:36:02.099Z","comments":true,"path":"2017/09/08/WHATWGHTMLのLint.html","link":"","permalink":"https://log.plyrs.net/2017/09/08/WHATWGHTMLのLint.html","excerpt":"","text":"W3CのHTML文法チェッカー比較的よく知られ僕もは何度か使ったことがあるが、WHATWG版があるか気になり調べてみたら、やはり存在した。 Web Hypertext Application Technology Working Group HTML Conformance Checkers 各ブラウザベンダーはHTMLに関してはWHATWGの仕様を見ているので、構文チェックもこちらで行うのがよさそう。ただ、昔と比較しそれほど神経質になる必要もなくなってきているような気がするが…。（なぜそう感じているのかは、うまく言葉では言えないが） WHATWG版とW3C版の主な差異：HTML5.3各要素別メモ また関連して、上記ページもなかなか参考になる。","categories":[],"tags":[{"name":"HTML","slug":"HTML","permalink":"https://log.plyrs.net/tags/HTML/"}]},{"title":"Xhamppでバーチャルホスト","slug":"Xhamppでバーチャルホスト","date":"2017-07-04T15:34:00.000Z","updated":"2018-05-16T16:35:56.680Z","comments":true,"path":"2017/07/05/Xhamppでバーチャルホスト.html","link":"","permalink":"https://log.plyrs.net/2017/07/05/Xhamppでバーチャルホスト.html","excerpt":"","text":"PC内のXhamppにバーチャルホストを設定し、複数サイトの開発環境を構築したい。 httpd.confの設定/xampp/apache/conf/httpd.conf を編集。Listen 80 の下へ必要な分のポートを追記。 例：123Listen 8080Listen 8081Listen 8082 バーチャルホスト（httpd-vhosts.conf）の設定/xampp/apache/conf/extra/httpd-vhosts.conf を編集。 例：123456789<VirtualHost *:80>DocumentRoot \"C:/xampp/htdocs\"ServerName localhost</VirtualHost> <VirtualHost *:8080>DocumentRoot \"C:/xampp/htdocs/【ディレクトリ名】\"ServerName localhost</VirtualHost> 以下の記事が参考になった。 xamppでローカル作業環境構築 | アライドアーキテクツのクリエイターブログ","categories":[],"tags":[{"name":"XAMPP","slug":"XAMPP","permalink":"https://log.plyrs.net/tags/XAMPP/"}]},{"title":"Windows環境でnode.jsモジュールのインストールエラー解消","slug":"Windows環境でnode-jsモジュールのインストールエラー解消","date":"2017-05-28T15:25:06.000Z","updated":"2018-05-14T15:33:03.251Z","comments":true,"path":"2017/05/29/Windows環境でnode-jsモジュールのインストールエラー解消.html","link":"","permalink":"https://log.plyrs.net/2017/05/29/Windows環境でnode-jsモジュールのインストールエラー解消.html","excerpt":"","text":"Windows環境で node.jsのモジュールインストール時にエラーが発生する。 どうやら原因はC++のコンパイルが動作しないことのようで、これを解消していく。 Windowsでnpm installの赤いエラーに悩まされているアナタへ - Mainly Devel Notes nodejs-guidelines/windows-environment.md at master · Microsoft/nodejs-guidelines Microsoftが管理しているNode.jsガイドラインを主に参考に進める。情報の鮮度が大本が管理しているだけに高そう。まずは Visual C++ Build Tools をインストールする。カスタムインストールから “Windows 8.1 SDK”と”Windows 10 SDK” を選択。容量が大体7GBほど使用するらしいが、しょうがない。 また、Python 2.7もインストールする。 しかし今度は下記ののエラーが発生。 ERROR in Cannot find module 'node-sass' これはいつも通り、node-sass の再インストールで解消。これで通常運転に移った。そこまでやってその存在に気付いたが、下記ののツールを用いるととても簡単そうである。 felixrieseberg/windows-build-tools: Install C++ Build Tools for Windows using npm 普通に以下のようにグローバルインストールするだけで、もろもろセッティングを行ってくれるようだ。 1$ npm install -g windows-build-tools 近年はMicrosoftもNode.jsへ色々と投資をしているので、少しずつ改善はしているが…もう一歩という印象は残る。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Firefoxのマルチプロセス-e10s-を強制有効化","slug":"Firefoxのマルチプロセス-e10s-を強制有効化","date":"2017-05-26T15:23:25.000Z","updated":"2018-05-14T15:24:14.332Z","comments":true,"path":"2017/05/27/Firefoxのマルチプロセス-e10s-を強制有効化.html","link":"","permalink":"https://log.plyrs.net/2017/05/27/Firefoxのマルチプロセス-e10s-を強制有効化.html","excerpt":"","text":"e10s未対応のレガシーなアドオンがインストールされている環境でも強制的に有効にする。 about:config をいじる必要があり。extensions.e10sBlocksEnabling と extensions.e10sBlockedByAddons を false へ。その後Firefoxを再起動すると有効化された。 これによってFirefoxが不安定になるかは様子見。 【Firefox】アドオンにより無効となったe10sを強制的に有効とする方法 | ハルパス","categories":[],"tags":[{"name":"Firefox","slug":"Firefox","permalink":"https://log.plyrs.net/tags/Firefox/"}]},{"title":"React Date-picker","slug":"ReactDate-picker","date":"2017-05-12T15:18:01.000Z","updated":"2018-05-16T16:55:29.760Z","comments":true,"path":"2017/05/13/ReactDate-picker.html","link":"","permalink":"https://log.plyrs.net/2017/05/13/ReactDate-picker.html","excerpt":"","text":"Date-picker機能を実装するにあたり、Reactコンポーネントを含め調査を行った。 reactのdate-pickerを選ぶ - Qiita Hacker0x01/react-datepicker: A simple and reusable datepicker component for React（採用） Rudeg/react-input-calendar（すんなり使えなかった） HTML標準のinput要素のtype属性「date」のPolyfillもいくつか見つかった。 Input type=”date” polyfill (date picker) - Working examples - Web Experience Toolkit jcgertig/date-input-polyfill: Automatically adds datepickers to input[type=date] on IE, Firefox, and OS X Safari. chemerisuk/better-dateinput-polyfill: input[type=date] polyfill for better-dom Firefoxは次期バージョンでChromeライクなDate-pickerが利用できるが、現時点ではまだ未対応。これらのポリフィルを採用してもよかったが…統一したUIの提供を優先し、今回はReactコンポーネントを利用した。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"},{"name":"React","slug":"React","permalink":"https://log.plyrs.net/tags/React/"}]},{"title":"Instagram　API","slug":"InstagramAPI","date":"2017-03-30T10:55:48.000Z","updated":"2018-05-13T10:59:28.861Z","comments":true,"path":"2017/03/30/InstagramAPI.html","link":"","permalink":"https://log.plyrs.net/2017/03/30/InstagramAPI.html","excerpt":"","text":"Instagram APIを使用したフィード表示を実装してみた。 参考文献は以下、情報は多々見つかった。 Instagram APIの利用方法 - Qiita instagramのuser idを取得する方法 How to get Instagram API access token and fix your broken feed 【保存版】Instagramの審査の流れ、手順、必要なものまとめ - Qiita Instagram APIを使ってWEBサイトに写真を表示させてみよう｜株式会社カポタスト Instagram APIをPHPでさくっと使う - Qiita 今回はPHPを開始実装を行った。コードは代替、このような感じである。 1234567891011121314<?php$myAccessToken = '00000000000000000000';$user_id = '0000000000';$json = file_get_contents('https://api.instagram.com/v1/users/'.$user_id.'/media/recent/?access_token='.$myAccessToken);$obj = json_decode($json);foreach($obj->data as $data){ echo '<img src=\"'.$data->images->low_resolution->url.'\" alt=\"\">';}?> 自アカウントの情報を載せる分にはそれほどハードルは高くなさそうであるが、それ以上を行うとなると手続きはかなり面倒そうである。","categories":[],"tags":[]},{"title":"WordPressとlazysizes","slug":"Wordpressとlazysizes","date":"2017-03-04T10:51:54.000Z","updated":"2018-05-16T16:30:08.374Z","comments":true,"path":"2017/03/04/Wordpressとlazysizes.html","link":"","permalink":"https://log.plyrs.net/2017/03/04/Wordpressとlazysizes.html","excerpt":"","text":"Wordpressの記事内の画像読み込みを遅延化したい。少し調べてみたところ、以下の記事が参考になった。方法はいくつかあるようなので…少し吟味が必要である。 wordpressにおけるレスポンシブイメージに対するlazyload対策 - Coding MemosaFarkas/wp-lazysizes: Brings lazySizes.js to WordPress","categories":[],"tags":[{"name":"WordPress","slug":"WordPress","permalink":"https://log.plyrs.net/tags/WordPress/"}]},{"title":"Conoha VPS(CentOS7)へ WordPressを導入","slug":"ConohaVPS(CentOS7)へWordpressを導入","date":"2016-12-19T10:48:27.000Z","updated":"2018-05-16T16:30:36.064Z","comments":true,"path":"2016/12/19/ConohaVPS(CentOS7)へWordpressを導入.html","link":"","permalink":"https://log.plyrs.net/2016/12/19/ConohaVPS(CentOS7)へWordpressを導入.html","excerpt":"","text":"Conoha VPS上のCentOS 7へWordPressを導入する機会があったのでメモ。 ConoHaのVPS上で CentOS 7 + nginx + WordPress 構築まで – 或る阿呆の記 WordPressをインストールしてブログを作る｜VPSならConoHa VPSのConohaにWordPressを導入して公開するまでの方法 用意されているテンプレートを活用できれば手軽で早そうである。","categories":[],"tags":[{"name":"WordPress","slug":"WordPress","permalink":"https://log.plyrs.net/tags/WordPress/"}]},{"title":"Subversion","slug":"Subversion","date":"2016-03-25T10:44:47.000Z","updated":"2018-05-13T10:46:17.342Z","comments":true,"path":"2016/03/25/Subversion.html","link":"","permalink":"https://log.plyrs.net/2016/03/25/Subversion.html","excerpt":"","text":"最近、Subversionを採用しているプロジェクトに携わっている。今までGit しか使ったことがないにわかなので、とりあえずGit との文化や考え方の違いを色々感じている。 Subversion の基礎勉強 ~ Subversion によるバージョン管理 ~ — バージョン管理システム入門(初心者向け) Subversion（svn）によるソフトウェア開発を始めよう - OSDN 今更聞けないSubversionの使い方 - Qiita 今のところは、ちょっと難儀じゃのう…という印象である。","categories":[],"tags":[]},{"title":"oghliner","slug":"oghliner","date":"2016-03-17T10:41:57.000Z","updated":"2018-05-16T16:30:46.315Z","comments":true,"path":"2016/03/17/oghliner.html","link":"","permalink":"https://log.plyrs.net/2016/03/17/oghliner.html","excerpt":"","text":"GithuPagesを作成する際に、Mozillaが開発しているoghlinerを利用してみた。 Oghliner まずはモジュールをインストール。 1$ npm install oghliner -g もしくはプロジェクトごとにインストールも可。 1$ oghliner bootstrap 実行するとconfigurationを聞かれる。後からでも変更できるのでとりあえず初期値で実行。 これにより、さくっとオフライン対応のGithubPageを作成できる。類似ツールと比較して、利点などを確認していきたい。","categories":[],"tags":[{"name":"Github","slug":"Github","permalink":"https://log.plyrs.net/tags/Github/"}]},{"title":"css font-display @font-face","slug":"cssfont-display-font-face","date":"2016-02-28T10:40:43.000Z","updated":"2018-05-16T16:54:32.361Z","comments":true,"path":"2016/02/28/cssfont-display-font-face.html","link":"","permalink":"https://log.plyrs.net/2016/02/28/cssfont-display-font-face.html","excerpt":"","text":"Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。 CSS Font Rendering Controls Module Level 1 まずはフラグを有効にする。 FIrefox のアドレス欄へabout:configと入力し、設定画面を開く。そこでlayout.css.font-display.enabledを検索し、値をtrueへ。これで機能が有効となる。 Chrome の開発版ではすでに導入されているらしく、下記記事が非常に参考になった。 @font-face(CSS)のfont-displayプロパティがChrome Canaryに来た – 阿Q論 やはりFOUTをネイティブの機能で解決することが期待されるよう。今までは主に Web Font Loader を導入したり、 あと Adobe Blank なんてのもあった気が…。とにかく涙ぐむしい努力をしてきたので人類にとって、これは待望の機能かなと。 1157064 – experimental implementation of font-display CSS @font-face descriptor 現時点での実装はスペックの推奨通りでクロームと同様のよう。設定値はfallbackがベストで、妥協してblockといった感じだろうか。パフォーマンスとユーザビリティの両方にバランスよく配慮できそうである。 12345678910@font-face { font-family: 'Waiting for the Sunrise'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Waiting for the Sunrise'), local('WaitingfortheSunrise'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff2') format('woff2'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff') format('woff'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.ttf') format('truetype');} その他の値も少しの違いながら明確に用途がわかれそうなので、なかなかよくできている感じ。will-changeのように必要そうな部分へは先行導入しておき、ブラウザの対応を待ってもいいかと。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"MongoDB 地理空間インデックス","slug":"MongoDB地理空間インデックス","date":"2016-02-21T10:39:23.000Z","updated":"2018-05-16T16:36:02.082Z","comments":true,"path":"2016/02/21/MongoDB地理空間インデックス.html","link":"","permalink":"https://log.plyrs.net/2016/02/21/MongoDB地理空間インデックス.html","excerpt":"","text":"MongoDB にて地理空間のインデックスを作成したい。 Geospatial Indexes and Queries — MongoDB Manual 3.2 インデックスの作成は通常の方法で行えるよう。 12345678# 初期状態のインデックスを確認$ db.places.stats()# インデックスを作成$ db.places.createIndex({Bar: \"2dsphere\"})# 作成したインデックスを確認$ db.places.getIndexes() これでplacesのインデックスがBarのフィールド内に昇順で作成される。平面空間なら2d、球面空間なら2dsphereを使用するらしい。今回は地球という球面空間の経緯度を記録する用途で使用するので、2dsphereとなる。ちなみに以前よく使用されていた ensureIndex() は3.0からは非推奨となったよう。今後は基本的にcreateIndex() を使うらしい。 ただGeoJsonのデータと通常のインデックスの違いとしてフォーマットが正しくなければ作成できないようなので、下記Linterなどを使用して事前にコレクションがGeoJsonの仕様に準拠しているか確認したほうがよさそう。 GeoJSONLint - Validate your GeoJSON MongoDBの地理空間インデックス・クエリ整理 - Qiita MongoDB Index基本 - /var/log/kozy4324 2d Index Internals — MongoDB Manual 3.2 Difference between createIndex() and ensureIndex() in java using mongodb - Stack Overflow","categories":[],"tags":[{"name":"MongoDB","slug":"MongoDB","permalink":"https://log.plyrs.net/tags/MongoDB/"}]},{"title":"MogoDB 3.0 => 3.2","slug":"MogoDB3-0-3-2","date":"2016-02-21T10:38:08.000Z","updated":"2018-05-16T16:31:05.805Z","comments":true,"path":"2016/02/21/MogoDB3-0-3-2.html","link":"","permalink":"https://log.plyrs.net/2016/02/21/MogoDB3-0-3-2.html","excerpt":"","text":"開発環境のMongoDB（3.0）を3.2へアップデートした。MogoDBを使ている以上はストレージエンジンをWiredTiger へ移行したいが、どうやら3.2 ではデフォルトで有効となる模様。 Upgrade MongoDB to 3.2 — MongoDB Manual 3.2 これは好都合なので、3.2での動作検証をしっかりと行っていく方向で準備を進めることにした。 yum リポジトリを作成MongoDB は既に3.0で運用していたので、今回は直接3.2 へ上げられる。もし2.6以前を使用しているなら一度3.0へと上げなければならない模様。 12345678$ sudo vi /etc/yum.repos.d/mongodb-org-3.2.repo#3.0 を 3.2 へ書き換え[mongodb-org-3.2]name=MongoDB Repositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/gpgcheck=0enabled=1 インストール1234567891011121314# もし起動しているならMongoを停止$ sudo systemctl stop mongod# 更新を確認$ yum check-updatemongodb-org.x86_64 3.2.3-1.el7 Mongodb-org-3.2mongodb-org-mongos.x86_64 3.2.3-1.el7 Mongodb-org-3.2mongodb-org-server.x86_64 3.2.3-1.el7 Mongodb-org-3.2mongodb-org-shell.x86_64 3.2.3-1.el7 Mongodb-org-3.2mongodb-org-tools.x86_64 3.2.3-1.el7 Mongodb-org-3.2# 実行$ sudo yum update これで最新のMongoDB3.2 系が入った。 1234567# mongo を起動$ sudo systemctl start mongod# バージョンを確認$ mongo --versionMongoDB shell version: 3.2.3 早速Webアプリを起動しなおした感じでは、今のところ問題は発生してない。色々な記事やデータを見る限り性能が上がるのは間違いなさそうなので、テスト結果をしっかりと確認・整備して作業を進めたい。","categories":[],"tags":[{"name":"MongoDB","slug":"MongoDB","permalink":"https://log.plyrs.net/tags/MongoDB/"}]},{"title":"WebP","slug":"WebP","date":"2016-02-20T10:36:50.000Z","updated":"2018-05-13T10:37:28.039Z","comments":true,"path":"2016/02/20/WebP.html","link":"","permalink":"https://log.plyrs.net/2016/02/20/WebP.html","excerpt":"","text":"WebP を導入するべく簡易Modenizr もどきを使用してフォールバックを行った。 1234567891011121314151617181920212223function checkWebpSupport(fn) { \"use strict\" const html = document.documentElement, WebP = new Image(); WebP.onload = WebP.onerror = () => { const isSupported = (WebP.width > 0 && WebP.height > 0); if (isSupported) { if (html.className.indexOf('no-webp') >= 0) { html.className = html.className.replace(/\\bno-webp\\b/, 'webp'); } else { html.className += ' webp'; } } fn(isSupported); }; WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';} これをロード時に読み込ますことでhtml に付与されたクラスを切り替える。 Frequently Asked Questions | WebP | Google Developers Check WebP Support in browser 他にNginx によるフォールバックの実装例も見つけた。 1234567891011location = /logo { if ($http_accept ~* \"webp\") { add_header Vary Accept; rewrite (.*) $1.webp last; } if ($http_user_agent ~* \"(Chrome|Opera|Android|Android.*Chrome)\") { add_header Vary User-Agent; rewrite (.*) $1.webp last; } rewrite (.*) $1.png last;} webp compatible on nginx これは単純にUAを判別し、拡張しを書き換える手法のよう。 CSSのimage-setもHTMLの様にフォーマットによる切り替えができれば、こんな回りくどいことしなくていいのだが…。","categories":[],"tags":[]},{"title":"cssnano","slug":"cssnano","date":"2016-02-17T10:35:52.000Z","updated":"2018-05-13T10:36:29.435Z","comments":true,"path":"2016/02/17/cssnano.html","link":"","permalink":"https://log.plyrs.net/2016/02/17/cssnano.html","excerpt":"","text":"cssの圧縮でgulp-minify-cssを利用していたのだが、どうやら開発止めてgulp-cssnanoへと移行を促いしている様子。 なので早速入れ替えてみた。 cssnano: A modular minifier based on the PostCSS ecosystem 機能盛りだくさんと言いたいところだけど、minify-cssも結構色々やってくれてたので、実際使ってみないと何ともいえなさそう。とりあえずAutoprefixer は内包されているようだ。 cssnano: Optimisations 使ってみた感じでは確かに少しサイズも縮小された。結構calcを多用しているので、単純な計算を事前にするのはいい感じ。 ただ一方でunsafe な機能はしっかり把握して使用しないと危険な匂いが…。特にz-indexの再配置は環境によってはよからぬ影響が出そう。 効能と副作用をしっかり把握して使用していきたい。","categories":[],"tags":[]},{"title":"LetsEncryptとhttp2とNodeと","slug":"LetsEncryptとhttp2とNodeと","date":"2016-02-17T10:32:19.000Z","updated":"2018-05-13T10:35:05.167Z","comments":true,"path":"2016/02/17/LetsEncryptとhttp2とNodeと.html","link":"","permalink":"https://log.plyrs.net/2016/02/17/LetsEncryptとhttp2とNodeと.html","excerpt":"","text":"CloudFlare を利用してTLS化していたサイトを、Let’s Encrypt へ移行した。 参考にした記事ではWebroot プラグインを使用し、サーバーを停止せずに行う手法が多数でしたが、僕の環境（Node.js）だと少しハマったのでStandalone で取得を行った。 まずはCloudFlare を停止し、Aレコードを直接サーバーへ設定。 12# gitで取得$ sudo git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt 12345# Nginx を停止$ sudo systemctl stop nginx# 80番ポートが塞がれていないかチャック$ netstat -na | grep ':80.*LISTEN' 12345# Let' sencrypt フォルダへ移動$ cd /opt/letsencrypt# Stndalone プラグインを実行$ ./letsencrypt-auto certonly --standalone 情報を入力し規約に同意して完了。 1$ sudo ls /etc/letsencrypt/live/your_domain_nam 12# Nginx を起動$ sudo systemctl start nginx 導入のさいに参考となった文献は以下など。 光の速さのWEBサーバー(nginx)をlet’s encryptでSSL化及びHTTP/2化。ついでにセキュリティ評価をA＋にする。 - Qiita Let’s EncryptとnginxでHTTP/2サーバを立てる - pixiv inside aeas44 — CentOS 7 の Nginx への Let’s Encrypt の導入 Let’s Encrypt で証明書を発行して運用するための nginx の設定 - 意識低い開発者のBlog Hardening node.js for production part 2: using nginx to avoid node.js load | Arg! Team Blog NGINX Config for nodejs application with nginx serving assets and socket.io support また、証明書の更新は以下の手順で行う。 12345678# nginxを停止(80番ポートを開ける)$ sudo systemctl stop nginx# 更新$ ./letsencrypt-auto renew# nginxを起動$ sudo systemctl start nginx","categories":[],"tags":[]},{"title":"NAS","slug":"NAS","date":"2016-02-14T10:30:40.000Z","updated":"2018-05-16T16:31:25.350Z","comments":true,"path":"2016/02/14/NAS.html","link":"","permalink":"https://log.plyrs.net/2016/02/14/NAS.html","excerpt":"","text":"メディアサーバーとして使用しているNASのハードディスクを交換した。 デグレードモードI12のLinkStationのHDDを交換 – 2.RAIDの再構成 | データ復旧のパソコンサポートやまもと 交換用HDは上記にてオススメされているものを購入した。 なんか交換&再構築中も本体のライトがピカピカ光る。とりあえず心配になったら下記にてエラーコードを解読するもののなす術はなく、時間がたったら解決した。 エラーコード、インフォメーションコードの意味がわかりません(LS-WXBL/R1) - アンサー詳細 | BUFFALO バッファロー ハードディスクを交換 NAS再起動 PCのネットワーク上にきちんと認識されるまで待つ（ネットサーフィンでもしといた方がいい） 認識されたらWeb設定画面からエラーが出ているハードディスクを選択し、アレイを再構築 再構築が開始されるので、5時間ぐらい待つ（寝た方がいい） 今回はこのような流れであった。時間は待ち時間がかかるので、次回は家で何か作業を行う日に午前ぐらいから並行して行いたい。","categories":[],"tags":[{"name":"NAS","slug":"NAS","permalink":"https://log.plyrs.net/tags/NAS/"}]},{"title":"imagemin","slug":"imagemin","date":"2016-02-14T10:26:20.000Z","updated":"2018-05-13T10:29:09.103Z","comments":true,"path":"2016/02/14/imagemin.html","link":"","permalink":"https://log.plyrs.net/2016/02/14/imagemin.html","excerpt":"","text":"画像圧縮のgulpタスクをプロジェクトごとに組み込むのは難儀なので、コマンドラインからさくっと行えるようにしたい。 それを最終目標として、とりあえずgulpを使わない画像圧縮専用のプロジェクトを作り、それを共同で利用ししばらく運用してみたい。現時点でイメージしているのは、imageminを直接叩く方法である。これを後々はCLIから操作できるようにすれば…と考えている。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"API Blueprint","slug":"APIBlueprint","date":"2016-02-13T10:23:37.000Z","updated":"2018-05-13T10:25:30.032Z","comments":true,"path":"2016/02/13/APIBlueprint.html","link":"","permalink":"https://log.plyrs.net/2016/02/13/APIBlueprint.html","excerpt":"","text":"APIドキュメントを作成したい。 こーゆーのは作りっぱなしじゃなくて、内容を常時最新に保つことで意味を持つのでやはりツールを使いたい。そこで軽く調査してみたところ、API Blueprintというツールがよく目に入った。 API Blueprint | API Blueprint APIドキュメントを生成するためのMarkdown拡張API BluePrintとその周辺のライブラリ - Qiita API Blueprintとgulp-aglioでいい感じのAPIドキュメントページを作成 - Front-end beginner’s luck APIの仕様をMarkdownで定義する - HDE BLOG この記事も面白い。 API Blueprint創始者が語るAPIの進歩","categories":[],"tags":[]},{"title":"assets-webpack-plugin","slug":"assets-webpack-plugin","date":"2016-02-06T10:22:23.000Z","updated":"2018-05-13T10:23:06.794Z","comments":true,"path":"2016/02/06/assets-webpack-plugin.html","link":"","permalink":"https://log.plyrs.net/2016/02/06/assets-webpack-plugin.html","excerpt":"","text":"Webpackでビルドした成果物のキャッシュバストを自動化したいので、assets-webpack-plugin を導入した。 sporto/assets-webpack-plugin: Webpack plugin that emits a json file with assets paths サンプル通り行うと[name]-bundle-[hash].js というネーミングでファイルが生成される。これでももちろん問題はないのだが、なんとなく今までの慣例でファイル名の後ろにパラメータを付与した方法をとりたい。 そこでoutput の設定を以下のようにした。 1234output: { filename: '[name].js?[hash]', chunkFilename: '[name].chunk.js?[hash]'}, これで成果物のファイル名は通常のままで、同時に排出される assets.json へクエリを付与したフルパスが記述される。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Monorepo","slug":"Monorepo","date":"2016-02-06T10:18:24.000Z","updated":"2018-05-13T10:21:57.971Z","comments":true,"path":"2016/02/06/Monorepo.html","link":"","permalink":"https://log.plyrs.net/2016/02/06/Monorepo.html","excerpt":"","text":"最近よく聞く、Monorepoについて調査してみた。参考になったのは以下の記事。 Lerna を使って、 Babel や React が採用している monorepo を試してみる - Qiita Git で monorepo を扱う際の課題とヒント - Atlassian Japan 橋本商会 » lernaでmonorepoした 単一リポジトリで複数package|projectを管理することをmonorepoというそう - なっく日報 kittens/lerna: A tool for managing JavaScript projects with multiple packages. 大きなプロジェクトでモジュールはそれぞれ分けて開発したいが、イシューなどは一元管理したい…という際に有用であると感じた。よって現時点では、僕とは無縁なようだ。","categories":[],"tags":[]},{"title":"React-router と Scroll Position","slug":"React-routerとScrollPosition","date":"2016-02-03T10:16:22.000Z","updated":"2018-05-13T10:17:25.776Z","comments":true,"path":"2016/02/03/React-routerとScrollPosition.html","link":"","permalink":"https://log.plyrs.net/2016/02/03/React-routerとScrollPosition.html","excerpt":"","text":"react-router と ReactCSSTransitionGroup を組み合わせてページ遷移時のアニメーションを実装したメモ。サンプルを参考に進めれば容易であった。 react-router/examples/animations at master · rackt/react-router しかし細かい挙動に凝り始めると、提供されているハイレベルなAPIでは難しくなってくる。今回はページ遷移時にスクロールポジションが維持されてしまう問題の修正に少しハマった。 結果的に react-router 側を微調整して完了となった。 Scroll to top on route change? · Issue #2019 · rackt/react-router 123<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}> ...</Router> これでページ遷移時に強制的にスクロールポジションをトップへ固定することができる。ただこの方法だとブラウザバックの際にも window.scrollTo(0, 0) が発動してしまいユーザビリティが損なわれる。結果的に下記の方法を採用した。 12345678910111213141516const history = createBrowserHistory();history.listen(location => { setTimeout(() => { if (location.action === 'POP') { return; } window.scrollTo(0, 0); });});const routes = ( <Router history={history}> // ... </Router>); Scroll position in RC1 · Issue #2144 · rackt/react-router これでブラウザバック時は前回のスクロールポジションを維持することができる。ちなみに下記のようなものもあるらしい。 rackt/scroll-behavior - JavaScript","categories":[],"tags":[{"name":"React","slug":"React","permalink":"https://log.plyrs.net/tags/React/"}]},{"title":"ReactとGoogleAnalytics","slug":"ReactとGoogleAnalytics","date":"2016-01-30T10:12:55.000Z","updated":"2018-05-13T10:15:42.470Z","comments":true,"path":"2016/01/30/ReactとGoogleAnalytics.html","link":"","permalink":"https://log.plyrs.net/2016/01/30/ReactとGoogleAnalytics.html","excerpt":"","text":"Reactベースで構築されたSPAの場合、Google Analyticsを用いたアクセス解析には一工夫が必要となる。 単一ページ アプリケーションのトラッキング | ウェブ向けアナリティクス（analytics.js） | Google Developers 単純にアナリティクスのコードを読み込むだけではなく、ルーティングへのフックを設置しなければならない。今回はreact-routerを採用しているので、それを基準にライブラリを探すと、以下が見つかった。 mozilla/react-ga - JavaScript seeden/react-g-analytics: React google analytics with support for react-router tcoopman/ga-react-router: Google analytics component for react-router react-gaはapiが豊富で、Mozilla内でドッグフーディングされているようで信頼もできる。コード量は一番多いかな。3.73 KB react-g-analyticsは機能をpageviewの送信にしぼっている分、シンプルな作り。 ga-react-routerはとにかくシンプル。Webpack前提の作りだが、かなり軽量だ。 一番サクっと導入できそうなのはreact-g-analyticsだが、その前にreact-routerのアップグレードからしたほうがよさそうだ。 最終的には react-ga を採用し、以下を参考に実装を行った。 reactjs - How to set up Google Analytics for React-Router? - Stack Overflow","categories":[],"tags":[{"name":"React","slug":"React","permalink":"https://log.plyrs.net/tags/React/"}]},{"title":"ReactとクリティカルパスCSS","slug":"ReactとクリティカルパスCSS","date":"2016-01-26T10:11:15.000Z","updated":"2018-05-13T10:11:59.968Z","comments":true,"path":"2016/01/26/ReactとクリティカルパスCSS.html","link":"","permalink":"https://log.plyrs.net/2016/01/26/ReactとクリティカルパスCSS.html","excerpt":"","text":"Reactを用いたUniversal(Isomorphic)なサイトのクリティカルパスCSSを自動化したい。 以前Nunjucksを使用したパターンはうまく機能したので、同様の手法でReactの実装を考えた。すなわち、Cssの更新にフックしGulp経由で静的なHTMLを生成し、それに対してCriticalを実行させクリティカルパスの部分を別のHTMLとして抽出し、インポートするという手法であった。 しかし、Critical 0.7.0がリリースされPenthouseのようにURL指定にて実行が可能になった。というよりPenthouseを内蔵した様子。 Release Critical 0.7.0 · addyosmani/critical ともかくこれによりCriticalと変わらぬ実行結果をURL指定で取得できそうなので、ぜひこの機能を利用したい。","categories":[],"tags":[{"name":"React","slug":"React","permalink":"https://log.plyrs.net/tags/React/"}]},{"title":"オフラインファースト","slug":"オフラインファースト","date":"2016-01-20T10:10:07.000Z","updated":"2018-05-13T10:10:58.636Z","comments":true,"path":"2016/01/20/オフラインファースト.html","link":"","permalink":"https://log.plyrs.net/2016/01/20/オフラインファースト.html","excerpt":"","text":"オフラインファーストで実装を試みるべく、ServiceWorkerを導入した。 Offline First! このワードが唱えられたころ、実現するための技術としてはAppCacheやWebStrageが紹介されていたが、現在は当然ServiceWorkerへとスライドしている。コードの記述量は多くなってるが、低レベルのAPI群を提供することで遥かに柔軟になっており、実質ES6で書けるのでストレスもほとんどない。 Service Workerの利用について - Web API インターフェイス | MDN 導入にあたって現時点での仕様とサンプルを調べたが、GoogleやMozillaなどブラウザベンダが提供してるものが質と信頼性が高いと思われるので、ここのみに視野を絞り参考にした。 samples/service-worker at gh-pages · GoogleChrome/samples ServiceWorker Cookbook また下記記事も実践的な考え方の参考になった。 Service Worker の紹介: Service Worker の使い方 - HTML5 Rocks レスポンシブイメージは低解像度のpngとwebpをキャッシュさせれば十分であろう。","categories":[],"tags":[]},{"title":"Webpack","slug":"Webpack","date":"2016-01-17T10:08:56.000Z","updated":"2018-05-13T10:09:42.480Z","comments":true,"path":"2016/01/17/Webpack.html","link":"","permalink":"https://log.plyrs.net/2016/01/17/Webpack.html","excerpt":"","text":"SPAを構築する際にはやはりWebpackの豊富な機能が生きる。 今作成しているWebアプリはUniversalでFluxでi18nなWebアプリとなっており、無計画にファイルを結合し続けると初期リロードの問題が出てくる。 3度の法則にしたがって開発過程でも適切なモジュール分割を容易に行うことができるのはWebpackの大きな強みだと感じた。 code splitting Lazy loaded entry points | React Webpack cookbook webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita CSSや画像はちょっと考えがあり、ローダーを使用していない。 RequireJS等はもう古い。WebPackとは？｜1 pixel｜サイバーエージェント公式クリエイターズブログ WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】 | 株式会社LIG","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"GrantからPassportへ","slug":"GrantからPassportへ","date":"2016-01-10T10:04:59.000Z","updated":"2018-05-13T10:08:19.107Z","comments":true,"path":"2016/01/10/GrantからPassportへ.html","link":"","permalink":"https://log.plyrs.net/2016/01/10/GrantからPassportへ.html","excerpt":"","text":"Oauth認証にGrantを使用していた。採用していた理由はどちらでも必要要件を満たせるし、ならばちょっと違ったものをという理由であった。 しかしKoa2.0へのアップデートを機にベタにPassportをラップしたkoa-passportへ入れ替えることにした。現状のGrantではKoa2.0へ対応させることができず、プルリクを出してもいいのだがkoa-passportの2.0への対応が非常に迅速であり、やはり広くコミュニティに受け入れられているモジュールを使用するほうが長い目で見ても良さそうだと感じたので。 また、Grantは単体で様々なサービスに対応しているが、Passportは個別で追加が必要となる。やはりこのほうが現代的なアプローチでメンテもしやすいであろう。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"Koa","slug":"Koa","permalink":"https://log.plyrs.net/tags/Koa/"}]},{"title":"Error: The `libsass` binding was not found","slug":"Error-Thelibsassbindingwasnotfound","date":"2016-01-07T10:03:20.000Z","updated":"2018-05-13T10:07:22.683Z","comments":true,"path":"2016/01/07/Error-Thelibsassbindingwasnotfound.html","link":"","permalink":"https://log.plyrs.net/2016/01/07/Error-Thelibsassbindingwasnotfound.html","excerpt":"","text":"GulpでSassのコンパイル実行時にエラーが出た。 1Error: The libsass binding was not found in /node_modules\\node-sass\\vendor\\win32-x64-47\\binding.node node-sass内を除いてみるとvendorフォルダが存在しない。解決策は下記issueで見つけた。 node 4.0.0 - Error: The libsass binding was not found in /node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-14/binding.node · Issue #1162 · sass/node-sass ‘npm rebuild node-sass` を実行するとモジュールが再構築され、vendorが配置された。 node-sassはちょくちょく問題を起こす。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"JavaScript ES Decorators","slug":"JavaScriptESDecorators","date":"2016-01-05T09:58:54.000Z","updated":"2018-05-16T16:55:29.753Z","comments":true,"path":"2016/01/05/JavaScriptESDecorators.html","link":"","permalink":"https://log.plyrs.net/2016/01/05/JavaScriptESDecorators.html","excerpt":"","text":"ちょっと最近よく見る、Decoratorsの仕様を確認中。 Decorators進捗 TypeScriptのDecoratorメモ - Qiita 上手に使えば、関数合成の可読性が高くなりそうだが、はてさて…。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"Vagrant 1.8","slug":"Vagrant1-8","date":"2015-12-29T09:55:42.000Z","updated":"2018-05-16T16:32:08.148Z","comments":true,"path":"2015/12/29/Vagrant1-8.html","link":"","permalink":"https://log.plyrs.net/2015/12/29/Vagrant1-8.html","excerpt":"","text":"スナップショットに惹かれてVagrantを1.8へアップデートした。 Vagrant 1.8 - HashiCorp Vagrant 1.8の新機能 Linked CloneとSnapshotを試してみた ｜ Developers.IO 環境はWindows 10。普通に最新のインストーラーを落とし実行し、滞りなく完了。 と思ったら、vagrant upしてもフォルダ同期が正常に機能しない…。 1234567891011Vagrant assumes that this means the command failed!chown `id -u vagrant`:`id -g vagrant` /vagrantStdout from the command:Stderr from the command:chown: changing ownership of ‘/vagrant’: Not a directory 同じことが昔あったような…。とりあえずISSUトラックを見てみるとすでに同様の問題は報告されており、VisualeBoxのバージョンを最新にしなさいとのこと。 Can not use share folders in Vagrant 1.8.0 and 1.8.1 · Issue #6732 · mitchellh/vagrant 確認すると5.0.8と少し古かったので、現時点で最新の5.0.12へ更新。すると今度こそ問題なく起動した。 現時点ではシンプルに開発環境として利用しているので、Linked Cloneの出番はないかもしれないが、スナップショットがデフォルトで組み込まれたのは有り難い。チャレンジングな実装を試しやすくなったと感じる。 vagrant snapshot - Command-Line Interface - Vagrant Documentation 1個しか使用しない場合は… 12345# スナップショット作成$ vagrant snapshot push# スナップショット復元$ vagrant snapshot pop 複数記録したい場合は… 1234567891011# スナップショット作成$ vagrant snapshot save <スナップショット名># スナップショット復元$ vagrant snapshot restore <スナップショット名># スナップショットの一覧$ vagrant snapshot list# スナップショット削除$ vagrant snapshot delete <スナップショット名> ottoもそのうち試してみたいが、Node環境だと海外記事でもあまり数を見かけないのでまだ様子見中。もうしばらくはVagrantさんのお世話になりそうである。","categories":[],"tags":[{"name":"Vagrant","slug":"Vagrant","permalink":"https://log.plyrs.net/tags/Vagrant/"}]},{"title":"fluxible","slug":"fluxible","date":"2015-12-28T09:51:07.000Z","updated":"2018-05-16T16:55:29.692Z","comments":true,"path":"2015/12/28/fluxible.html","link":"","permalink":"https://log.plyrs.net/2015/12/28/fluxible.html","excerpt":"","text":"fluxフレームワークは本当に色々ある…。色々あるが、その中でも開発の活気や完成度、情報量などで比較し米Yahooが開発しているfluxibleを導入した。 調査の際の参考文献は以下など。 Fluxible | A Pluggable Container for Isomorphic Flux Applications yahoo/fluxible fluxible-minimal-sample/src at master · srd7/fluxible-minimal-sample reactjs - Fluxible + React の概要をまとめた - Qiita srd7/fluxible-minimal-sample yahoo/fluxible関連 - Qiita Flux戦争の歴史 yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ Isomorphic Architecture を実装してるときの細かいアレコレ ::ハブろぐ 国内でも比較的大規模な案件でも使用されており、情報もそこそこ見つかる。この先なにがあるかはわからないが…、現時点では手堅い選択だと思う。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"},{"name":"React","slug":"React","permalink":"https://log.plyrs.net/tags/React/"}]},{"title":"New Relic","slug":"NewRelic","date":"2015-12-12T09:48:07.000Z","updated":"2018-05-13T09:50:42.318Z","comments":true,"path":"2015/12/12/NewRelic.html","link":"","permalink":"https://log.plyrs.net/2015/12/12/NewRelic.html","excerpt":"","text":"サーバーの監視やパフォーマンスチェックのため、New Relicの導入を開始した。 参考は以下の記事など。 New Relicでアプリケーションのパフォーマンス測定 ｜ Developers.IO newrelic - New Relic の各製品紹介: New Relic ってアプリケーションパフォーマンス監視ツールじゃないの？ - Qiita 連載：アプリケーションの運用監視：第1回 アプリの運用監視サービスとは？ New Relic vs. Application Insights (3/6) - ＠IT 個人で使用する分には無料でも十分だと感じた。また、Android向けアプリも提供されており、使い勝手も問題ない感じだ。","categories":[],"tags":[]},{"title":"n","slug":"n","date":"2015-12-11T09:47:02.000Z","updated":"2018-05-13T10:07:58.321Z","comments":true,"path":"2015/12/11/n.html","link":"","permalink":"https://log.plyrs.net/2015/12/11/n.html","excerpt":"","text":"プロダクション環境Node.jsのバージョン管理をnvmからnへ切り替えた。 tj/n 個人開発による実験の場でもあり、また頻繁なバージョンアップへもカジュアルに対応したいのであまりよくないだろうなぁと思いつつもnvm経由で管理を行っていた。 しかしCapistranoによる自動デプロイを実装するにあたってnvmを用いたNodeの操作は非常に面倒であったため、いい機会なのでnへ引っ越すことにした。 nvmの削除nvm の削除は普通にbash_profileから環境変数を削除し、ユーザーディレクトリから本体を丸ごと削除するだけである。 12345# 環境変数の削除$ vi ~/.bash_profile# nvm本体の削除$ rm -rf ~/.nvm How to uninstall nvm? · Issue #298 · creationix/nvmnのインストール まずNode本体をyum経由でインストールする。 1$ sudo yum install nodejs npm --enablerepo=epel これでNodeとnpmは入った。node は0.10.36、npm は1.3.6と、どちらもかなり古いバージョンなので、とりあえずnpmは先に最新にアップデートを行った。 1234$ sudo npm install npm -g$ npm -v3.3.12 別にそのままのバージョンでも問題はないかもしれないが、3系は大幅に改良がおこなわれているので上げれるときに上げておいた。次にnと、最新のNodeをインストールする。 12345$ sudo npm install n -g $ n latest$ node -vv5.2.0 これでv5.2のNodeがインストールされた。今後は開発ではnvm、本番ではnと使い分けていこうと思う。 参考文献 結局のところ node.js をサーバーにインストールするにはどうやればいいのか？ - もろず blog Node.jsとnpmをアップデートする方法 – Rriver Nodeの複数バージョン管理のお供にnをどうぞ","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Source Han Code JP 2.0","slug":"SourceHanCodeJP2-0","date":"2015-12-10T09:45:57.000Z","updated":"2018-05-13T09:46:42.967Z","comments":true,"path":"2015/12/10/SourceHanCodeJP2-0.html","link":"","permalink":"https://log.plyrs.net/2015/12/10/SourceHanCodeJP2-0.html","excerpt":"","text":"Source Han Code JPの2.0がリリースされていたので入れ替えた。 adobe-fonts/source-han-code-jp 僕の環境では相変わらずフォントの指定に癖があり、ウェイトの指定がMediumだと Source Han Code jp Medium 、Normalだと 源ノ角ゴシック Code JP N と入力しないと反映されない。この部分が修正されている期待をしたが、イシューも上がってないので気づいてないかも。","categories":[],"tags":[]},{"title":"Ruby on CentOS 7","slug":"RubyOnCentOS7","date":"2015-12-08T09:44:06.000Z","updated":"2018-05-13T09:45:30.651Z","comments":true,"path":"2015/12/08/RubyOnCentOS7.html","link":"","permalink":"https://log.plyrs.net/2015/12/08/RubyOnCentOS7.html","excerpt":"","text":"開発環境のCentOS7へRubyをインストールした。バージョンも管理したいのでrbenvを経由し、方法はいくつかあるようだが一番シンプルそうなルートを選択した。 rbenv/rbenv 事前に必要なモジュールをインストールする。 1$ sudo yum -y install git libffi libffi-dev gcc openssl-devel readline-devel zlib-devel rbenv、rbenv-buildのリポジトリをクローン。 12$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build rbenvのパスを通す。 1234$ echo 'export PATH=\"$HOME/.rbenv/bin:$PATH\"' >> ~/.bash_profile$ echo 'eval \"$(rbenv init -)\"' >> ~/.bash_profile$ exec $SHELL$ source ~/.bash_profile インストールできるRubyのバージョン一覧を取得。 1$ rbenv install -list 今回は最新安定板の2.2.3をインストール。 1$ rbenv install -v 2.2.3 rvenvを再読み込みしグローバルで使用するバージョンへ指定。 12$ rbenv rehash$ rbenv global 2.2.3 ruby -vでバージョンが表示されれば完了。 また、併せてbundlerも入れておく。 12$ gem install bundler$ bundle -v","categories":[],"tags":[]},{"title":"Capistrano","slug":"Capistrano","date":"2015-12-07T09:39:09.000Z","updated":"2018-05-13T09:42:48.005Z","comments":true,"path":"2015/12/07/Capistrano.html","link":"","permalink":"https://log.plyrs.net/2015/12/07/Capistrano.html","excerpt":"","text":"自動デプロイを実現するべく、Capistranoを試している。参考記事は以下など。 A remote server automation and deployment tool written in Ruby. 入門 Capistrano 3 ~ 全ての手作業を生まれる前に消し去りたい | GREE Engineers’ Blog 123$ gem install capistrano$ cap install npm用の拡張も容易されているので、こちらも合わせて確認していく。 capistrano/npm 1$ gem install capistrano-npm これがうまくいけば、デプロイ時の負荷が大幅に削減される。がんがん開発していくためにも、カジュアルにデプロイできる環境を作っていきたい。","categories":[],"tags":[]},{"title":"Bitbucket × Jenkins","slug":"Windows10×Bitbucket×Jenkins","date":"2015-12-06T07:56:25.000Z","updated":"2018-04-24T06:57:24.034Z","comments":true,"path":"2015/12/06/Windows10×Bitbucket×Jenkins.html","link":"","permalink":"https://log.plyrs.net/2015/12/06/Windows10×Bitbucket×Jenkins.html","excerpt":"","text":"個人開発用にローカルWindowsへJenkinsをインストールし、Bitbucketのプライベーソリポジトリへプッシュした内容を自動的にClで回してデプロイまでもっていきたい。 Clツールのためにサーバーを用意するほどではなく、課金してCircleCiするほどでもない案件。規模が大きくなるとどっかに移行したほうが楽かも。 Welcome to Jenkins CI! | Jenkins CI 公式。 JenkinsでCI環境構築チュートリアル (Windows編) - ICS MEDIA Windows7に、一人で使うためのJenkinsを入れてみた - メモ的な思考的な インストールからHelloWorldまでは上記が参考になった。 ユーザ作成を含む最低限のセキュリティ設定(Jenkins) - Qiita 基本的なセキュリティは、ちょっと古いようだが上記の流れで問題ない様子。 HOOK TURN • WindowsのJenkinsにssh証明書を設定してgitを利用する ユーザー認証。","categories":[],"tags":[{"name":"Jenkins","slug":"Jenkins","permalink":"https://log.plyrs.net/tags/Jenkins/"}]},{"title":"Default CSS","slug":"Default-CSS","date":"2015-12-04T07:36:04.000Z","updated":"2018-05-16T16:54:32.332Z","comments":true,"path":"2015/12/04/Default-CSS.html","link":"","permalink":"https://log.plyrs.net/2015/12/04/Default-CSS.html","excerpt":"","text":"なんとなく気になって主要ブラウザのデフォルトCSSを調べてみた。 IE Internet Explorer UA Style Sheets Firefox mozilla-central mozilla/layout/style/html.css mozilla-central: layout/style/html.css@85cf2e720a84 Chrome Source/core/css/html.css - chromium/blink - Git at Google Safari trunk/Source/WebCore/css の html.css – WebKit Edgeは見つけきれなかったなぁ。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"多言語化","slug":"多言語化","date":"2015-12-02T07:33:25.000Z","updated":"2018-05-16T16:55:29.753Z","comments":true,"path":"2015/12/02/多言語化.html","link":"","permalink":"https://log.plyrs.net/2015/12/02/多言語化.html","excerpt":"","text":"Webアプリを日本語の他に英語にも対応させることにした。 WEB+DB PRESS の78号でフロントエンド向けではあるが特集が組まれていたおり大いに参考になった。 WEB+DB PRESS Vol.78に「フロントエンドの国際化」について書いた！ - teppeis blog フロントエンドではi18n APIに期待したが、Safariが…。 globalization:specification_drafts [ES Wiki] Intl - JavaScript | MDN Can I use… Support tables for HTML5, CSS3, etc ライブラリ群では定番のMoment.jsも紹介されており、その後より広範囲なFormatJSが登場したりしているので、よく吟味したい。 Moment.js | Home FormatJS URLの設計をどうするかは未だ検討中だが、言語ごとに検索結果の最適化を行いたい場合はドメインを利用した手法がオススメなようだ。 How should I structure my URLs for both SEO and localization? - Webmasters Stack Exchange 多地域、多言語のサイト - Search Console ヘルプ Nodeではi18n向けライブラリが存在し、Koaでラップしたものも有志により作れれているので、この辺を使えば容易に行けそう。 mashpie/i18n-node koa-modules/i18n そして実装へサブドメインを使用したi18n化を実装した。 言語や地域の URL に hreflang を使用する - Search Console ヘルプ とりあえず検索エンジン向けにhreflangを記述した。HTTPヘッダーやサイトマップへ記す方法もあるようだが、今回はお手軽にhtmlへ直接書いた。 12<link rel=\"alternate\" hreflang=\"en\" href=\"https://dewy.me/\"><link rel=\"alternate\" hreflang=\"ja\" href=\"https://jp.dewy.me/\"> 片方ずつ置けばいいのかと思いきや、両方のページに両方置かなければならないらしい。今回は2言語なのでごちゃごちゃすることはないが、増えるようだったらサイトマップを試してみたい。 【node.js & express】国際化対応(i18n) « zoomAroid","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"Koa","slug":"Koa","permalink":"https://log.plyrs.net/tags/Koa/"}]},{"title":"SourceTree-1.6.24","slug":"SourceTree-1-6-24","date":"2015-12-01T07:31:39.000Z","updated":"2016-03-02T07:32:16.979Z","comments":true,"path":"2015/12/01/SourceTree-1-6-24.html","link":"","permalink":"https://log.plyrs.net/2015/12/01/SourceTree-1-6-24.html","excerpt":"","text":"SourceTree 1.6.24でBitbucketアカウントへのログインができない。 調べてみたらすでにヘルプへ上がっているので、そのうち修正されると思われる。どうやらWindows全般で起こっているようだ。 Password not working on SourceTree - Atlassian Answers 現時点での解決策は1.6.23へのダウングレードのようだが、一度アンインストールが必要でやや面倒なので様子を見ることにした。明日修正版が出なかったら実行することにする。","categories":[],"tags":[{"name":"SourceTree","slug":"SourceTree","permalink":"https://log.plyrs.net/tags/SourceTree/"}]},{"title":"Marker-Clusterer","slug":"Marker-Clusterer","date":"2015-11-29T12:30:15.000Z","updated":"2018-05-16T16:55:29.724Z","comments":true,"path":"2015/11/29/Marker-Clusterer.html","link":"","permalink":"https://log.plyrs.net/2015/11/29/Marker-Clusterer.html","excerpt":"","text":"Google mapsへMarker Clustererを導入した。 googlemaps/js-marker-clusterer ライブラリを追加し、下記ドキュメントとデモを見たら大体の仕様は分かった。 MarkerClusterer for Google Maps v3 version 1.0 Reference MarkerCluster for v3 Documentation: Examples 基本的にはGoogleMapオブジェクトとマーカーの配列をnew MarkerClusterer()へ突っ込めば作動する。 オプションを渡してクラスター化のタイミングなどを制御できるようだが、ドキュメントを探すのにちょっと苦労した。おそらくVer.1と同様のようなので、ここを参照した。 gridSize - クラスター範囲のサイズ。デフォルトは60で、小さくすると精度が上がり、大きくするとパフォーマンスが上がる。 maxZoom - クラスター監視に限度を設定できる。設定以下だとクラスター対象のマーカー群を無視する。 styles - クラスターのスタイルを設定できる。配列で大サイズから小への順番で。 大量のマーカーを配置するならユーザビリティ的に恩恵は大きいと思う。スマートフォンでもパフォーマンス上の問題は無さそう。 しかしマーカーが比較的密集していると、ズームレベル15では単独表示だったが、16へズームするとクラスター化されてしまうという不自然な挙動が見られた。恐らくクラスター化のグリッド計算アルゴリズムの仕様なのでしょうがないかも。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"Icon","slug":"Icon","date":"2015-11-27T11:25:48.000Z","updated":"2016-03-02T07:29:27.155Z","comments":true,"path":"2015/11/27/Icon.html","link":"","permalink":"https://log.plyrs.net/2015/11/27/Icon.html","excerpt":"","text":"ちょっとIconのデザインを考えてた。やはりガイドラインを参考にしたら、理詰めでいい感じできたりする。 Icons - Style - Google design guidelines iOS Human Interface Guidelines: Icons and Graphics ちょっと違うが、GoogleはUI向けマテリアルデザイン用のアイコン群を公開しているようで、Androidに特化する場合はここから使ってもよさそう。 https://www.google.com/design/icons/","categories":[],"tags":[{"name":"Design","slug":"Design","permalink":"https://log.plyrs.net/tags/Design/"}]},{"title":"Splash-Screens","slug":"Splash-Screens","date":"2015-11-26T07:19:33.000Z","updated":"2016-03-02T07:24:55.333Z","comments":true,"path":"2015/11/26/Splash-Screens.html","link":"","permalink":"https://log.plyrs.net/2015/11/26/Splash-Screens.html","excerpt":"","text":"仕様を見ているとスプラッシュイメージの項目があったので、manifest.jsonをアップデートしてみた。もちろん、現段階で対応しているブラウザは無い。しかし、Android版 Google Chromeはアイコンをスプラッシュイメージ的に出すようになっているので、今後この機能も有効化されるであろう。 123456789101112131415161718192021222324{ \"name\": \"Kinlan's Amazing Application ++\", \"short_name\": \"Kinlan's Amaze App\", \"icons\": [ { \"src\": \"launcher-icon-3x.png\", \"sizes\": \"144x144\", \"type\": \"image/png\" } ], \"splash_screens\": [{ \"src\": \"splash/lowres\", \"sizes\": \"320x240\" }, { \"src\": \"splash/hd_small\", \"sizes\": \"1334x750\" }, { \"src\": \"splash/hd_hi\", \"sizes\": \"1920x1080\", \"density\": 3 }], \"start_url\": \"index.html\", \"display\": \"standalone\"} ちなみに我らがFirefoxはOpen Web Appsなるものを提唱している。 Open Web Apps を始めよう – なぜ、そしてどのように | Mozilla Developer Street (modest) Application Cacheなど、現在では非推奨となっている手法の紹介も含まれているが、Open Web Appへの誘いとして分かりやすい記事。 Open Web Appをホスト型とパッケージ型の2つへ分類し、それぞれのメリデメリを紹介。 アプリマニフェスト - アプリセンター | MDN manifest.webappの詳細 Open Web Apps と Web 標準 | MDN アプリテンプレートの使用 - アプリセンター | MDN","categories":[],"tags":[{"name":"WebApp","slug":"WebApp","permalink":"https://log.plyrs.net/tags/WebApp/"}]},{"title":"Critical Path CSS#2","slug":"CriticalPathCSS-2","date":"2015-11-25T09:37:21.000Z","updated":"2018-05-16T16:54:32.248Z","comments":true,"path":"2015/11/25/CriticalPathCSS-2.html","link":"","permalink":"https://log.plyrs.net/2015/11/25/CriticalPathCSS-2.html","excerpt":"","text":"Dewy へクリティカルCSSの最適化を実装した。 色々と下調べを行っていたが、運用コストを図るには運用してみるのが一番だと感じとりあえず小さく始めてみることにした。 サイトはレンダリングにテンプレートエンジンを使用しているため、当初はpenthouseを使用しようと考えた。これはWebページをPhantomJSを用いて解析するもので、手元でレンダリングを実行する必要がなく導入が容易でサイコーだと感じた。 1234567891011penthouse({ url : 'https://dewy.me/', css : path.join(__dirname + '/public/css/main.css'), width : 320, height : 480, timeout: 30000}, (err, criticalCss) => { if (err) console.error(err); const clean = new cleanCSS().minify(criticalCss); fs.writeFile('views/inline/index.html', `<style>${clean.styles}</style>`);}); これでクリティカルCSSが記述されたhtmlが生成され、これをhead内でインポートしフルCSSは非同期で読み込む。PhantomJSが重いのか少し実行に時間はかかるが、問題なく作動した。しかし、内部モジュールのCSSパースの精度がよくないのか正確なクリティカルCSSを吐き出せておらず、ベタにcriticalを使うこととなった。 とりえず一度静的なhtmlへレンダリングを行い、それを解析。それ以外は上記と同じ流れとなる。 criticalの部分は… 123456789101112critical.generate({ base: 'public/', src: 'index.html', css: ['public/css/normalize.css', 'public/css/evil-icons.min.css', 'public/css/main.css'], width: 320, height: 480 }).then(output => { const clean = new cleanCSS().minify(output); fs.writeFile('views/inline/index.html', `<style type=\"text/css\">${clean.styles}</style>`); }).error(err => { console.error(err)}); こんな感じ。Promiseで書けるので多少複雑になっていっても視認性はよさそうだ。 PageSpeed Insightsの点は結構上がって気持ちがいいので、しばらくこれで運用して改善点と課題を洗い出したいと思う。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"Visual Studio Codeへ引っ越し","slug":"VisualStudioCodeへ引っ越し","date":"2015-11-21T09:35:14.000Z","updated":"2018-05-16T16:33:41.199Z","comments":true,"path":"2015/11/21/VisualStudioCodeへ引っ越し.html","link":"","permalink":"https://log.plyrs.net/2015/11/21/VisualStudioCodeへ引っ越し.html","excerpt":"","text":"今現在、開発にはBracketsを使っている。 前々からVisuale Studio Codeも触っていて、バージョンアップを繰り返すごとに目に見えて良くなっており魅力を感じていたものの、Editorconfigの未対応などがちょっと痛くて導入はできずにいた。 しかし今回のオープンソース化にあたって、早速Editorconfig拡張も有志により追加されたので引っ越しの準備を始めている。","categories":[],"tags":[]},{"title":"Metalsmith","slug":"Metalsmith","date":"2015-11-18T09:33:49.000Z","updated":"2018-05-16T16:33:54.986Z","comments":true,"path":"2015/11/18/Metalsmith.html","link":"","permalink":"https://log.plyrs.net/2015/11/18/Metalsmith.html","excerpt":"","text":"ブログではない、静的なサイトをビルドするにあたって、Metalsmithがよさげなので使ってみた。 Metalsmith 公式は上記。最近は勢いが乏しいらしく、現時点では非推奨のモジュールが公式のサンプルにで使われている。が、メンテは継続されているようだしエコシステムもほぼ仕上がっているようなので、通常導入する分には問題はなさそう。 static_site_generator - Metalsmith(静的サイトジェネレーター)の導入 - Qiita 上記記事を参考にとりあえずビルドまでもっていく。metalsmith-templatesは非推奨となり、metalsmith-layoutsとmetalsmith-in-placeへ分離したらしいが、今回は気にせず使用していく。テンプレートエンジンはNunjucksへ変えた。 また、metalsmith.jsonに設定を書いていくやりかたは個人的にあまり気持ちのいい方法ではないので、jsでビルドする方法を選択した。 12345678910111213141516'use strict';const Metalsmith = require('metalsmith');const collections = require('metalsmith-collections');const markdown = require('metalsmith-markdown');const permalinks = require('metalsmith-permalinks');const templates = require('metalsmith-templates');const metalsmith = new Metalsmith(__dirname) .use(collections({posts: {pattern: \"posts/*.md\"}})) .use(markdown()) .use(permalinks({pattern: ':title'})) .use(templates('nunjucks')) .build(err => { if (err) throw err;}); これだけで今回ほしい部分は大体動く。柔軟性が高いようなので、ブログでなければMetalsmithのほうが楽に作れると感じた。 Creating static sites with Metalsmith","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Hexo 3","slug":"Hexo3","date":"2015-11-15T09:32:06.000Z","updated":"2018-05-16T16:34:10.303Z","comments":true,"path":"2015/11/15/Hexo3.html","link":"","permalink":"https://log.plyrs.net/2015/11/15/Hexo3.html","excerpt":"","text":"このブログのリニューアルに伴い、Hexoのバージョンも3系へ上げた。 アップデートのやりかたは下記をこれを参考に。 Hexo 3.0 How_to_Update? 公式のアナウンスはこれ。 Hexo 3.0 Released | Hexo Breaking Changes in Hexo 3.0 · hexojs/hexo Wiki 詳しくは上記に載っているが、常用していたコアモジュールが外れたりコマンド周りが便利になったりと使用面でも幾分かの変化があった。 このブログはGithub Page上へ配置されておりデプロイでgitを利用するため、hexo-deployer-gitを用いるが、今回これもコアモジュールから外れたため別途インストールする必要があった。静的サイトジェネレーターを同様の手法で運用している人は多いと思うので、この点は変更は注意が必要かと思われる。 あとはコマンドの省略形が簡単に利用できるようになった。 1234567891011# ジェネレーター$ hexo g# 変更を監視$ hexo g --watch# ローカルサーバー起動$ hexo s# デプロイ$ hexo d 記事を書く以外に労力を使いたくないので、これは地味ながら便利である。 ブログ周りはライブドアから始まって、アメーバ、てぃーだ、Wordpressと色々渡ってきたが、Hexoでとりあえず落ち着いている。なのでこのまま順調な発展を願うものである。","categories":[],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://log.plyrs.net/tags/Hexo/"}]},{"title":"Noto Sans CJK","slug":"NotoSansCJK","date":"2015-11-14T09:30:29.000Z","updated":"2018-05-13T09:33:15.336Z","comments":true,"path":"2015/11/14/NotoSansCJK.html","link":"","permalink":"https://log.plyrs.net/2015/11/14/NotoSansCJK.html","excerpt":"","text":"今作成しているHEXOテーマにNoto Sans CJKの導入を試みている。 Noto Sans CJK – Google Noto Fonts 日本語など漢字を含む書体は容量の問題があるので、常用漢字にしぼったサブセット化を行ったほうがよさそう。 Noto SansをWeb font化しようとした時にハマった話 - Qiita font - Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順 - Qiita 上記記事にて丁寧に方法を解説しており、有り難いことにサブセット化したフォントデータを公開していたりもする。しかしサブセットの対象外としているJIS第2水準漢字をざっと眺めてみると、「おや、これも第2なの！？」と思う漢字も含まれている。(丼・罠・囮など、結構あった) JIS第2水準の漢字一覧表 しかし第2水準漢字は3000字弱定義されており、これをすべて含めるとそこそこの容量になってしまう。 どうしたものかと考えていたら、システムズ・インテリジェンス・プロダクツという業務用スキャンシステムなどを取り扱う企業の取り扱い商品の仕様書を見つけたので、こちらを参考にさせていただくことにした。 こちらは第一水準へ第二水準から選定した551字をを加えた3516字を対応漢字として定義している。僕一人があれやこれやと加えるより遥かに客観性があるであろう。","categories":[],"tags":[]},{"title":"AMP HTML","slug":"AMPHTML","date":"2015-11-11T09:28:26.000Z","updated":"2018-05-16T16:34:22.424Z","comments":true,"path":"2015/11/11/AMPHTML.html","link":"","permalink":"https://log.plyrs.net/2015/11/11/AMPHTML.html","excerpt":"","text":"AMP HTML、自分にはあまり関係ないやと思っていたのですが、ちょっと気が変わって触ってみた。 Accelerated Mobile Pages Project ampproject/amphtml 公式はこの辺。 AMP(Accelerated Mobile Pages) HTMLしてみたという話 | masuP.net 爆速モバイルWeb、AMPの仕組み抄訳 - ku-sukeのブログ 日本語での参考記事はこの辺。 ただかなりのスピードで開発が進められているので、ネット上の記事は参考にしつつも一次情報をしっかり確認したほうがよさげである。 恐らく最新の一次情報の発信地はGithubリポジトリであろうが、よく整理されており変更を追いやすく、それほど苦しくなかった。 エクステンション周りもどんどん増えており、個人的にかなり可能性を感じている。AutomatticはすでにWordpressがプラグインを開発し、公開しているし、モバイル対応の選択肢としてAMP HTMLの配信は一般化して行くのではないだろうか。","categories":[],"tags":[{"name":"AMP","slug":"AMP","permalink":"https://log.plyrs.net/tags/AMP/"}]},{"title":"NAS","slug":"NAS","date":"2015-11-09T09:24:19.000Z","updated":"2018-05-16T16:34:28.180Z","comments":true,"path":"2015/11/09/NAS.html","link":"","permalink":"https://log.plyrs.net/2015/11/09/NAS.html","excerpt":"","text":"メディアサーバーとして利用していたLS-WVLがネットワーク上から消えた。 BUFFALO製のNASが動かなくなったのでPC経由でファームウェアを再インストールした とりあえず上記記事を参考にフォームウェアの更新を行うと表示は戻ったが、どうやらHDDの一つが故障したもよう。RAID1で運用していたのでデータはもう一つのHDDで生きているが、そちらも止まったら終わりなので早急に交換を行うべく行動を開始した。 交換用のHDDはメカー純正品がベターだとは思うが、Amazonで評判のいいWD10EFRXを試してみようと思う。価格は半分以下だ。 デグレードモードI12のLinkStationのHDDを交換 – 2.RAIDの再構成 | ネットワーク型HDD（NAS）のデータ復旧 | データ復旧のパソコンサポートやまもと ここを参考に行えば上手くいくだろう。 今後は合わせてUSB接続を利用し定期的な自動バックアップを行おうと思う。音楽データや写真が結構膨大な数になるので、可能なリスク回避は行うべきかなと。 NASを導入した5年がたつが近年は色々と群雄割拠宇なようなので、そのうち他のメーカーのものも試してみたいと思う。","categories":[],"tags":[{"name":"NAS","slug":"NAS","permalink":"https://log.plyrs.net/tags/NAS/"}]},{"title":"Google OAuth","slug":"Google-OAuth","date":"2015-11-06T13:39:20.000Z","updated":"2016-03-21T13:41:25.485Z","comments":true,"path":"2015/11/06/Google-OAuth.html","link":"","permalink":"https://log.plyrs.net/2015/11/06/Google-OAuth.html","excerpt":"","text":"DewyへGoogleアカウントによるログイン機能を実装した。これまで通りsimov/grantを利用したので、基本的に流れはFacebookやTwitterのときと同じであった。 Google OAuth 2.0 を使い、Web アプリケーションに認証機能を追加する - komiyakの通り道 アクセストークンの取得などには上記記事が参考になった。記事が少し古く、現在のUIとやや違う部分はあったが、問題はなかった。また、Twitterと比べ項目が多く、Facebookと違ってしっかり日本語で表示れてるので色々見ていて楽しい。今回はGoogle+のAPIを触るのみでありが、機会があれば他にも試してみたくなる。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"dialog-element","slug":"dialog-element","date":"2015-11-06T08:32:20.000Z","updated":"2016-03-02T08:39:21.543Z","comments":true,"path":"2015/11/06/dialog-element.html","link":"","permalink":"https://log.plyrs.net/2015/11/06/dialog-element.html","excerpt":"","text":"ダイアログを作っているので、今Dialogエレメントってどうなっているのか調べてみた。 Can I use… Support tables for HTML5, CSS3, etc 相変わらずblink系のみの対応である。 Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に | WWW WATCH the new code – Native Modal Windows in HTML5: Using the dialog Element dialog element demo 具体的な実装方法は上記記事などが参考になり、その利便性もよくわかる。 GoogleChrome/dialog-polyfill: Polyfill for the dialog element ポリフィルもChromeチーム自ら提供している。 が、やはりせめてもう一つぐらい対応ブラウザが増えないと一生ポリフィルを抜け出せない不安が残る。現時点での実践投入はまだ早いかと。","categories":[],"tags":[{"name":"HTML","slug":"HTML","permalink":"https://log.plyrs.net/tags/HTML/"}]},{"title":"Push通知","slug":"Push通知","date":"2015-11-02T12:27:39.000Z","updated":"2018-05-16T16:55:29.759Z","comments":true,"path":"2015/11/02/Push通知.html","link":"","permalink":"https://log.plyrs.net/2015/11/02/Push通知.html","excerpt":"","text":"最近ブラウザにもPush通知の足音が聞こえ始めている。なので基礎学習は始めておきたい。 Service WorkerでブラウザにPush通知をする - 1000ch.net ChromeでW3C Push APIを使ってみた - Qiita エッジな方々は既に検証を開始している様子。ここはやはりFirefoxでも試したい。 HTML5 - Firefox (Developer Edition)でW3C Push APIを使ってみる - Qiita Firefoxの実装もかなり進んでいるようで、期待大。問題はモバイルFirefoxの普及だろう。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"gulp-progeny","slug":"gulp-progeny","date":"2015-10-31T12:17:26.000Z","updated":"2016-03-02T08:26:24.192Z","comments":true,"path":"2015/10/31/gulp-progeny.html","link":"","permalink":"https://log.plyrs.net/2015/10/31/gulp-progeny.html","excerpt":"","text":"SassをGulp経由でWathする際に、差分ビルドを有効にするためgulp-cachedをかますのだが、そうすると@importなどで読み込んでいるファイルを更新しても読み込み元のビルドは動作しない。 これを上手く解決する方法はないかと調べたら以下の記事を見つけた。 gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita なるほど！依存元を辿り解決を図ればいいとのこと。 これに特化したgulpモジュールがあると楽チンやんーと再調査を行うと、gulp-progenyなるものを発見。 HerringtonDarkholme/gulp-progeny まさに依存関係を解決してくれるよう。 12345678910const cache = require('gulp-cached');const progeny = require('gulp-progeny');const sass = require('gulp-sass');gulp.task('sass', () => { return gulp.src('*.scss') .pipe(cache('style')) .pipe(progeny()) .pipe(sass())}); これでSass内でインポートしているファイルの更新も監視対象となり、ビルドが走るようになった。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Critical-Path-CSS","slug":"Critical-Path-CSS","date":"2015-10-31T07:12:22.000Z","updated":"2018-05-16T16:54:32.333Z","comments":true,"path":"2015/10/31/Critical-Path-CSS.html","link":"","permalink":"https://log.plyrs.net/2015/10/31/Critical-Path-CSS.html","excerpt":"","text":"ちらほらと名前を聞くようになってきたので、基礎学習を始めた。 そろそろクリティカルCSSについて説明しておこうか | Yuhiisk Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL Understanding Critical CSS – Smashing Magazine 記事は詳しく解説したものが見つかり、大変参考になった。 ツールでは有名なものでaddyosmaniが作ったcriticalが定番っぽい。 addyosmani/critical addyosmani/critical-path-css-demo penthouseはオンラインデモもあり、ちょっと試すにはいいかも。 pocketjoso/penthouse: Critical Path CSS Generator Critical Path CSS Generator - by Jonas Ohlsson またちょっと古いがワザノバさんの下記記事はパフォーマンスツールを網羅的に紹介しており、見てて面白い。 CSSパフォーマンスツールを使いこなす - ワザノバ | wazanova","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"VanillaなDropdown","slug":"VanillaなDropdown","date":"2015-10-30T07:08:49.000Z","updated":"2018-05-16T16:55:29.692Z","comments":true,"path":"2015/10/30/VanillaなDropdown.html","link":"","permalink":"https://log.plyrs.net/2015/10/30/VanillaなDropdown.html","excerpt":"","text":"バニラなドロップダウンメニューを作成中。まぁ単純にクラスの追加・削除を制御すればいいのだが、一応参考資料を探す。がやはり、jQueryを用いたものは多数見つかるのに対し、バニラは希少である。 今回参考になったのは以下の二つ。 Javascript Drop Down Menu CodePen - A Pen by Brenden Palmer 表示の制御はCSSで行い、アクティブ時のオーバービューエフェクトは無し。メニュー外のクリックの際に閉じるようdocumentにもイベントを追加。あとは最適なアニメーションを考慮すればよさそう。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"Github-Flow","slug":"Github-Flow","date":"2015-10-29T10:06:19.000Z","updated":"2016-03-02T07:08:07.188Z","comments":true,"path":"2015/10/29/Github-Flow.html","link":"","permalink":"https://log.plyrs.net/2015/10/29/Github-Flow.html","excerpt":"","text":"現状Gitを用いたバージョン管理にはSourceTreeを利用しており、惰性でGit Flowで運用を行っていた。が、コードの規模を考えるとやはりGithub Flowで十分だとは感じており、乗り換えのタイミングを模索し、今日に至る。 思案もう少し様子を見てエディタをBracketsからVisualeStudio Codeへ乗り換えることを考えており、そのタイミングにはスムーズに開発flowも移行したいと思う。 資料 GitHub Flow (Japanese translation) 上記翻訳を精読したらほぼ大丈夫そう。 Github-flowを分かりやすく図解してみた - pyar.bz これも分かりやすい。","categories":[],"tags":[{"name":"Git","slug":"Git","permalink":"https://log.plyrs.net/tags/Git/"}]},{"title":"Comit in English","slug":"Comit-in-English","date":"2015-10-29T07:04:04.000Z","updated":"2016-03-02T07:06:36.020Z","comments":true,"path":"2015/10/29/Comit-in-English.html","link":"","permalink":"https://log.plyrs.net/2015/10/29/Comit-in-English.html","excerpt":"","text":"英語でコミットメッセージを書く時のカンペを作成したい。 参考記事はググれば色々出てくる。 ネイティブと働いて分かった英語コミットメッセージの頻出動詞10つ - Qiita Git - 英語コミットコメントに使えるオシャレフレーズ集 - Qiita ChangeLog を支える英語 azu/awesome-commit-english git commit時のコメントを英語で書くための最初の一歩 | hiro345 こんなサービスも発見。 commit-m: GitHubコミットメッセージの文例が検索できるサービス","categories":[],"tags":[{"name":"Git","slug":"Git","permalink":"https://log.plyrs.net/tags/Git/"}]},{"title":"SNS Feeds","slug":"SNS-Feeds","date":"2015-10-23T07:00:28.000Z","updated":"2016-03-02T07:02:12.525Z","comments":true,"path":"2015/10/23/SNS-Feeds.html","link":"","permalink":"https://log.plyrs.net/2015/10/23/SNS-Feeds.html","excerpt":"","text":"複数のSNSアカウントの投稿を一つにまとめて表示する機能を実装したい。まずAPIをたたいてフィードを引っ張て来る仕事をクライアントにさせるかサーバーサイドで頑張るか考えた。 クライアントで行うと既存のjQueryライブラリの恩恵などを受けられ、導入のハードルと労力は低そうである。サーバーサイドで行うとブラウザに頼らない形で実装できる部分が増えるので、万人に同様の体験を提供できそうである。レンダリングもサーバーで行えばSNSアカウントへ投稿することでサイトの更新とみなされ、インデックスもされやすいかも。 今回は調査の過程で下記のプラグインを発見したので、とりあえずクライアントで実装してみることにした。 pavelk2/social-feed 今回結び付けたいSNSは以下の3つ。 Facebook Twitter instagram 条件にあてはまるうえ、現在進行形でメンテされているようで安心して導入できそうである。","categories":[],"tags":[]},{"title":"Timezone","slug":"Timezone","date":"2015-10-19T10:56:41.000Z","updated":"2016-03-02T06:58:53.375Z","comments":true,"path":"2015/10/19/Timezone.html","link":"","permalink":"https://log.plyrs.net/2015/10/19/Timezone.html","excerpt":"","text":"なぜかgetHoursが正確に取得できないと思っていたら、開発環境であるVagrant内CentOSのタイムゾーンがずれていた。以下ContOS7での設定方法。 12345# 日付を確認$ timedatectl # タイムゾーンを設定$ timedatectl set-timezone Asia/Tokyo 環境構築の際に適切に設定が必要なので、Ansibleへ盛り込みたい。 ついでにローケルも設定した。 123$ localectl set-locale LANG=ja_JP.eucjp$ localectl status$ source /etc/locale.conf","categories":[],"tags":[{"name":"CentOS","slug":"CentOS","permalink":"https://log.plyrs.net/tags/CentOS/"}]},{"title":"脱 jQuery","slug":"脱-jQuery","date":"2015-10-14T11:54:51.000Z","updated":"2018-05-16T16:55:29.692Z","comments":true,"path":"2015/10/14/脱-jQuery.html","link":"","permalink":"https://log.plyrs.net/2015/10/14/脱-jQuery.html","excerpt":"","text":"jQueryは有害なのか | プログラミング | POSTD 上記記事を読んだ。最近は僕もjQueryをほとんど使っていなくて、共感できる部分は多かった。しかしそれは個人開発の場の話で、チームでの開発で複数人でJavaScriptを触る場合は、ｊQueryを採用することである程度、秩序ができる利点はあると思う。完全なる脱jQueryのためには、完璧なる規約とリンターの整備が必要かも。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"Microdata","slug":"microdata","date":"2015-10-14T10:54:30.000Z","updated":"2016-03-02T06:55:29.491Z","comments":true,"path":"2015/10/14/microdata.html","link":"","permalink":"https://log.plyrs.net/2015/10/14/microdata.html","excerpt":"","text":"Webアクセシビリティは他の要素と比べて後回しにされがちである。しかし、マルチデバイス化が進みつづける中ではとても重要な機能だろう。 Webサイトをマークアップを通じて構造化する手法として、以下のものがある。 Microformats Microdata RDFa Microdata サーチエンジンの導入状況や仕様を鑑みると、現時点ではMircodataを導入するのがよさそうだ。一方、JSON-LDは将来有望な大型新人なので、段階的な移行は考慮したい。 Home - schema.org Microdata、RDFs、Microdataを促進するschema.orgの公式サイトはこちら。概要や導入方法、ドキュメントがまとめられている。 構造化データ マークアップ支援ツール Structured Data Testing Tool | Google Developers Googleは既に検索結果へスキーマを反映している。いくつか導入支援ツールも公開されているので、活用したい。 Microdataなどの構造化データ マークアップについて｜Web Design KOJIKA17 上記記事は概要や実践例をわかりやすくまとめており、参考になった。","categories":[],"tags":[{"name":"Microdata","slug":"Microdata","permalink":"https://log.plyrs.net/tags/Microdata/"}]},{"title":"Firefox Add-on","slug":"Firefox-Add-on","date":"2015-10-10T12:42:26.000Z","updated":"2016-02-28T16:47:08.400Z","comments":true,"path":"2015/10/10/Firefox-Add-on.html","link":"","permalink":"https://log.plyrs.net/2015/10/10/Firefox-Add-on.html","excerpt":"","text":"ちょっとFirefox拡張書く欲が出てきているので、ちょっとだけ資料を集めた。 初めてでも理解できるようになる「Firefox機能拡張の開発」 | OXY NOTES mozilla-jetpack/jpm 現時点でのモダンな書き方なら上記を参考に行えばよさそう。しかし近未来のうちにWebExtensionsへの移行が計画されているので、いざ書くとなると下記リポジトリやクローム周りの情報を漁っていくことになりそう。 mdn/webextensions-examples","categories":[],"tags":[{"name":"Firefox","slug":"Firefox","permalink":"https://log.plyrs.net/tags/Firefox/"}]},{"title":"sitemap.xml","slug":"sitemap-xml","date":"2015-10-07T11:40:14.000Z","updated":"2016-02-28T16:41:14.022Z","comments":true,"path":"2015/10/07/sitemap-xml.html","link":"","permalink":"https://log.plyrs.net/2015/10/07/sitemap-xml.html","excerpt":"","text":"グーグルに正しくインデックスしてもらうため、作成したNodeアプリケーションへsitemap.xmlを追加したい。清く正しくsitemap.xmlを理解するなら以下を参照。 sitemaps.org - ホーム サイトマップについて - Search Console ヘルプ 普段は以下のオンラインジェネレーターを利用し配備していた。 Create your Google Sitemap Online - XML Sitemaps Generator これを利用すれば静的コンテンツは自動的にクロールをし追加してくれるが、動的に追加されるコンテンツはそのたびに作成しなおさなければならないため難儀である。そこでsitemap.jsを利用しアプリ内でリクエストがあったさいに動的にxmlを作成し発行する仕組みを作った。 ekalinin/sitemap.js ExapmpeにExpressでの使用例が書かれており、Koaでもほぼそのまま流用できた。Promiseでラップし、Yiedableにすればほぼ完了である。 あとはDBへアクセスしヒットしたコンテンツをsitemap.xmlへ追加すれば完了である。","categories":[],"tags":[]},{"title":"Update @font-face","slug":"Update-font-face","date":"2015-10-06T11:34:51.000Z","updated":"2018-05-16T16:54:32.296Z","comments":true,"path":"2015/10/06/Update-font-face.html","link":"","permalink":"https://log.plyrs.net/2015/10/06/Update-font-face.html","excerpt":"","text":"cssの@font-faceのフォーマットをアップデートした。 これまではFontspring @Font-Face Syntaxに従い以下のように記述していた。 12345678@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff2') format('woff2'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg');} 対応ブラウザは以下とされている。 IE Firefox Chrome Safari Opera iOS Android 6+ 3.5+ 3.5+ 3+ 11+ 3.2+ 2.2+ この書式はは2011年に提唱されたもので、2015年ゲイン材のブラウザ情勢からみるとやや冗長に感じる。 よって下記を参考に今回アップデートを図った。 Using @font-face | CSS-Tricks 123456@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.woff2') format('woff2'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype');} eotとsvgを削除した。この変更後の対応ブラウザは以下である。 IE Firefox Chrome Safari Opera iOS Android 9+ 3.5+ 3.5+ 3+ 10.1+ 4.3+ 2.2+ IE9からはWoffに対応しているので、もう少し時間がたてばTTFも消せるのでは。Woff2の普及はまだまだこれからといったところだ。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"CSS font-familyをアップデート","slug":"CSS-font-familyをアップデート","date":"2015-10-05T16:38:22.000Z","updated":"2018-05-16T16:54:32.248Z","comments":true,"path":"2015/10/06/CSS-font-familyをアップデート.html","link":"","permalink":"https://log.plyrs.net/2015/10/06/CSS-font-familyをアップデート.html","excerpt":"","text":"CSS font-familyの記述をアップデートした。 これまでは以下のように指定していた。 123body { font-family: Verdana, Arial, \"ヒラギノ角ゴ ProN\", \"Hiragino Kaku Gothic ProN\", \"メイリオ\", Meiryo, \"ＭＳ Ｐゴシック\", sans-serif;} 昔どこかで見た記事やソースを参考にたどり着いたと記憶しているが、Windows10へ移行したこともありフォント回りも同様に更新していこうと思う。 Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ 上記記事は非常によく考察されており信頼たる内容だと感じたので、これをベースに以下のように設定した。 123body { font-family: Avenir, \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, Verdana, Roboto, \"游ゴシック\", \"Yu Gothic\", \"游ゴシック体\", \"YuGothic\", \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"Meiryo UI\", \"メイリオ\", Meiryo, sans-serif;} MSPゴシックだけはさすがに不要だと思い外させていただいた。とりあえずこれで様子を見ていこうと思う。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"wysiwyg","slug":"wysiwyg","date":"2015-10-03T12:25:37.000Z","updated":"2018-05-16T16:55:29.692Z","comments":true,"path":"2015/10/03/wysiwyg.html","link":"","permalink":"https://log.plyrs.net/2015/10/03/wysiwyg.html","excerpt":"","text":"Webアプリ内にてwysiwygを導入したい。 Javascript WYSIWYG editors · cheeaun/mooeditable Wiki 上記リストがよくまとまっており、大いに参考なった。今回jQuery先生は極力使いたくないので、最初である程度候補は絞られる。 とりあえずその中からwysiwyg.jsを試してみる方針。オンラインデモを触っている分にはいい感じで、ドキュメントもそこそこ整理されていて扱いやすそう。","categories":[],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://log.plyrs.net/tags/JavaScript/"}]},{"title":"SoyCMSをConohaへ","slug":"SoyCMSをConohaへ","date":"2015-09-30T11:23:07.000Z","updated":"2018-05-16T16:55:44.509Z","comments":true,"path":"2015/09/30/SoyCMSをConohaへ.html","link":"","permalink":"https://log.plyrs.net/2015/09/30/SoyCMSをConohaへ.html","excerpt":"","text":"壊滅状態のNAUTILUSのサイトをそろそろ復活させるべく、重い腰を上げた。 当時ロリポップで運用していたのだが、インフラにこだわりはじめサーバー引っ越しを繰り返す中でいつしかトップページ以外開かないといった状態へと変貌を遂げた。というのもXserverへの引っ越しはスムーズに行ったものの、その後のVPSへの移行はハマリどことが多く、面倒になってしまったのだ。 今回復活にあたって参考になったペーシ一覧。 SOY CMS 公式サイト SOY CMS インストール - KAGOYA Internet Routing SOY CMS フォーラム • トピックの表示 - ミニム レンタルサーバー動作検証しました SOY CMS フォーラム • トピックの表示 - 他サイトラベルブロックについて パーミッションの設定と、一部のPHPモジュールのインストールで現状問題なく動作している様子。 そもそもこのサイトのためだけにApacheとPHPインストールするのもな～と思い、いっそ内部をNodeで書き換えようかとも思ったが、改めて見てみると記事の量も結構多いからそれはそれで遠回りになりそう。","categories":[],"tags":[{"name":"SoyCMS","slug":"SoyCMS","permalink":"https://log.plyrs.net/tags/SoyCMS/"},{"name":"Conoha","slug":"Conoha","permalink":"https://log.plyrs.net/tags/Conoha/"}]},{"title":"MongoDB $unset","slug":"MongoDB-unset","date":"2015-09-28T11:20:49.000Z","updated":"2016-02-28T16:21:37.551Z","comments":true,"path":"2015/09/28/MongoDB-unset.html","link":"","permalink":"https://log.plyrs.net/2015/09/28/MongoDB-unset.html","excerpt":"","text":"MongoDBで特定のドキュメントの特定のフィールドを削除するには$unsetを使えばスマートらしい。 $unset — MongoDB Manual 3.0 これはMongoDB2からの機能で、それ以前はundefinedやnullを入れて対応していたらしい。 1User.collection.update({_id: user._id}, {field: undefined}); 昔はこうだったのが… 1User.collection.update({_id: user._id}, {$unset: {field: 1 }}); こうらしい。","categories":[],"tags":[{"name":"MongoDB","slug":"MongoDB","permalink":"https://log.plyrs.net/tags/MongoDB/"}]},{"title":"Nunjucks","slug":"Nunjucks","date":"2015-09-26T16:16:32.000Z","updated":"2016-03-02T08:08:39.025Z","comments":true,"path":"2015/09/27/Nunjucks.html","link":"","permalink":"https://log.plyrs.net/2015/09/27/Nunjucks.html","excerpt":"","text":"愛用していたテンプレートエンジンであるSwigが残念ながら開発終了となっていたので、Nunjucksへ引っ越しをした。 Nunjucks これはSwigの作者が代替として推薦しているMozillaのプロジェクトで、構文が類似しており乗り換えも用意であった。 12345678910111213{% extends \"base.html\" %}{% block header %} <h1>{{ title }}</h1>{% endblock %}{% block content %} <ul> {% for name, item in items %} <li>{{ name }}: {{ item }}</li> {% endfor %} </ul>{% endblock %} Swigと比較してドキュメントも見やすく、機能も充実、パフォーマンスも良好である。Swigはif条件式を埋め込む際に何故かelseをサポートしておらず、やや冗長な記述を強いられていたが、Nunjucksは当然対応しており見渡しが良くなった。 Jijja2というPythonのテンプレートエンジンの影響を受けているらしく、ドキュメントもちょくちょくJinja2のドキュメントに飛ばされたり、issueを眺めていてもJinja2の機能を基準に実装を決めている節があり、謎のJinja愛がほほえましかった。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Koaでファイルアップローダー","slug":"Koaでファイルアップローダー","date":"2015-09-24T15:59:32.000Z","updated":"2016-03-02T08:09:16.339Z","comments":true,"path":"2015/09/25/Koaでファイルアップローダー.html","link":"","permalink":"https://log.plyrs.net/2015/09/25/Koaでファイルアップローダー.html","excerpt":"","text":"Koaアプリケーションにファイルアップローダーを実装した。 cojs/busboy モジュールは例によってbusboyをcoでラップしたco-busboyを使用。 アップローダーはなかなか奥が深くて面白そうなので、機会があったら他のモジュールも試してみたい。去年のNode学園祭でGuillermoが紹介していたPartyは何処へいったんだろう…。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"Koa","slug":"Koa","permalink":"https://log.plyrs.net/tags/Koa/"}]},{"title":"Firefox リモートデバッグを導入","slug":"Firefoxリモートデバッグを導入","date":"2015-09-23T15:53:06.000Z","updated":"2016-02-28T15:57:27.170Z","comments":true,"path":"2015/09/24/Firefoxリモートデバッグを導入.html","link":"","permalink":"https://log.plyrs.net/2015/09/24/Firefoxリモートデバッグを導入.html","excerpt":"","text":"スマホサイトのデバッグ環境を本格的に整備しようと思い、とりあえず愛用のFirefoxによるリモートデバッグを導入。 WebIDE による Android 版 Firefox のデバッグ - 開発ツール | MDN 今回はUSBで接続したAndroid版Firefoxでデバッグを試した。ここまでは容易に完了できたが、Wifi経由でやろうとすると色々面倒くさそうかな。","categories":[],"tags":[{"name":"Firefox","slug":"Firefox","permalink":"https://log.plyrs.net/tags/Firefox/"}]},{"title":"npm ローカルモジュール問題","slug":"npmローカルモジュール問題","date":"2015-09-22T15:50:12.000Z","updated":"2016-03-02T08:09:21.508Z","comments":true,"path":"2015/09/23/npmローカルモジュール問題.html","link":"","permalink":"https://log.plyrs.net/2015/09/23/npmローカルモジュール問題.html","excerpt":"","text":"これまでの手法その時何を思ってこの方法を採用したのかは忘れてしまったが、今まではグローバル変数を用いて解決していた。 Better local require() paths for Node.js 上記のGistでのパターン2である。 123global.__base = __dirname + '/';var Article = require(__base + 'app/models/article'); 再考そーいえばnpmにこの問題を解決する機能が導入されてたっけ、と思い試してみる。 npm 2.0.0でローカルモジュールを使ってrequire(‘../../../‘)を回避する | Web Scratch しかしこの方法、ちょろっとした機能を追加するには大げさすぎて難儀に感じる。僕の使い方ではデメリットのほうが勝る気が…。 他の手法を調べてみてもなかなかしっくりこない。改めて難しい問題だと感じる。 結果これまでの方法をテンプレートリテラルで書き直して使い続ける結論に至った。 123global.__base = __dirname + '/';const Article = require(`${__base}app/models/article`); いつの日か光あれ！","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"npm","slug":"npm","permalink":"https://log.plyrs.net/tags/npm/"}]},{"title":"nl2br","slug":"nl2br","date":"2015-09-22T15:47:37.000Z","updated":"2016-03-02T08:09:05.314Z","comments":true,"path":"2015/09/23/nl2br.html","link":"","permalink":"https://log.plyrs.net/2015/09/23/nl2br.html","excerpt":"","text":"PHPのnl2brのような関数がほしい。 こーゆー機能はテンプレートエンジンに搭載されていてそうだけど、愛用しているSwigにはないみたい。 paularmstrong/swig-extras 拡張はみつかった。 JavaScript nl2br function - php.js 改行コードの返還だけが目的ならここを参考にちっちゃいライブラリを作ったほうがよさそう。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"NPM3 導入してみた","slug":"NPM3導入してみた","date":"2015-09-20T15:44:44.000Z","updated":"2016-03-02T08:09:27.012Z","comments":true,"path":"2015/09/21/NPM3導入してみた.html","link":"","permalink":"https://log.plyrs.net/2015/09/21/NPM3導入してみた.html","excerpt":"","text":"メジャーリリースされたとのことで、NPMをv3へアップデート。 1$ npm i -g npm とりあえずモジュールのインストールを再実行してみた。 フラット化の結果25のモジュールインストールに対して300個がnode_modules内に召還された。時間もなんか長かったな…。この辺は徐々に高速化されていくのだろうか。間違ってもpackege.json管轄外でインスコしないように気を付けなければ、不幸な孤児が生まれそうである。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"npm","slug":"npm","permalink":"https://log.plyrs.net/tags/npm/"}]},{"title":"知っておくといいNode.jsの７つの事","slug":"知っておくといいNode-jsの７つの事","date":"2015-09-18T15:20:15.000Z","updated":"2016-02-28T15:43:48.875Z","comments":true,"path":"2015/09/19/知っておくといいNode-jsの７つの事.html","link":"","permalink":"https://log.plyrs.net/2015/09/19/知っておくといいNode-jsの７つの事.html","excerpt":"","text":"読んだ。 My 7 Node.js mantras — Medium Promise使え！ ES6、いいよ！ セマンティックバージョンには気を付けろ！ 使っているモジュールを読み解け！ ユニットテスト書こう！ 俺たちはV8と共に生きている！ ESLint使おうぜ！ ってことでしょうか。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Yamlを学ぶ","slug":"Yamlを学ぶ","date":"2015-09-18T12:39:58.000Z","updated":"2016-03-02T08:09:37.716Z","comments":true,"path":"2015/09/18/Yamlを学ぶ.html","link":"","permalink":"https://log.plyrs.net/2015/09/18/Yamlを学ぶ.html","excerpt":"","text":"AnsibleのPlaybookはYamlで書かなければならない。見よう見まねで動くコードは結構書けるが、インフラにかかわる技術なのできちんと学んだほうがよいだろう。 The Official YAML Web Site YAML - Wikipedia こういうときにWikipediaで概要をさくっと理解するのは効率がいいと思った。 ansible使いのためのYAML入門 - @znz blog とりあえずAnsible用途限定で学ぶならここで Rubyist Magazine - プログラマーのための YAML 入門 (初級編) 本格的にアプリケーションへ導入したいのであればここかと。 少し触ってみた感触ではXMLよりは簡潔に書けて、JSONよりは設定ファイルに向いていそう。コメントも書ける。","categories":[],"tags":[{"name":"Ansible","slug":"Ansible","permalink":"https://log.plyrs.net/tags/Ansible/"}]},{"title":"Ansible","slug":"Ansible","date":"2015-09-18T11:35:34.000Z","updated":"2016-02-28T15:38:54.652Z","comments":true,"path":"2015/09/18/Ansible.html","link":"","permalink":"https://log.plyrs.net/2015/09/18/Ansible.html","excerpt":"","text":"Vagrant上への開発環境の構築をAnsibleを利用したい。 Ansible is Simple IT Automation Ansible Documentation 公式とドキュメント。 Ansible 入門 - Qiita エージェントレスでシンプルな構成管理ツール「Ansible」入門 - さくらのナレッジ このへんに目を通せばだいたい使えそう。ドットインストールのAnsible入門は有料化しちゃったのね…。 冪等性は英語でidempotenceということを学んだ。 WindowsでVagrantとAnsibleを使ってみた話 | もやし工房 ansibleでnvmを管理する - Qiita leonidas/ansible-nvm Vagrant+Ansible+git-hooks+foreverでNodejsの開発環境作った話 Ansible の Playbook を使ってみる - akishin999の日記 この辺を参考にするとWindowsやNode.jsをからめたAnsile導入はだいたいできそうかと。","categories":[],"tags":[{"name":"Vagrant","slug":"Vagrant","permalink":"https://log.plyrs.net/tags/Vagrant/"},{"name":"Ansible","slug":"Ansible","permalink":"https://log.plyrs.net/tags/Ansible/"}]},{"title":"位置情報の文字列化","slug":"位置情報の文字列化","date":"2015-09-17T15:20:56.000Z","updated":"2016-02-28T15:32:52.153Z","comments":true,"path":"2015/09/18/位置情報の文字列化.html","link":"","permalink":"https://log.plyrs.net/2015/09/18/位置情報の文字列化.html","excerpt":"","text":"取得した位置情報を文字列化し、URLやデータベースで利用したい。 主な選択肢は下記３つ GeoHash GeoHex plus+codes 現時点で十分に枯れていそうなのはGeoHashかなと。GeoHexはかっこいいが、今回の利用用とではビジュアルは無関係なので。plus+codesはGoogle公式というわけでもないようなので、今後の展開は未知数。 あーありがち - GeohashのグリッドをGoogle Maps上に再現するツール書いた 古い記事だがやろうとしていることはほぼコレ。 URI設計の問題クエリで渡すか、ハッシュで渡すか、階層へ盛り込むのもアリっちゃアリ。 http://example.com?geo=xn3pvxy http://example.com#xn3pvxy http://example.com/xn3pvxy ライブラリの選定経緯度とジオハッシュの相互変換にはライブラリを使用する。下記の二つが候補として見つかった。 davetroy/geohash-js chrisveness/latlon-geohash 開発が最近行われており、オプションにより制度の調整も行えるlatlon-geohashを採用した。 123const latLon = Geohash.decode(geoHash);console.log(`現在地の経度は${latLon.lat}、緯度は${latLon.lon}です。`); このように簡単にジオハッシュを経緯度へ変換できる。 1const geoHash = Geohash.encode(latLon.lat, latLon.lon, 8); 経緯度をジオハッシュ化する際に、3番目の引数で桁数（精度）を指定できる。未指定でも経緯度から自動判別を行う。","categories":[],"tags":[{"name":"Geohash","slug":"Geohash","permalink":"https://log.plyrs.net/tags/Geohash/"}]},{"title":"Webp 導入思案","slug":"Webp-導入思案","date":"2015-09-13T15:38:44.000Z","updated":"2015-11-20T15:45:53.111Z","comments":true,"path":"2015/09/14/Webp-導入思案.html","link":"","permalink":"https://log.plyrs.net/2015/09/14/Webp-導入思案.html","excerpt":"","text":"Webpをさくっと導入できないか思案。 Can I use… Support tables for HTML5, CSS3, etc 取りあえず対応しているのはBlinkブラウザのみだが、モバイル対応へ重きを置くならば価値はありそう。 【翻訳】Introduction to WebP - 1000ch.net Webpの概要と導入の際の未サポートブラウザへのフォールバック方法を解説。記事内でも言及があるサーバーサイドでの実装が一番よさそうではある。 Deploying WebP via Accept Content Negotiation - igvita.com しかしサクっとはできなさそうなので、フロントで実装したい。とりあえず上記を参考に<picture>で試してみた。 Webp - Playground これは容易でとてもいい方法だと感じた。しかし今回はbackground-imageへのwebp導入を考えているので残念ながらこの方法は不可である。 色々調べると‘@supports‘を利用した方法を発見。 Using the WebP image format / blog unblock @supportsで機能が利用できるか確認し、分岐する手法が紹介されている。筆者は最終的にModernizrを使用したようだが(そりゃそうだよな…)、今回このためにModernizr入れるのは本末転倒である。@supports面白そうだしカジュアルなのでコレを採用。 @supports - CSS | MDN Can I use… Support tables for HTML5, CSS3, etc 1234background-image: url(\"../img/bg.png\");@supports (background-image: -webkit-image-set(url(\"../img/bg.webp\") 1x)) { background-image: -webkit-image-set(url(\"../img/bg.webp\") 1x)} Can I use… Support tables for HTML5, CSS3, etc CSS4で提案されているimage-listはかなりよさそうである。 CSS Image Values and Replaced Content Module Level 4 Bruce Lawson’s personal site : Save bandwidth with webP – soon with fallback! 1background-image: images(\"../img/bg.webp\", \"../img/bg.png\"); ただ現時点では対応しているブラウザはない様子。現時点ではimage-setが一番よさそう。","categories":[],"tags":[]},{"title":"Conohaクラウドへ引っ越し","slug":"Conohaクラウドへ引っ越し","date":"2015-09-13T15:20:11.000Z","updated":"2016-02-28T15:29:53.187Z","comments":true,"path":"2015/09/14/Conohaクラウドへ引っ越し.html","link":"","permalink":"https://log.plyrs.net/2015/09/14/Conohaクラウドへ引っ越し.html","excerpt":"","text":"旧Conohaで運用していたサイトをクラウド番へ引っ越しした。 正直今までのConohaは結構な頻度で止まっており、あまり信頼できるものではなく他社へ乗り換えを検討していた。しかし最近は極力楽をしたい欲求が強くなっており、その面でConohaクラウドに魅力を感じ、色々葛藤はあったものの改善の期待をこめて引っ越しを決心した。 さて、このConohaクラウド、サーバー追加の際にテンプレを選ぶことができ、LAMPやRails、Wordpressはもちろんのこと、MongoDBやJenkins、DockerやMEANなんてのもあって興味深い。機会があればそのへんも触ってみようと思う。","categories":[],"tags":[{"name":"Conoha","slug":"Conoha","permalink":"https://log.plyrs.net/tags/Conoha/"}]},{"title":"Nodeサイトの多言語化","slug":"Nodeサイトの多言語化","date":"2015-09-11T15:20:11.000Z","updated":"2016-02-28T15:34:56.529Z","comments":true,"path":"2015/09/12/Nodeサイトの多言語化.html","link":"","permalink":"https://log.plyrs.net/2015/09/12/Nodeサイトの多言語化.html","excerpt":"","text":"Node.jsで構築したサイトを多言語化したいので、ちょっとだけググってみた。 JavaScript - HTMLでの国際化(i18nextとl10n.js) - Qiita 多言語対応のjsライブラリを紹介している記事。i18nextとl10n.jsという二つを紹介しながら、主にフロントの実装について書いてある。 今のアプリに実装するならばサーバーサイドで行うと思われるが、大体の手法は同一であろう。本格的に作る際にもっと詳しく調べていく予定。","categories":[],"tags":[{"name":"i18n","slug":"i18n","permalink":"https://log.plyrs.net/tags/i18n/"}]},{"title":"MongoDBのバックアップ思案","slug":"MongoDBのバックアップ思案","date":"2015-09-10T15:32:31.000Z","updated":"2015-11-20T15:34:33.706Z","comments":true,"path":"2015/09/11/MongoDBのバックアップ思案.html","link":"","permalink":"https://log.plyrs.net/2015/09/11/MongoDBのバックアップ思案.html","excerpt":"","text":"MongoDBをバックアップし、リストアまで行いたい。 第11回 MongoDBのバックアップ：MongoDBでゆるふわDB体験｜gihyo.jp … 技術評論社 バックアップ起動中のMongoのバックアップにはmongodumpが一般的のよう。小規模ならこれで十分か。 mongodump — MongoDB Manual 3.0 1$ mongodump --out /opt/backup/mongodump_20150911 outオプションで保存先を指定できる。指定しなかったらカレントディレクトへ。そのなかにデータベースごとのダンプファイルを作成してくれる。 リストアリストアはmongorestoreで。 mongorestore — MongoDB Manual 3.0 1$ mongorestore /tmp/path 1$ mongorestore /tmp/path -d name でデータベースを指定 とりあえず上の方法で手動でのバックアップ&リストアは問題なく、軽快にできた。今後は自動化していきたい。","categories":[],"tags":[{"name":"MongoDB","slug":"MongoDB","permalink":"https://log.plyrs.net/tags/MongoDB/"}]},{"title":"Node.js 4.0","slug":"Node-js-4-0","date":"2015-09-09T13:29:39.000Z","updated":"2015-11-20T15:31:17.066Z","comments":true,"path":"2015/09/09/Node-js-4-0.html","link":"","permalink":"https://log.plyrs.net/2015/09/09/Node-js-4-0.html","excerpt":"","text":"Node.jsの4.0がリリースされたようなので、順次アプリケーションを移行中。 Node v4.0.0 (Stable) | Node.js 問題なくnvm install 4.0でインスコできるよう。 Arrow Functionが解禁になったので、これも少しずつ書き換えていきたい。 あとはletとconstの使い分け。基本constでいこうと思うけど、どうだろう。","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Grid","slug":"Grid","date":"2015-09-07T12:05:05.000Z","updated":"2018-05-16T16:54:32.248Z","comments":true,"path":"2015/09/07/Grid.html","link":"","permalink":"https://log.plyrs.net/2015/09/07/Grid.html","excerpt":"","text":"グリッドデザインの流れにある「カード型デザイン」の記事を読んだ。 最新Webトレンド「カード型デザイン」を取り入れるべき、効果的な4つの理由 - PhotoshopVIP ポイントは IAの作成 UXの工場 普遍性 の3点。 この手のデザインは割とまえからある気がするが、スマホデバイスとの親和性と相まって地位を確立した感じであろうか。 CSS Grid Layouts今後がっつりとしたグリッドデザインをマークアップするのであれば、display: gridを使用したい。 The future of layout with CSS: Grid Layouts — Medium CSSグリッドを使用した実装。 1.container { display: grid; } Can I use… Support tables for HTML5, CSS3, etc 各ブラウザベンダーの対応はまだまだこれから。IEも先行実装したものの使用が変わっていき、互換性が怪しいらしい。とりあえずDemoを作ってみた。 CSS Grid Layout - Playground ie11とEdgeで動作を確認。他のブラウザではDivの羅列となったので導入するのであればPolyfillは必須のよう。 FremyCompany/css-grid-polyfill Polyfillはコレ。Demoもあるし かなり容易に複雑なグリッドレイアウトを作れるし、レスポンシブ化も簡潔に書けそう。早く使いたいので各ベンダの今後の動向を見たい。現時点では未対応環境が多すぎるし、上記Polyfill内でもプロダクションへの導入は慎重にと言及されている。でもFirefoxが対応したらPolyfillかましてどこかで使うかも。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"Prefitch","slug":"Prefitch","date":"2015-09-07T11:03:17.000Z","updated":"2015-11-20T15:04:10.513Z","comments":true,"path":"2015/09/07/Prefitch.html","link":"","permalink":"https://log.plyrs.net/2015/09/07/Prefitch.html","excerpt":"","text":"来訪者が高い可能性で次に読み込むファイルを先読みさせたい。 HTML5 Prefetch — Medium 対応ブラウザやテスト方法など、かなり詳しく解説している記事。 種類は主に以下の四つがあるよう。 dns-prefetch – ドメインの名前解決 subresource – 現在のページで使用するファイルをキャッシュ prefetch – 後続のページで使用するファイルをキャッシュ prerender – バックグラウンドでレンダリングまで行う 今回はprefetchを試してみた。 1<link rel=”prefetch” href=”/js/example.js”> 効果のほどは今後検証していく。","categories":[],"tags":[]},{"title":"Web Manifest","slug":"Web-Manifest","date":"2015-09-02T14:45:58.000Z","updated":"2015-11-20T15:00:41.795Z","comments":true,"path":"2015/09/02/Web-Manifest.html","link":"","permalink":"https://log.plyrs.net/2015/09/02/Web-Manifest.html","excerpt":"","text":"manifest.jsonサイトのWebアプリ化を押し進めるためmanifest.jsonを設置。 Manifest for a web application App manifest - App Center | MDN MDNにも記事があるし、普段使いのFirefoxでもしっかり動くのだろうか。 Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ 上記はモバイルフレンドリーの目線でWebアプリ化に幅広く言及している記事。 Webアプリをネイティブアプリっぽく起動するWebApp Manifest - Coding Design’s Tumblr この記事はさっと読めて、参考になる。 manifest.json12345678910111213{ \"name\": \"Kinlan's Amazing Application ++\", \"short_name\": \"Kinlan's Amaze App\", \"icons\": [ { \"src\": \"launcher-icon-3x.png\", \"sizes\": \"144x144\", \"type\": \"image/png\" } ], \"start_url\": \"index.html\", \"display\": \"standalone\"} これが最低限必要な項目らしい。 index.html1<link rel=\"manifest\" href=\"/manifest.json\"> あとはヘッドで読み込めばオケ。 インストールバナー manifest.json でWebアプリを「ホーム画面に追加」自動バナー表示に対応させる これはService Workerを使用した「ホームへ追加」バナーの表示の記事。 12345window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }}); これもインストールバナーについて詳しく解説している記事。 Increasing engagement with Web App install banners — Google Web Updates そしてそのサンプル。 samples/app-install-banner at gh-pages · GoogleChrome/samples Choromeでは問題なく動作し、インストールバナーも表示された。ただ一度インストールをしないを選択すると、次回再表示はなさそうなのであまり強力な効果は期待できないかも。 テーマカラーtheme-colorの設定がmanifest.json内に記述できるようになったよう。 Using the web app manifest to specify a site wide theme colour 従来のmetaタグだとこう。 1<meta name=\"theme-color\" content=\"#2196F3\"> manifest.jsonだとこう。 1\"theme_color\": \"#2196F3\" しかしmanifest.jsonのみの記述だとホームへ追加しないと効力を発揮しないようなので、現時点では両方記述したほうがいいかもしれない。 FirefoxFirefoxでもServiceWorkerをテストする。 about:configでdom.serviceWorkersを検索し、フラグをtrueへ変更する。 ServiceWorkerは問題なく作動したが、アプリ化の効果は現時点では無さそう。今後に期待したい。","categories":[],"tags":[]},{"title":"フォントコンバーター","slug":"フォントコンバーター","date":"2015-09-02T09:45:30.000Z","updated":"2018-05-16T16:54:32.319Z","comments":true,"path":"2015/09/02/フォントコンバーター.html","link":"","permalink":"https://log.plyrs.net/2015/09/02/フォントコンバーター.html","excerpt":"","text":"サイトへWebフォントを導入する際の手順。 フォントの変換はFont Converterで、Woff2へはwoff to woff2 converterで行える。 123456789@font-face { font-family: 'webfont'; src:url('font/webfont.eot'); src:url('font/webfont.eot?#iefix') format('embedded-opentype'), url('font/webfont.woff2') format('woff2') url('font/webfont.woff') format('woff'), url('font/webfont.ttf') format('truetype'), url('font/webfont.svg#icomoon') format('svg');} IE8以下の対応はもういいかなとも思う。","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"},{"name":"webfont","slug":"webfont","permalink":"https://log.plyrs.net/tags/webfont/"}]},{"title":"Firefox 64bit","slug":"Firefox-64bit","date":"2015-08-17T11:36:38.000Z","updated":"2015-11-16T03:44:02.156Z","comments":true,"path":"2015/08/17/Firefox-64bit.html","link":"","permalink":"https://log.plyrs.net/2015/08/17/Firefox-64bit.html","excerpt":"","text":"BetaとDeveloper Edition(Aurora)では64bit版が使えるようなので、導入してみた。 Firefox Beta Firefox Developer Edition Developer Editionはたまにしか使わないのでよくわからないが、常用しているBetaはいい感じ。 思ったより快適でメモリもまだ余裕があるので、マシンスペックによっては幸せになれるかと。 ついでにChromeも64bitへ上げたが、これこそ僕は検証でしか使用しないので違いは分からず。でも、きっとよくなってると思う。","categories":[],"tags":[{"name":"Firefox","slug":"Firefox","permalink":"https://log.plyrs.net/tags/Firefox/"}]},{"title":"Source Han Code JP","slug":"Source-Han-Code-JP","date":"2015-08-12T08:26:21.000Z","updated":"2015-11-16T03:36:14.741Z","comments":true,"path":"2015/08/12/Source-Han-Code-JP.html","link":"","permalink":"https://log.plyrs.net/2015/08/12/Source-Han-Code-JP.html","excerpt":"","text":"最近はずっとSource Code Proを使っていたんだけど、ものは試しとSource Han Code JPを味見してみた。 adobe-fonts/source-han-code-jp この記事を参考にBracketsへ導入。(やっぱりすんなりとはいかなかった…) 1'Source Han Code jp Medium', ＭＳ ゴシック, 'MS Gothic', monospace 僕の環境では上記の用に記述すると動いた。ウェイトをもっと細くしたいが、Medium以外は認識しない…。 最初は結構違和感を感じてフォントサイズなどの微調整は必要だったけど、結果としてはなかなか、いい塩梅。日本語が入り乱れてるファイルの作業では効力を発揮しそうなので、今後はこれメインでいってみようかと。フロント向きだと感じた。","categories":[],"tags":[]},{"title":"Windows10へVagrantを導入","slug":"Windows10へVagrantを導入","date":"2015-08-10T11:03:31.000Z","updated":"2015-11-16T03:25:01.502Z","comments":true,"path":"2015/08/10/Windows10へVagrantを導入.html","link":"","permalink":"https://log.plyrs.net/2015/08/10/Windows10へVagrantを導入.html","excerpt":"","text":"Wordpressなどの開発はXamppで十分だが、Nodeを本格的にWindows上で行うのはきつい。というか本番環境がWindowsならまだいいかもしれないが、現実はほとんどそうではないので仮想環境上で開発すべきであろう。Windows10へアップグレードしたのを機会に、前々から検討していたVagrantでの開発環境導入を試みる。 事前作業Virtualization Technologyを有効にするVagrantは仮想環境を使用するため、Virtualization Technologyを有効にする必要がある。PCのBIOSに入り、Virtualization Technology を Enabled へ Vagrant、VirtualBoxをインストール各公式サイトから最新版をダウンロードし、インスコ。 Vagrant 公式サイトhttp://www.vagrantup.com/ VirtualBoxhttps://www.virtualbox.org/ BOXを取得配布サイトから必要なBoxを吟味。今回はCentOS v6.6 64bit。 Vagrantbox.eshttp://www.vagrantbox.es/ CentOS 6.6 64bit を追加ここからコマンドプロンプト 1$ vagrant box add centos6.6 http://sourceforge.net/projects/nrel-vagrant-boxes/files/CentOS-6.6-x86_64-v20150426.box 追加したBoxを確認1$ vagrant box list Vagrant 初期化ここからコマンドプロンプト on 作業フォルダ 1$ vagrant init centos6.6 仮想マシンの操作起動1$ vagrant up 状態確認1$ vagrant status 終了1$ vagrant halt 再起動1$ vagrant reload 破棄1$ vagrant destroy 仮想マシンへ接続TeraTermで接続した。 git インストール1$ sudo yum -y install git Node.js インストール123$ git clone https://github.com/creationix/nvm.git ~/.nvm$ source ~/.nvm/nvm.sh$ nvm install 0.12 1$ npm install --no-bin-links ファイアーウォールを停止12$ sudo service iptables stop$ sudo chkconfig iptables off 雑感Windows10でも今回は問題はなかったが、環境やVirtualBoxのバージョンによっては不具合も報告されているようなのでもうちょっと待ったほうが安全かもしれない。Vagrantを開発環境として本格運用していくならイメージの保存や構成管理ツールも合わせるのが楽っぽいので、順次導入していきたい。","categories":[],"tags":[{"name":"Windows","slug":"Windows","permalink":"https://log.plyrs.net/tags/Windows/"},{"name":"Vagrant","slug":"Vagrant","permalink":"https://log.plyrs.net/tags/Vagrant/"}]},{"title":"CSS wii-change","slug":"CSS-wii-change","date":"2015-08-05T11:37:01.000Z","updated":"2018-05-16T16:54:32.248Z","comments":true,"path":"2015/08/05/CSS-wii-change.html","link":"","permalink":"https://log.plyrs.net/2015/08/05/CSS-wii-change.html","excerpt":"","text":"CSS will-changeプロパティについての記事を読んだので早速試験中。 CSS will-changeプロパティについて知っておくべきこと 1will-change: transform; 簡単に言えばtranslate3dsなどのハックでGPUアクセレーションを有効化していたけど、それ以外の適切な手法でブラウザさんに最適化していただこうというものらしい。 ちょっと試してみてもあまり違いはわからなかったが、重い描画や低スペックマシンだと違いがでてくるのかも。何より最適化の意図を明確にすることができるので、設計に盛り込みやすい。 Can I use… Support tables for HTML5, CSS3, etc しかし現時点でSafariの実装はまだまだなので、しばらくは従来通りtranslate3dsを使うか、併用していくのがよさそう。 その他参考記事 will-change - CSS | MDN will-change | CSS-Tricks CSS Will Change Module Level 1 日本語訳","categories":[],"tags":[{"name":"CSS","slug":"CSS","permalink":"https://log.plyrs.net/tags/CSS/"}]},{"title":"npm-check-updates","slug":"npm-check-updates","date":"2015-06-11T11:36:08.000Z","updated":"2015-10-03T07:51:52.000Z","comments":true,"path":"2015/06/11/npm-check-updates.html","link":"","permalink":"https://log.plyrs.net/2015/06/11/npm-check-updates.html","excerpt":"","text":"npm-check-updatesが便利という発見。 モジュールのリリース情報を確認して、必要ならば更新というくだりは難儀。npm outdatedしてpackage.jsonを書き換えてnpm installを行うのが通常の流れであるが、回数を重ねるとこれを行うのがおっくうになってくる。 npm-check-updatesはこのへんの手間を省いてくれる。 今回はコマンドが短くてよりよさげな開発版をインストール。 1npm install -g npm-check-updates@unstable これで更新確認から実行まで3ステップで行える。 12345678# 更新を確認$ ncu# package.jsonを更新$ ncu -u# 更新を実行$ npm install フロント開発でgulpを使用していると割と頻繁にupdateする必要がある。 マイナーバージョンアップであればあまり後先考えずガンガン上げていきたい性分なので、その作業の簡略化ができ素晴らしい。","categories":[],"tags":[{"name":"npm","slug":"npm","permalink":"https://log.plyrs.net/tags/npm/"}]},{"title":"gulp-imagemin","slug":"gulp-imagemin","date":"2015-05-25T11:28:08.000Z","updated":"2015-10-03T07:35:32.000Z","comments":true,"path":"2015/05/25/gulp-imagemin.html","link":"","permalink":"https://log.plyrs.net/2015/05/25/gulp-imagemin.html","excerpt":"","text":"gulp-imageminで画像の最適化を突き詰める。 sindresorhus/gulp-imagemin 標準API gifsicle jpegtran optipng svgo gif、jpeg、png、svgと主要なフォーマットは標準搭載されているので、導入後すぐに試すことができる。 拡張モジュール webp advpng pngquant pngout pngcrush mozjpeg jpegoptim 拡張モジュールを用いることも可能。webpなども最適化することができる。全てを試してはいないが、pngquantやmozjpegは標準搭載のそれよりも圧縮効率がいい。 ただ、モジュールがでかくてインストールに時間がかかる。各プロジェクトにこれを導入していくと、なぜか申し訳ない気持ちになってくる。","categories":[],"tags":[]},{"title":"Style Guide Boilerplate","slug":"Style-Guide-Boilerplate","date":"2015-05-21T11:24:23.000Z","updated":"2015-10-03T07:27:02.000Z","comments":true,"path":"2015/05/21/Style-Guide-Boilerplate.html","link":"","permalink":"https://log.plyrs.net/2015/05/21/Style-Guide-Boilerplate.html","excerpt":"","text":"Style Guide Boilerplateがいい感じ。 bjankord/Style-Guide-Boilerplate DoccoとかKSSとか、ジェネレーターを使った運用を目指していたが、生成するドキュメントがいまいちシンプルさに欠け、結局自前で書いていたが、こーゆーのが今回はマッチしそう。","categories":[],"tags":[]},{"title":"node-redis入門","slug":"node-redis入門","date":"2015-05-17T11:07:18.000Z","updated":"2015-10-03T07:52:34.000Z","comments":true,"path":"2015/05/17/node-redis入門.html","link":"","permalink":"https://log.plyrs.net/2015/05/17/node-redis入門.html","excerpt":"","text":"Redisの修行を進めている。Nodeアプリ内で使う分には下記を参考に学習を進めていけばいい様子。 http://redis.io/ mranney/node_redis node-redis - node.js redisクライアント node.jsでRedisを使ってみる【準備編】 やはりセッション管理などはRedisで行いたい。Koaではkoa-redisを使えば容易に実装できた。 よりRedisをよりアプリケーションの広範囲で活用する際は下記で理解を深めるとよさそう。 入門 : Redis のデータ構造と概念 — Redis Documentation (Japanese Translation)","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"Redis","slug":"Redis","permalink":"https://log.plyrs.net/tags/Redis/"},{"name":"Koa","slug":"Koa","permalink":"https://log.plyrs.net/tags/Koa/"}]},{"title":"http-proxyでNode.jsの複数アプリを管理","slug":"http-proxyでNode-jsの複数アプリを管理","date":"2015-05-17T11:00:15.000Z","updated":"2015-10-03T07:52:22.000Z","comments":true,"path":"2015/05/17/http-proxyでNode-jsの複数アプリを管理.html","link":"","permalink":"https://log.plyrs.net/2015/05/17/http-proxyでNode-jsの複数アプリを管理.html","excerpt":"","text":"一つのドメインで複数のnodeアプリを起動させたい。 http-proxy使えばできそうである。 nodejitsu/node-http-proxy 参考 Hosting multiple Express (node.js) apps on port 80http-proxyでプロキシAdd Star 別モジュールを利用しているが、PM2のくだりが参考になりそう。 bouncyを使ったNodejsのみのバーチャルホスト","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"}]},{"title":"Redis環境を構築(Windows7)","slug":"Redis環境を構築-Windows7","date":"2015-05-16T11:58:17.000Z","updated":"2015-10-03T07:52:16.000Z","comments":true,"path":"2015/05/16/Redis環境を構築-Windows7.html","link":"","permalink":"https://log.plyrs.net/2015/05/16/Redis環境を構築-Windows7.html","excerpt":"","text":"PCへRedisをインストールした。 Redis.ioのダウンロードページ下、Other versionsからWindows版を配布しているリポジトリへ。 MSOpenTech/redis バージョンは2.8.19.1。ダウンロードしてインストーラーを起動、あとは普通に完了したっぽい。 上記方法ではどうやら失敗したもよう・・・。 Windows7にredisをインストールしてみた ↑の記事を参考にしこんどこそ成功。 原因は、まぁ気にせずいこう・・・。","categories":[],"tags":[{"name":"Redis","slug":"Redis","permalink":"https://log.plyrs.net/tags/Redis/"}]},{"title":"npmのたまに使うコマンド","slug":"npmのたまに使うコマンド","date":"2015-04-12T11:09:16.000Z","updated":"2015-10-03T07:52:46.000Z","comments":true,"path":"2015/04/12/npmのたまに使うコマンド.html","link":"","permalink":"https://log.plyrs.net/2015/04/12/npmのたまに使うコマンド.html","excerpt":"","text":"よく使うコマンドは覚えてるんだけど、たまに使うコマンドは忘れちゃって毎回ググってる気がするのでメモ。 バージョン確認 1npm -v npm自身のアップデート 1npm i -g npm パッケージをアインインストール 1npm uninstall <package> パッケージの更新情報を確認 1npm outdated dependenciesだけインストール 1npm i --production","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"npm","slug":"npm","permalink":"https://log.plyrs.net/tags/npm/"}]},{"title":"iojsをインストールしてみた","slug":"iojsをインストールしてみた","date":"2015-01-15T14:09:16.000Z","updated":"2015-11-14T15:49:27.697Z","comments":true,"path":"2015/01/15/iojsをインストールしてみた.html","link":"","permalink":"https://log.plyrs.net/2015/01/15/iojsをインストールしてみた.html","excerpt":"","text":"昨日ついにnode.jsのファークであるio.jsがリリースされましたね。 io.js - JavaScript I/O: Koaで色々やろうと考えている僕としてはある程度動向を知っておく必要があるため、早速ローカル環境へインストールし、既存のコードが動作するかまで確認を行いました。 io.jsのインストール普通にインストーラーから… おお～、普通にインストールできた。なにか新鮮である！ 1$ iojs -v でインストールを確認。v1.0.1が返ってきました！ モジュールを確認現時点ではほぼ問題ないと思いますが、常用モジュールは動向を確認しておきたいですよね。 Koa1$ iojs app.js --harmony オプションなしでKoaが動く！ もちろんKoaチームもiojs対応の方向へ進んでいるっぽい。 nodemonnodemon は nodemon.json を配置し execMap を記述すれば問題なく動作するようです。 12345{ \"execMap\": { \"js\": \"iojs\" }} 随時チェックしていきたいです！","categories":[],"tags":[{"name":"Node.js","slug":"Node-js","permalink":"https://log.plyrs.net/tags/Node-js/"},{"name":"io.js","slug":"io-js","permalink":"https://log.plyrs.net/tags/io-js/"}]},{"title":"ブログをHEXOへ引越し","slug":"ブログをHEXOへ引越し","date":"2015-01-03T13:33:56.000Z","updated":"2015-11-14T15:49:17.720Z","comments":true,"path":"2015/01/03/ブログをHEXOへ引越し.html","link":"","permalink":"https://log.plyrs.net/2015/01/03/ブログをHEXOへ引越し.html","excerpt":"","text":"新年だしでブログをHEXOへ引越ししました。 てぃーだブログで転がしていたブログの蘇生計画のひとつです. HEXO読みはヘクソ。いわゆる静的サイトジェネレーターの一つ。 JekyllやOctopressのnode版といった感じ。 おもな特徴は… ビルド、デプロイはコマンドからでオケ マークダウンをサポートしているのでプログラマライク 豊富なプラグイン 豊富なテーマ といったところ。テーマの自作も標準でEJSを採用しているので、シンプルに書ける。制作者が台湾の方でユーザーにも中国圏の方が多いのか、プラグインやテーマに中国語がちょくちょく。基本的にゃ問題なく使えます。 インストールインストールはnpmから 1$ npm install hexo -g ジェネレーターでベースを一発生成。 1$ hexo init <フォルダ> 生成されたプロジェクトに移動して npm install 12$ cd <フォルダ>$ npm install あとはhexo serverでローカルサーバーが立ち上がり、http://localhost:4000にブログが立ち上がります。 デプロイ今回はGithub Pages上に導入したので、_config.ymlのdeplpy:部分を修正。 123456# Deployment## Docs: http://hexo.io/docs/deployment.htmldeploy: type: github repo: https://github.com/<プロジェクト>/<プロジェクト>.github.io.git branch: master generateコマンドでアップロードする性的サイトを生成して、 1$ hexo generate deployコマンドでデプロイ。 1$ hexo deploy generateコマンドは-gオプションとしてデプロイと同時に行うことも可能。 1$ hexo deploy -g こっちの方が使うとこが多いかと。 記事投稿newコマンドでひな形を生成。 1$ hexo new <記事タイトル> source/_posts/内に生成されたひな形へマークダウンで内容を記述。 12345title: 記事タイトルdate: 2015-01-01 00:00:00tags:---以下内容を書き込む そしてデプロイ 1$ hexo deploy -g プラグインプラグイン一覧 プラグインもnpm からインストール。 1$ npm install <プラグイン名> --save 以下導入したプラグイン hexo-generator-feed 公式。Atomを生成 hexo-generator-sitemap 公式。サイトマップを生成 hexo-generator-baidu-sitemap Baidu用サイトマップを生成。こーゆーのは面白そうなので導入 hexo-generator-minify hexo gmコマンドでCSSとJsをMinifyして生成。速度厨なので導入 テーマテーマ一覧 テーマはgitからインストール。 1$ git clone <リポジトリ> themes/<テーマ名> 公式テーマはデフォルトのLandscapeを含めて三つ容易されています。 Landscape - デモ Phase - デモ Light - デモ 今回は日本製のApolloを採用。 Apollo - デモ まとめかなり容易にブログ環境を構築できました。マークダウンでGistにためたネタを投稿しやすいのでウハウハ。","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://log.plyrs.net/tags/hexo/"}]},{"title":"CloudFlare導入してみる","slug":"CloudFlare導入してみる","date":"2013-04-07T08:50:55.000Z","updated":"2015-11-13T18:48:07.527Z","comments":true,"path":"2013/04/07/CloudFlare導入してみる.html","link":"","permalink":"https://log.plyrs.net/2013/04/07/CloudFlare導入してみる.html","excerpt":"","text":"サイトにCloudFlare導入してみたが、コレどうなんさろう…。メインビジュアルが結構デカイから恩恵があるのかとおもってたけど、よくわかんないッス。 とりあえず様子見だなー。","categories":[],"tags":[]},{"title":"Fontelloを導入","slug":"Fontelloを導入","date":"2013-04-05T08:42:38.000Z","updated":"2015-11-15T05:53:09.054Z","comments":true,"path":"2013/04/05/Fontelloを導入.html","link":"","permalink":"https://log.plyrs.net/2013/04/05/Fontelloを導入.html","excerpt":"","text":"NAUTILUSサイトの外部リンクをアイコンで分かりやすくしたいなーと思い、今日改造に着手。どうせならアイコンフォントで導入しよー、ということで調査した結果、下記の手法で改造を開始。今回はfontelloを使用。普通のフォントアイコンをつかうと無駄にサイズが大きくなるので、こーゆーピンポイントでチョイスできるサービスは大変便利。 この四つをアイコンフォントとして、導入するる。 ついでに_blankを記入したときに、自動でアイコンを追加してくれるようJSで追加！この記事を参考に。 と思ったら、同様のことをCSSだけでできるのね。この辺でセレクタとかの知識不足が露呈しますな。ホームのアイコンは手動で入力。 わりとシンプルなコードでできますな。ん～今日はこんなもんかと。","categories":[],"tags":[]},{"title":"SOY CMSを導入","slug":"CMSを導入","date":"2013-03-07T08:35:38.000Z","updated":"2018-05-16T16:55:44.509Z","comments":true,"path":"2013/03/07/CMSを導入.html","link":"","permalink":"https://log.plyrs.net/2013/03/07/CMSを導入.html","excerpt":"","text":"サイトに以前から検討していたCMSを導入。AD-EDITをいじってたが、デザイン弄りにくくて頓挫。Perlほとんど読めないからなぁ。沖縄産だから使いたかったが…。 ってことで行き着いたSOYでなんとか完成。ああ、SOYいいね、ソイ。いいっす、ボクには扱いやすす。PHPはギリギリいけるな。 ということで、とりあえずトップとInfoページは全面SOY化。メディアとリクエストもそのうちSOY化したら長い目で見ていいかも。メールフォームやフォトはまだまだ検討ですな。いまでも事足りてるし。","categories":[],"tags":[{"name":"SoyCMS","slug":"SoyCMS","permalink":"https://log.plyrs.net/tags/SoyCMS/"}]}]}