atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Playlog</title>
  
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://log.plyrs.net/"/>
  <updated>2018-05-16T16:28:43.556Z</updated>
  <id>https://log.plyrs.net/</id>
  
  <author>
    <name>Hirofumii</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Github Pagesで独自ドメインを利用したサイトをHTTPS化</title>
    <link href="https://log.plyrs.net/2018/04/25/GithubPages%E3%81%A7%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92HTTPS%E5%8C%96.html"/>
    <id>https://log.plyrs.net/2018/04/25/GithubPagesで独自ドメインを利用したサイトをHTTPS化.html</id>
    <published>2018-04-24T16:24:47.000Z</published>
    <updated>2018-05-16T16:28:43.556Z</updated>
    
    <content type="html"><![CDATA[<p>このブログは Github pages 上で独自ドメインを利用して構築されている。<br>今回ここの HTTPS化を実施した。</p><p>参考：<br><a href="https://help.github.com/articles/securing-your-github-pages-site-with-https/" target="_blank" rel="noopener">Securing your GitHub Pages site with HTTPS - User Documentation</a></p><p>いつのまにか独自ドメインのを利用したページも Let’s Encrypt を使用したSSL発行が行われていたようで、HTTPS化を強制することで完了した。<br>詳しい方法は上記リンクを参照したが、特に混在コンテンツの問題もなくスムーズに移行できた。</p><p>独自ドメインの Github Pages のHTTPS化は、少し前までは CloudFlare を利用するのが常套句であったが、今回Github内のみで解決できハードルが相当下がった印象だ。</p><p>CloudFlare を挟むくらいなら自前のサーバーに上げSSL化した方がいいと感じていたが、今後は逆に、積極的にGithub上へ移行させたくなった。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;このブログは Github pages 上で独自ドメインを利用して構築されている。&lt;br&gt;今回ここの HTTPS化を実施した。&lt;/p&gt;
&lt;p&gt;参考：&lt;br&gt;&lt;a href=&quot;https://help.github.com/articles/securing-your-git
      
    
    </summary>
    
    
      <category term="Github" scheme="https://log.plyrs.net/tags/Github/"/>
    
  </entry>
  
  <entry>
    <title>OpenSSLを更新</title>
    <link href="https://log.plyrs.net/2017/12/09/Openssl%E3%82%92%E6%9B%B4%E6%96%B0.html"/>
    <id>https://log.plyrs.net/2017/12/09/Opensslを更新.html</id>
    <published>2017-12-08T16:21:58.000Z</published>
    <updated>2018-05-14T16:24:13.520Z</updated>
    
    <content type="html"><![CDATA[<p>WordPressを管理画面からアップデートしようと思ったら、以下の様なエラーにより失敗した。</p><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">wordpress</span>  更新 ダウンロードに失敗しました。: cURL <span class="literal">error</span> <span class="number">77</span>:</span><br></pre></td></tr></table></figure><p>調べてみると、セキュリティ通信で失敗しており OpenSSL の更新が必要なよう。</p><p>そこで以下の手順で更新を実行した。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> OpenSSLのバージョンを確認</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> rpm -qa | grep openssl</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> キャッシュを削除</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> yum clean all</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> OpenSSLを更新</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo yum update openssl openssl-devel</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> Webサーバーを再起動（ここではNginx）</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo systemctl restart nginx.service</span></span><br></pre></td></tr></table></figure><p>完了後、無事WordPressの更新を確認した。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;WordPressを管理画面からアップデートしようと思ったら、以下の様なエラーにより失敗した。&lt;/p&gt;
&lt;figure class=&quot;highlight nginx&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Firefox57とOpenwith</title>
    <link href="https://log.plyrs.net/2017/10/17/Firefox57%E3%81%A8Openwith.html"/>
    <id>https://log.plyrs.net/2017/10/17/Firefox57とOpenwith.html</id>
    <published>2017-10-16T16:19:41.000Z</published>
    <updated>2018-05-14T16:21:02.736Z</updated>
    
    <content type="html"><![CDATA[<p>今普段使いしている Firefox Developer Edition は、バージョンが57となったため、拡張機能がWebExtention限定となり、多数が使用不能となった。</p><p>いくつかは一旦仕様を諦めるか代替品へ移行したが、Open WithはWebExtention版がベータ版がテスト中とのことで、それを使用した。</p><ul><li><a href="https://github.com/darktrojan/openwith/issues/132" target="_blank" rel="noopener">Open With WebExtension beta available · Issue #132 · darktrojan/openwith</a></li></ul><p>その際の手順は以下の通り。</p><ol><li><a href="https://addons.mozilla.org/en-US/firefox/addon/open-with/versions/beta" target="_blank" rel="noopener">ここ</a>から最新版をインストールする。</li><li>もしインストールされていなかったら、<a href="https://www.python.org/downloads/" target="_blank" rel="noopener">python</a>をPCへインストールする。（2系、3系のどちらでもOKらしい）</li><li>FirefoxでOpen withを立ち上げ、そのウィンドウ内にある<code>Click here to download</code>をクリックし、<code>open_with_windows.py</code> というファイルをダウンロードする。</li><li>コマンドプロンプトを立ち上げ、<code>open_with_windows.py install</code> のようにインストールを実行する。</li><li>ウィンドウ内の <code>Test Installation</code>を実行し、グリーンのチェックマークが表示されると成功。</li></ol><p>これによりOpen With がFirefox 57 移行でも使用できる。<br>使いかって、表示は若干差異があるが、ほぼ問題はない。</p><p>この調子で順調に著名拡張機能が移行したらいいのだが…そうはなかなかいかんだろうなぁ…。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;今普段使いしている Firefox Developer Edition は、バージョンが57となったため、拡張機能がWebExtention限定となり、多数が使用不能となった。&lt;/p&gt;
&lt;p&gt;いくつかは一旦仕様を諦めるか代替品へ移行したが、Open WithはWebExte
      
    
    </summary>
    
    
      <category term="Firefox" scheme="https://log.plyrs.net/tags/Firefox/"/>
    
  </entry>
  
  <entry>
    <title>GoogleAppsScriptのローカルで開発</title>
    <link href="https://log.plyrs.net/2017/10/02/GoogleAppsScript%E3%81%AE%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA.html"/>
    <id>https://log.plyrs.net/2017/10/02/GoogleAppsScriptのローカル開発.html</id>
    <published>2017-10-01T16:07:47.000Z</published>
    <updated>2018-05-14T16:19:04.288Z</updated>
    
    <content type="html"><![CDATA[<p>業務上の定期的な通知に、GoogleAppsScriptを使用してChat Work APIを叩くというのを利用している。</p><p>しかし、GoogleAppsScriptのコード管理は原則ブラウザ上で行う形となるので、なかなかバージョン管理も難儀で不都合も生じる。<br>よって、ローカルで開発・修正し、アップロードし実行という環境を構築するべく、<code>node-google-apps-script</code>を導入した。<br>その際の参考は以下の記事。</p><ul><li><a href="https://github.com/danthareja/node-google-apps-script" target="_blank" rel="noopener">danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projects</a></li><li><a href="https://qiita.com/ttyokoyama/items/a4edfdcfcad56d664522" target="_blank" rel="noopener">Google Apps Scriptをローカルで開発する - Qiita</a></li><li><a href="http://kakakakakku.hatenablog.com/entry/2017/02/26/034115" target="_blank" rel="noopener">gapps を使って Google Apps Script を継続的にデプロイする - kakakakakku blog</a></li></ul><p>結果コードの編集と <code>gapps upload</code> コマンドを繰り返すだけで反映が可能となった。<br>GoogleAppScriptはアイデア次第でかなり有用なので、容易に導入できるよう開発環境も整備して行きたい。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;業務上の定期的な通知に、GoogleAppsScriptを使用してChat Work APIを叩くというのを利用している。&lt;/p&gt;
&lt;p&gt;しかし、GoogleAppsScriptのコード管理は原則ブラウザ上で行う形となるので、なかなかバージョン管理も難儀で不都合も生じる。&lt;
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>WHATWG HTMLのLint</title>
    <link href="https://log.plyrs.net/2017/09/08/WHATWGHTML%E3%81%AELint.html"/>
    <id>https://log.plyrs.net/2017/09/08/WHATWGHTMLのLint.html</id>
    <published>2017-09-07T15:36:51.000Z</published>
    <updated>2018-05-15T13:36:02.099Z</updated>
    
    <content type="html"><![CDATA[<p><a href="https://validator.w3.org/" target="_blank" rel="noopener">W3CのHTML文法チェッカー</a>比較的よく知られ僕もは何度か使ったことがあるが、WHATWG版があるか気になり調べてみたら、やはり存在した。</p><ul><li><a href="https://whatwg.org/validator/" target="_blank" rel="noopener">Web Hypertext Application Technology Working Group HTML Conformance Checkers</a></li></ul><p>各ブラウザベンダーはHTMLに関してはWHATWGの仕様を見ているので、構文チェックもこちらで行うのがよさそう。<br>ただ、昔と比較しそれほど神経質になる必要もなくなってきているような気がするが…。（なぜそう感じているのかは、うまく言葉では言えないが）</p><ul><li><a href="http://mtrootyy.web5.jp/htmllint/html5memo/0diff.html" target="_blank" rel="noopener">WHATWG版とW3C版の主な差異：HTML5.3各要素別メモ</a></li></ul><p>また関連して、上記ページもなかなか参考になる。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;a href=&quot;https://validator.w3.org/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;W3CのHTML文法チェッカー&lt;/a&gt;比較的よく知られ僕もは何度か使ったことがあるが、WHATWG版があるか気になり調べてみたら、やはり存在
      
    
    </summary>
    
    
      <category term="HTML" scheme="https://log.plyrs.net/tags/HTML/"/>
    
  </entry>
  
  <entry>
    <title>Xhamppでバーチャルホスト</title>
    <link href="https://log.plyrs.net/2017/07/05/Xhampp%E3%81%A7%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E3%83%9B%E3%82%B9%E3%83%88.html"/>
    <id>https://log.plyrs.net/2017/07/05/Xhamppでバーチャルホスト.html</id>
    <published>2017-07-04T15:34:00.000Z</published>
    <updated>2018-05-16T16:35:56.680Z</updated>
    
    <content type="html"><![CDATA[<p>PC内のXhamppにバーチャルホストを設定し、複数サイトの開発環境を構築したい。</p><h2 id="httpd-confの設定"><a href="#httpd-confの設定" class="headerlink" title="httpd.confの設定"></a>httpd.confの設定</h2><p><code>/xampp/apache/conf/httpd.conf</code> を編集。<br><code>Listen 80</code> の下へ必要な分のポートを追記。</p><p>例：<br><figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute"><span class="nomarkup">Listen</span></span> 8080</span><br><span class="line"><span class="attribute"><span class="nomarkup">Listen</span></span> 8081</span><br><span class="line"><span class="attribute"><span class="nomarkup">Listen</span></span> 8082</span><br></pre></td></tr></table></figure></p><h2 id="バーチャルホスト（httpd-vhosts-conf）の設定"><a href="#バーチャルホスト（httpd-vhosts-conf）の設定" class="headerlink" title="バーチャルホスト（httpd-vhosts.conf）の設定"></a>バーチャルホスト（httpd-vhosts.conf）の設定</h2><p><code>/xampp/apache/conf/extra/httpd-vhosts.conf</code> を編集。</p><p>例：<br><figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">&lt;VirtualHost *:80&gt;</span></span><br><span class="line"><span class="attribute"><span class="nomarkup">DocumentRoot</span></span> <span class="string">"C:/xampp/htdocs"</span></span><br><span class="line"><span class="attribute"><span class="nomarkup">ServerName</span></span> localhost</span><br><span class="line"><span class="section">&lt;/VirtualHost&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="section">&lt;VirtualHost *:8080&gt;</span></span><br><span class="line"><span class="attribute"><span class="nomarkup">DocumentRoot</span></span> <span class="string">"C:/xampp/htdocs/【ディレクトリ名】"</span></span><br><span class="line"><span class="attribute"><span class="nomarkup">ServerName</span></span> localhost</span><br><span class="line"><span class="section">&lt;/VirtualHost&gt;</span></span><br></pre></td></tr></table></figure></p><p>以下の記事が参考になった。</p><ul><li><a href="http://creator.aainc.co.jp/archives/6388" target="_blank" rel="noopener">xamppでローカル作業環境構築 | アライドアーキテクツのクリエイターブログ</a></li></ul>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;PC内のXhamppにバーチャルホストを設定し、複数サイトの開発環境を構築したい。&lt;/p&gt;
&lt;h2 id=&quot;httpd-confの設定&quot;&gt;&lt;a href=&quot;#httpd-confの設定&quot; class=&quot;headerlink&quot; title=&quot;httpd.confの設定&quot;&gt;&lt;/
      
    
    </summary>
    
    
      <category term="XAMPP" scheme="https://log.plyrs.net/tags/XAMPP/"/>
    
  </entry>
  
  <entry>
    <title>Windows環境でnode.jsモジュールのインストールエラー解消</title>
    <link href="https://log.plyrs.net/2017/05/29/Windows%E7%92%B0%E5%A2%83%E3%81%A7node-js%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%A8%E3%83%A9%E3%83%BC%E8%A7%A3%E6%B6%88.html"/>
    <id>https://log.plyrs.net/2017/05/29/Windows環境でnode-jsモジュールのインストールエラー解消.html</id>
    <published>2017-05-28T15:25:06.000Z</published>
    <updated>2018-05-14T15:33:03.251Z</updated>
    
    <content type="html"><![CDATA[<p>Windows環境で node.jsのモジュールインストール時にエラーが発生する。</p><p>どうやら原因はC++のコンパイルが動作しないことのようで、これを解消していく。</p><ul><li><a href="http://overmorrow.hatenablog.com/entry/2015/11/27/235935" target="_blank" rel="noopener">Windowsでnpm installの赤いエラーに悩まされているアナタへ - Mainly Devel Notes</a></li><li><a href="https://github.com/Microsoft/nodejs-guidelines/blob/master/windows-environment.md" target="_blank" rel="noopener">nodejs-guidelines/windows-environment.md at master · Microsoft/nodejs-guidelines</a></li></ul><p>Microsoftが管理しているNode.jsガイドラインを主に参考に進める。情報の鮮度が大本が管理しているだけに高そう。<br>まずは Visual C++ Build Tools をインストールする。<br>カスタムインストールから “Windows 8.1 SDK”と”Windows 10 SDK” を選択。<br>容量が大体7GBほど使用するらしいが、しょうがない。</p><p>また、<a href="https://www.python.org/downloads/" target="_blank" rel="noopener">Python 2.7</a>もインストールする。</p><p>しかし今度は下記ののエラーが発生。</p><p><code>ERROR in Cannot find module &#39;node-sass&#39;</code></p><p>これはいつも通り、node-sass の再インストールで解消。<br>これで通常運転に移った。<br>そこまでやってその存在に気付いたが、下記ののツールを用いるととても簡単そうである。</p><ul><li><a href="https://github.com/felixrieseberg/windows-build-tools" target="_blank" rel="noopener">felixrieseberg/windows-build-tools: Install C++ Build Tools for Windows using npm</a></li></ul><p>普通に以下のようにグローバルインストールするだけで、もろもろセッティングを行ってくれるようだ。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install -g windows-build-tools</span><br></pre></td></tr></table></figure><p>近年はMicrosoftもNode.jsへ色々と投資をしているので、少しずつ改善はしているが…もう一歩という印象は残る。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Windows環境で node.jsのモジュールインストール時にエラーが発生する。&lt;/p&gt;
&lt;p&gt;どうやら原因はC++のコンパイルが動作しないことのようで、これを解消していく。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://overmorrow.hatenabl
      
    
    </summary>
    
    
      <category term="Node.js" scheme="https://log.plyrs.net/tags/Node-js/"/>
    
  </entry>
  
  <entry>
    <title>Firefoxのマルチプロセス-e10s-を強制有効化</title>
    <link href="https://log.plyrs.net/2017/05/27/Firefox%E3%81%AE%E3%83%9E%E3%83%AB%E3%83%81%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9-e10s-%E3%82%92%E5%BC%B7%E5%88%B6%E6%9C%89%E5%8A%B9%E5%8C%96.html"/>
    <id>https://log.plyrs.net/2017/05/27/Firefoxのマルチプロセス-e10s-を強制有効化.html</id>
    <published>2017-05-26T15:23:25.000Z</published>
    <updated>2018-05-14T15:24:14.332Z</updated>
    
    <content type="html"><![CDATA[<p>e10s未対応のレガシーなアドオンがインストールされている環境でも強制的に有効にする。</p><p><code>about:config</code> をいじる必要があり。<br><code>extensions.e10sBlocksEnabling</code> と <code>extensions.e10sBlockedByAddons</code> を <code>false</code> へ。<br>その後Firefoxを再起動すると有効化された。</p><p>これによってFirefoxが不安定になるかは様子見。</p><ul><li><a href="https://blog.halpas.com/archives/10990" target="_blank" rel="noopener">【Firefox】アドオンにより無効となったe10sを強制的に有効とする方法 | ハルパス</a></li></ul>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;e10s未対応のレガシーなアドオンがインストールされている環境でも強制的に有効にする。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;about:config&lt;/code&gt; をいじる必要があり。&lt;br&gt;&lt;code&gt;extensions.e10sBlocksEnabling&lt;/code&gt; と &lt;
      
    
    </summary>
    
    
      <category term="Firefox" scheme="https://log.plyrs.net/tags/Firefox/"/>
    
  </entry>
  
  <entry>
    <title>React Date-picker</title>
    <link href="https://log.plyrs.net/2017/05/13/ReactDate-picker.html"/>
    <id>https://log.plyrs.net/2017/05/13/ReactDate-picker.html</id>
    <published>2017-05-12T15:18:01.000Z</published>
    <updated>2018-05-16T16:55:29.760Z</updated>
    
    <content type="html"><![CDATA[<p>Date-picker機能を実装するにあたり、Reactコンポーネントを含め調査を行った。</p><ul><li><a href="http://qiita.com/193/items/61b81ea718d70b6197e1" target="_blank" rel="noopener">reactのdate-pickerを選ぶ - Qiita</a></li><li><a href="https://github.com/Hacker0x01/react-datepicker" target="_blank" rel="noopener">Hacker0x01/react-datepicker: A simple and reusable datepicker component for React</a>（採用）</li><li><a href="https://github.com/Rudeg/react-input-calendar" target="_blank" rel="noopener">Rudeg/react-input-calendar</a>（すんなり使えなかった）</li></ul><p>HTML標準のinput要素のtype属性「date」のPolyfillもいくつか見つかった。</p><ul><li><a href="https://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html" target="_blank" rel="noopener">Input type=”date” polyfill (date picker) - Working examples - Web Experience Toolkit</a></li><li><a href="https://github.com/jcgertig/date-input-polyfill" target="_blank" rel="noopener">jcgertig/date-input-polyfill: Automatically adds datepickers to input[type=date] on IE, Firefox, and OS X Safari.</a></li><li><a href="https://github.com/chemerisuk/better-dateinput-polyfill" target="_blank" rel="noopener">chemerisuk/better-dateinput-polyfill: input[type=date] polyfill for better-dom</a></li></ul><p>Firefoxは次期バージョンでChromeライクなDate-pickerが利用できるが、現時点ではまだ未対応。<br>これらのポリフィルを採用してもよかったが…統一したUIの提供を優先し、今回はReactコンポーネントを利用した。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Date-picker機能を実装するにあたり、Reactコンポーネントを含め調査を行った。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://qiita.com/193/items/61b81ea718d70b6197e1&quot; target=&quot;_blank&quot; rel=
      
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://log.plyrs.net/tags/JavaScript/"/>
    
      <category term="React" scheme="https://log.plyrs.net/tags/React/"/>
    
  </entry>
  
  <entry>
    <title>Instagram　API</title>
    <link href="https://log.plyrs.net/2017/03/30/InstagramAPI.html"/>
    <id>https://log.plyrs.net/2017/03/30/InstagramAPI.html</id>
    <published>2017-03-30T10:55:48.000Z</published>
    <updated>2018-05-13T10:59:28.861Z</updated>
    
    <content type="html"><![CDATA[<p>Instagram APIを使用したフィード表示を実装してみた。</p><p>参考文献は以下、情報は多々見つかった。</p><ul><li><a href="http://qiita.com/NoriakiOshita/items/71800502fca62d9ec685" target="_blank" rel="noopener">Instagram APIの利用方法 - Qiita</a></li><li><a href="http://thisisstandarz.com/instagram%E3%81%AEuser-id%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/" target="_blank" rel="noopener">instagramのuser idを取得する方法</a></li><li><a href="https://medium.com/@bkwebster/how-to-get-instagram-api-access-token-and-fix-your-broken-feed-c8ad470e3f02" target="_blank" rel="noopener">How to get Instagram API access token and fix your broken feed</a></li><li><a href="http://qiita.com/takashings/items/f03eb9e2ba343878d287" target="_blank" rel="noopener">【保存版】Instagramの審査の流れ、手順、必要なものまとめ - Qiita</a></li><li><a href="https://capotast.co.jp/article/detail/21/" target="_blank" rel="noopener">Instagram APIを使ってWEBサイトに写真を表示させてみよう｜株式会社カポタスト</a></li><li><a href="http://qiita.com/uda0922/items/0c111d3e312b1dc5d6e8" target="_blank" rel="noopener">Instagram APIをPHPでさくっと使う - Qiita</a></li></ul><p>今回はPHPを開始実装を行った。<br>コードは代替、このような感じである。</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line"></span><br><span class="line">$myAccessToken = <span class="string">'00000000000000000000'</span>;</span><br><span class="line">$user_id = <span class="string">'0000000000'</span>;</span><br><span class="line"></span><br><span class="line">$json = file_get_contents(<span class="string">'https://api.instagram.com/v1/users/'</span>.$user_id.<span class="string">'/media/recent/?access_token='</span>.$myAccessToken);</span><br><span class="line"></span><br><span class="line">$obj = json_decode($json);</span><br><span class="line"></span><br><span class="line"><span class="keyword">foreach</span>($obj-&gt;data <span class="keyword">as</span> $data)&#123;</span><br><span class="line">    <span class="keyword">echo</span> <span class="string">'&lt;img src="'</span>.$data-&gt;images-&gt;low_resolution-&gt;url.<span class="string">'" alt=""&gt;'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure><p>自アカウントの情報を載せる分にはそれほどハードルは高くなさそうであるが、<br>それ以上を行うとなると手続きはかなり面倒そうである。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Instagram APIを使用したフィード表示を実装してみた。&lt;/p&gt;
&lt;p&gt;参考文献は以下、情報は多々見つかった。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://qiita.com/NoriakiOshita/items/71800502fca62d9ec6
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>WordPressとlazysizes</title>
    <link href="https://log.plyrs.net/2017/03/04/Wordpress%E3%81%A8lazysizes.html"/>
    <id>https://log.plyrs.net/2017/03/04/Wordpressとlazysizes.html</id>
    <published>2017-03-04T10:51:54.000Z</published>
    <updated>2018-05-16T16:30:08.374Z</updated>
    
    <content type="html"><![CDATA[<p>Wordpressの記事内の画像読み込みを遅延化したい。<br>少し調べてみたところ、以下の記事が参考になった。<br>方法はいくつかあるようなので…少し吟味が必要である。</p><p><a href="http://codingmemos.hatenablog.com/entry/2016/09/28/100651" target="_blank" rel="noopener">wordpressにおけるレスポンシブイメージに対するlazyload対策 - Coding Memos</a><br><a href="https://github.com/aFarkas/wp-lazysizes" target="_blank" rel="noopener">aFarkas/wp-lazysizes: Brings lazySizes.js to WordPress</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Wordpressの記事内の画像読み込みを遅延化したい。&lt;br&gt;少し調べてみたところ、以下の記事が参考になった。&lt;br&gt;方法はいくつかあるようなので…少し吟味が必要である。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://codingmemos.hatenablog.com/
      
    
    </summary>
    
    
      <category term="WordPress" scheme="https://log.plyrs.net/tags/WordPress/"/>
    
  </entry>
  
  <entry>
    <title>Conoha VPS(CentOS7)へ WordPressを導入</title>
    <link href="https://log.plyrs.net/2016/12/19/ConohaVPS(CentOS7)%E3%81%B8Wordpress%E3%82%92%E5%B0%8E%E5%85%A5.html"/>
    <id>https://log.plyrs.net/2016/12/19/ConohaVPS(CentOS7)へWordpressを導入.html</id>
    <published>2016-12-19T10:48:27.000Z</published>
    <updated>2018-05-16T16:30:36.064Z</updated>
    
    <content type="html"><![CDATA[<p>Conoha VPS上のCentOS 7へWordPressを導入する機会があったのでメモ。</p><ul><li><a href="https://hack-le.com/conohawp/" target="_blank" rel="noopener">ConoHaのVPS上で CentOS 7 + nginx + WordPress 構築まで – 或る阿呆の記</a></li><li><a href="https://www.conoha.jp/guide/wordpress.php" target="_blank" rel="noopener">WordPressをインストールしてブログを作る｜VPSならConoHa</a></li><li><a href="https://maruhoi.com/server/how-to-create-blog/" target="_blank" rel="noopener">VPSのConohaにWordPressを導入して公開するまでの方法</a></li></ul><p>用意されているテンプレートを活用できれば手軽で早そうである。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Conoha VPS上のCentOS 7へWordPressを導入する機会があったのでメモ。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://hack-le.com/conohawp/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;ConoHa
      
    
    </summary>
    
    
      <category term="WordPress" scheme="https://log.plyrs.net/tags/WordPress/"/>
    
  </entry>
  
  <entry>
    <title>Subversion</title>
    <link href="https://log.plyrs.net/2016/03/25/Subversion.html"/>
    <id>https://log.plyrs.net/2016/03/25/Subversion.html</id>
    <published>2016-03-25T10:44:47.000Z</published>
    <updated>2018-05-13T10:46:17.342Z</updated>
    
    <content type="html"><![CDATA[<p>最近、Subversionを採用しているプロジェクトに携わっている。<br>今までGit しか使ったことがないにわかなので、とりあえずGit との文化や考え方の違いを色々感じている。</p><ul><li><a href="http://tracpath.com/bootcamp/learning_subversion.html" target="_blank" rel="noopener">Subversion の基礎勉強 ~ Subversion によるバージョン管理 ~ — バージョン管理システム入門(初心者向け)</a></li><li><a href="https://osdn.jp/svn/" target="_blank" rel="noopener">Subversion（svn）によるソフトウェア開発を始めよう - OSDN</a></li><li><a href="http://qiita.com/mountcedar/items/e756bb9136e3b1722bb2" target="_blank" rel="noopener">今更聞けないSubversionの使い方 - Qiita</a></li></ul><p>今のところは、ちょっと難儀じゃのう…という印象である。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;最近、Subversionを採用しているプロジェクトに携わっている。&lt;br&gt;今までGit しか使ったことがないにわかなので、とりあえずGit との文化や考え方の違いを色々感じている。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://tracpath.com/boo
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>oghliner</title>
    <link href="https://log.plyrs.net/2016/03/17/oghliner.html"/>
    <id>https://log.plyrs.net/2016/03/17/oghliner.html</id>
    <published>2016-03-17T10:41:57.000Z</published>
    <updated>2018-05-16T16:30:46.315Z</updated>
    
    <content type="html"><![CDATA[<p>GithuPagesを作成する際に、Mozillaが開発しているoghlinerを利用してみた。</p><ul><li><a href="https://mozilla.github.io/oghliner/" target="_blank" rel="noopener">Oghliner</a></li></ul><p>まずはモジュールをインストール。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install oghliner -g</span><br></pre></td></tr></table></figure><p>もしくはプロジェクトごとにインストールも可。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ oghliner bootstrap</span><br></pre></td></tr></table></figure><p>実行するとconfigurationを聞かれる。<br>後からでも変更できるのでとりあえず初期値で実行。</p><p>これにより、さくっとオフライン対応のGithubPageを作成できる。<br>類似ツールと比較して、利点などを確認していきたい。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;GithuPagesを作成する際に、Mozillaが開発しているoghlinerを利用してみた。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://mozilla.github.io/oghliner/&quot; target=&quot;_blank&quot; rel=&quot;noopener
      
    
    </summary>
    
    
      <category term="Github" scheme="https://log.plyrs.net/tags/Github/"/>
    
  </entry>
  
  <entry>
    <title>css font-display @font-face</title>
    <link href="https://log.plyrs.net/2016/02/28/cssfont-display-font-face.html"/>
    <id>https://log.plyrs.net/2016/02/28/cssfont-display-font-face.html</id>
    <published>2016-02-28T10:40:43.000Z</published>
    <updated>2018-05-16T16:54:32.361Z</updated>
    
    <content type="html"><![CDATA[<p>Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。</p><ul><li><a href="https://tabatkins.github.io/specs/css-font-display/" target="_blank" rel="noopener">CSS Font Rendering Controls Module Level 1</a></li></ul><p>まずはフラグを有効にする。</p><p>FIrefox のアドレス欄へ<code>about:config</code>と入力し、設定画面を開く。<br>そこで<code>layout.css.font-display.enabled</code>を検索し、値を<code>true</code>へ。これで機能が有効となる。</p><p>Chrome の開発版ではすでに導入されているらしく、下記記事が非常に参考になった。</p><ul><li><a href="https://blog.srytk.com/aquei/50.html" target="_blank" rel="noopener">@font-face(CSS)のfont-displayプロパティがChrome Canaryに来た – 阿Q論</a></li></ul><p>やはりFOUTをネイティブの機能で解決することが期待されるよう。<br>今までは主に Web Font Loader を導入したり、 あと Adobe Blank なんてのもあった気が…。<br>とにかく涙ぐむしい努力をしてきたので人類にとって、これは待望の機能かなと。</p><ul><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1157064" target="_blank" rel="noopener">1157064 – experimental implementation of font-display CSS @font-face descriptor</a></li></ul><p>現時点での実装はスペックの推奨通りでクロームと同様のよう。<br>設定値は<code>fallback</code>がベストで、妥協して<code>block</code>といった感じだろうか。パフォーマンスとユーザビリティの両方にバランスよく配慮できそうである。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'Waiting for the Sunrise'</span>;</span><br><span class="line">    <span class="attribute">font-style</span>: normal;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">    <span class="attribute">font-display</span>: fallback;</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">local</span>(<span class="string">'Waiting for the Sunrise'</span>), <span class="built_in">local</span>(<span class="string">'WaitingfortheSunrise'</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">'../fonts/waiting-for-the-sunrise-v7-latin-regular.woff2'</span>) <span class="built_in">format</span>(<span class="string">'woff2'</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">'../fonts/waiting-for-the-sunrise-v7-latin-regular.woff'</span>) <span class="built_in">format</span>(<span class="string">'woff'</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">'../fonts/waiting-for-the-sunrise-v7-latin-regular.ttf'</span>) <span class="built_in">format</span>(<span class="string">'truetype'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>その他の値も少しの違いながら明確に用途がわかれそうなので、なかなかよくできている感じ。<br><code>will-change</code>のように必要そうな部分へは先行導入しておき、ブラウザの対応を待ってもいいかと。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://tabatkins.github.io/specs/css-font-display/&quot; target=
      
    
    </summary>
    
    
      <category term="CSS" scheme="https://log.plyrs.net/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title>MongoDB 地理空間インデックス</title>
    <link href="https://log.plyrs.net/2016/02/21/MongoDB%E5%9C%B0%E7%90%86%E7%A9%BA%E9%96%93%E3%82%A4%E3%83%B3%E3%83%87%E3%83%83%E3%82%AF%E3%82%B9.html"/>
    <id>https://log.plyrs.net/2016/02/21/MongoDB地理空間インデックス.html</id>
    <published>2016-02-21T10:39:23.000Z</published>
    <updated>2018-05-16T16:36:02.082Z</updated>
    
    <content type="html"><![CDATA[<p>MongoDB にて地理空間のインデックスを作成したい。</p><ul><li><a href="https://docs.mongodb.org/manual/applications/geospatial-indexes/" target="_blank" rel="noopener">Geospatial Indexes and Queries — MongoDB Manual 3.2</a></li></ul><p>インデックスの作成は通常の方法で行えるよう。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 初期状態のインデックスを確認</span></span><br><span class="line">$ db.places.stats()</span><br><span class="line"></span><br><span class="line"><span class="comment"># インデックスを作成</span></span><br><span class="line">$ db.places.createIndex(&#123;Bar: <span class="string">"2dsphere"</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 作成したインデックスを確認</span></span><br><span class="line">$ db.places.getIndexes()</span><br></pre></td></tr></table></figure><p>これでplacesのインデックスがBarのフィールド内に昇順で作成される。<br>平面空間なら<code>2d</code>、球面空間なら<code>2dsphere</code>を使用するらしい。<br>今回は地球という球面空間の経緯度を記録する用途で使用するので、<code>2dsphere</code>となる。<br>ちなみに以前よく使用されていた <code>ensureIndex()</code> は3.0からは非推奨となったよう。今後は基本的に<code>createIndex()</code> を使うらしい。</p><p>ただGeoJsonのデータと通常のインデックスの違いとしてフォーマットが正しくなければ作成できないようなので、下記Linterなどを使用して事前にコレクションがGeoJsonの仕様に準拠しているか確認したほうがよさそう。</p><ul><li><a href="http://geojsonlint.com/" target="_blank" rel="noopener">GeoJSONLint - Validate your GeoJSON</a></li><li><a href="http://qiita.com/fetaro/items/7f110f18c6dd9ccd0c90" target="_blank" rel="noopener">MongoDBの地理空間インデックス・クエリ整理 - Qiita</a></li><li><a href="http://kozy4324.github.io/blog/2012/06/19/mongodb-index/" target="_blank" rel="noopener">MongoDB Index基本 - /var/log/kozy4324</a></li><li><a href="https://docs.mongodb.org/manual/core/geospatial-indexes/" target="_blank" rel="noopener">2d Index Internals — MongoDB Manual 3.2</a></li><li><a href="http://stackoverflow.com/questions/25968592/difference-between-createindex-and-ensureindex-in-java-using-mongodb" target="_blank" rel="noopener">Difference between createIndex() and ensureIndex() in java using mongodb - Stack Overflow</a></li></ul>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;MongoDB にて地理空間のインデックスを作成したい。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://docs.mongodb.org/manual/applications/geospatial-indexes/&quot; target=&quot;_blank&quot; rel=
      
    
    </summary>
    
    
      <category term="MongoDB" scheme="https://log.plyrs.net/tags/MongoDB/"/>
    
  </entry>
  
  <entry>
    <title>MogoDB 3.0 =&gt; 3.2</title>
    <link href="https://log.plyrs.net/2016/02/21/MogoDB3-0-3-2.html"/>
    <id>https://log.plyrs.net/2016/02/21/MogoDB3-0-3-2.html</id>
    <published>2016-02-21T10:38:08.000Z</published>
    <updated>2018-05-16T16:31:05.805Z</updated>
    
    <content type="html"><![CDATA[<p>開発環境のMongoDB（3.0）を3.2へアップデートした。<br>MogoDBを使ている以上はストレージエンジンをWiredTiger へ移行したいが、どうやら3.2 では<a href="https://docs.mongodb.org/manual/release-notes/3.2-compatibility/#default-storage-engine-change" target="_blank" rel="noopener">デフォルトで有効</a>となる模様。</p><ul><li><a href="https://docs.mongodb.org/manual/release-notes/3.2-upgrade/" target="_blank" rel="noopener">Upgrade MongoDB to 3.2 — MongoDB Manual 3.2</a></li></ul><p>これは好都合なので、3.2での動作検証をしっかりと行っていく方向で準備を進めることにした。</p><h2 id="yum-リポジトリを作成"><a href="#yum-リポジトリを作成" class="headerlink" title="yum リポジトリを作成"></a>yum リポジトリを作成</h2><p>MongoDB は既に3.0で運用していたので、今回は直接3.2 へ上げられる。<br>もし2.6以前を使用しているなら一度3.0へと上げなければならない模様。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$ sudo vi /etc/yum.repos.d/mongodb-org-3.2.repo</span><br><span class="line"></span><br><span class="line"><span class="comment">#3.0 を 3.2 へ書き換え</span></span><br><span class="line">[mongodb-org-3.2]</span><br><span class="line">name=MongoDB Repository</span><br><span class="line">baseurl=https://repo.mongodb.org/yum/redhat/<span class="variable">$releasever</span>/mongodb-org/3.2/x86_64/</span><br><span class="line">gpgcheck=0</span><br><span class="line">enabled=1</span><br></pre></td></tr></table></figure><h2 id="インストール"><a href="#インストール" class="headerlink" title="インストール"></a>インストール</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># もし起動しているならMongoを停止</span></span><br><span class="line">$ sudo systemctl stop mongod</span><br><span class="line"></span><br><span class="line"><span class="comment"># 更新を確認</span></span><br><span class="line">$ yum check-update</span><br><span class="line"></span><br><span class="line">mongodb-org.x86_64                   3.2.3-1.el7                 Mongodb-org-3.2</span><br><span class="line">mongodb-org-mongos.x86_64            3.2.3-1.el7                 Mongodb-org-3.2</span><br><span class="line">mongodb-org-server.x86_64            3.2.3-1.el7                 Mongodb-org-3.2</span><br><span class="line">mongodb-org-shell.x86_64             3.2.3-1.el7                 Mongodb-org-3.2</span><br><span class="line">mongodb-org-tools.x86_64             3.2.3-1.el7                 Mongodb-org-3.2</span><br><span class="line"></span><br><span class="line"><span class="comment"># 実行</span></span><br><span class="line">$ sudo yum update</span><br></pre></td></tr></table></figure><p>これで最新のMongoDB3.2 系が入った。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mongo を起動</span></span><br><span class="line">$ sudo systemctl start mongod</span><br><span class="line"></span><br><span class="line"><span class="comment"># バージョンを確認</span></span><br><span class="line">$ mongo --version</span><br><span class="line"></span><br><span class="line">MongoDB shell version: 3.2.3</span><br></pre></td></tr></table></figure><p>早速Webアプリを起動しなおした感じでは、今のところ問題は発生してない。<br>色々な記事やデータを見る限り性能が上がるのは間違いなさそうなので、テスト結果をしっかりと確認・整備して作業を進めたい。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;開発環境のMongoDB（3.0）を3.2へアップデートした。&lt;br&gt;MogoDBを使ている以上はストレージエンジンをWiredTiger へ移行したいが、どうやら3.2 では&lt;a href=&quot;https://docs.mongodb.org/manual/release-
      
    
    </summary>
    
    
      <category term="MongoDB" scheme="https://log.plyrs.net/tags/MongoDB/"/>
    
  </entry>
  
  <entry>
    <title>WebP</title>
    <link href="https://log.plyrs.net/2016/02/20/WebP.html"/>
    <id>https://log.plyrs.net/2016/02/20/WebP.html</id>
    <published>2016-02-20T10:36:50.000Z</published>
    <updated>2018-05-13T10:37:28.039Z</updated>
    
    <content type="html"><![CDATA[<p>WebP を導入するべく簡易Modenizr もどきを使用してフォールバックを行った。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkWebpSupport</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="meta">    "use strict"</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> html = <span class="built_in">document</span>.documentElement,</span><br><span class="line">          WebP = <span class="keyword">new</span> Image();</span><br><span class="line"></span><br><span class="line">    WebP.onload = WebP.onerror = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> isSupported = (WebP.width &gt; <span class="number">0</span> &amp;&amp; WebP.height &gt; <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (isSupported) &#123;</span><br><span class="line">            <span class="keyword">if</span> (html.className.indexOf(<span class="string">'no-webp'</span>) &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">                html.className = html.className.replace(<span class="regexp">/\bno-webp\b/</span>, <span class="string">'webp'</span>);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                html.className += <span class="string">' webp'</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        fn(isSupported);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    WebP.src = <span class="string">'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>これをロード時に読み込ますことでhtml に付与されたクラスを切り替える。</p><ul><li><a href="https://developers.google.com/speed/webp/faq" target="_blank" rel="noopener">Frequently Asked Questions  |  WebP  |  Google Developers</a></li><li><a href="https://gist.github.com/ymatuhin/a9601bd608b8de4e4dcc" target="_blank" rel="noopener">Check WebP Support in browser</a></li></ul><p>他にNginx によるフォールバックの実装例も見つけた。</p><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">location</span> = /logo &#123;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$http_accept</span> <span class="regexp">~* "webp")</span> &#123;</span><br><span class="line">        <span class="attribute">add_header</span> Vary Accept;</span><br><span class="line">        <span class="attribute">rewrite</span> (.*) <span class="variable">$1</span>.webp <span class="literal">last</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">if</span> (<span class="variable">$http_user_agent</span> <span class="regexp">~* "(Chrome|Opera|Android|Android.*Chrome)")</span> &#123;</span><br><span class="line">        <span class="attribute">add_header</span> Vary User-Agent;</span><br><span class="line">        <span class="attribute">rewrite</span> (.*) <span class="variable">$1</span>.webp <span class="literal">last</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attribute">rewrite</span> (.*) <span class="variable">$1</span>.png <span class="literal">last</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><a href="https://gist.github.com/mosson/e0c25513cf65963807ee" target="_blank" rel="noopener">webp compatible on nginx</a></li></ul><p>これは単純にUAを判別し、拡張しを書き換える手法のよう。</p><p>CSSのimage-setもHTMLの様にフォーマットによる切り替えができれば、こんな回りくどいことしなくていいのだが…。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;WebP を導入するべく簡易Modenizr もどきを使用してフォールバックを行った。&lt;/p&gt;
&lt;figure class=&quot;highlight js&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/spa
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>cssnano</title>
    <link href="https://log.plyrs.net/2016/02/17/cssnano.html"/>
    <id>https://log.plyrs.net/2016/02/17/cssnano.html</id>
    <published>2016-02-17T10:35:52.000Z</published>
    <updated>2018-05-13T10:36:29.435Z</updated>
    
    <content type="html"><![CDATA[<p>cssの圧縮でgulp-minify-cssを利用していたのだが、どうやら開発止めてgulp-cssnanoへと移行を促いしている様子。</p><p>なので早速入れ替えてみた。</p><ul><li><a href="http://cssnano.co/" target="_blank" rel="noopener">cssnano: A modular minifier based on the PostCSS ecosystem</a></li></ul><p>機能盛りだくさんと言いたいところだけど、minify-cssも結構色々やってくれてたので、実際使ってみないと何ともいえなさそう。とりあえずAutoprefixer は内包されているようだ。</p><ul><li><a href="http://cssnano.co/optimisations/" target="_blank" rel="noopener">cssnano: Optimisations</a></li></ul><p>使ってみた感じでは確かに少しサイズも縮小された。結構calcを多用しているので、単純な計算を事前にするのはいい感じ。</p><p>ただ一方でunsafe な機能はしっかり把握して使用しないと危険な匂いが…。<br>特にz-indexの再配置は環境によってはよからぬ影響が出そう。</p><p>効能と副作用をしっかり把握して使用していきたい。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;cssの圧縮でgulp-minify-cssを利用していたのだが、どうやら開発止めてgulp-cssnanoへと移行を促いしている様子。&lt;/p&gt;
&lt;p&gt;なので早速入れ替えてみた。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://cssnano.co/&quot; targe
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>LetsEncryptとhttp2とNodeと</title>
    <link href="https://log.plyrs.net/2016/02/17/LetsEncrypt%E3%81%A8http2%E3%81%A8Node%E3%81%A8.html"/>
    <id>https://log.plyrs.net/2016/02/17/LetsEncryptとhttp2とNodeと.html</id>
    <published>2016-02-17T10:32:19.000Z</published>
    <updated>2018-05-13T10:35:05.167Z</updated>
    
    <content type="html"><![CDATA[<p>CloudFlare を利用してTLS化していたサイトを、Let’s Encrypt へ移行した。</p><p>参考にした記事ではWebroot プラグインを使用し、サーバーを停止せずに行う手法が多数でしたが、僕の環境（Node.js）だと少しハマったのでStandalone で取得を行った。</p><p>まずはCloudFlare を停止し、Aレコードを直接サーバーへ設定。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># gitで取得</span></span><br><span class="line">$ sudo git <span class="built_in">clone</span> https://github.com/letsencrypt/letsencrypt /opt/letsencrypt</span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Nginx を停止</span></span><br><span class="line">$ sudo systemctl stop nginx</span><br><span class="line"></span><br><span class="line"><span class="comment"># 80番ポートが塞がれていないかチャック</span></span><br><span class="line">$ netstat -na | grep <span class="string">':80.*LISTEN'</span></span><br></pre></td></tr></table></figure><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> Let<span class="string">' sencrypt フォルダへ移動</span></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> /opt/letsencrypt</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> Stndalone プラグインを実行</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> ./letsencrypt-auto certonly --standalone</span></span><br></pre></td></tr></table></figure><p>情報を入力し規約に同意して完了。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ sudo ls /etc/letsencrypt/live/your_domain_nam</span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Nginx を起動</span></span><br><span class="line">$ sudo systemctl start nginx</span><br></pre></td></tr></table></figure><p>導入のさいに参考となった文献は以下など。</p><ul><li><a href="http://qiita.com/sak_2/items/ff835b669c0a7e110b09" target="_blank" rel="noopener">光の速さのWEBサーバー(nginx)をlet’s encryptでSSL化及びHTTP/2化。ついでにセキュリティ評価をA＋にする。 - Qiita</a></li><li><a href="http://inside.pixiv.net/entry/2015/12/10/153114" target="_blank" rel="noopener">Let’s EncryptとnginxでHTTP/2サーバを立てる - pixiv inside</a></li><li><a href="http://aeas44.tumblr.com/post/138777257395/centos-7-%E3%81%AE-nginx-%E3%81%B8%E3%81%AE-lets-encrypt-%E3%81%AE%E5%B0%8E%E5%85%A5" target="_blank" rel="noopener">aeas44 — CentOS 7 の Nginx への Let’s Encrypt の導入</a></li><li><a href="https://blog.ymyzk.com/2016/02/nginx-config-for-lets-encrypt/" target="_blank" rel="noopener">Let’s Encrypt で証明書を発行して運用するための nginx の設定 - 意識低い開発者のBlog</a></li><li><a href="http://blog.argteam.com/coding/hardening-node-js-for-production-part-2-using-nginx-to-avoid-node-js-load/" target="_blank" rel="noopener">Hardening node.js for production part 2: using nginx to avoid node.js load | Arg! Team Blog</a></li><li><a href="https://gist.github.com/vodolaz095/8373960" target="_blank" rel="noopener">NGINX Config for nodejs application with nginx serving assets and socket.io support</a></li></ul><p>また、証明書の更新は以下の手順で行う。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># nginxを停止(80番ポートを開ける)</span></span><br><span class="line">$ sudo systemctl stop nginx</span><br><span class="line"></span><br><span class="line"><span class="comment"># 更新</span></span><br><span class="line">$ ./letsencrypt-auto renew</span><br><span class="line"></span><br><span class="line"><span class="comment"># nginxを起動</span></span><br><span class="line">$ sudo systemctl start nginx</span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;CloudFlare を利用してTLS化していたサイトを、Let’s Encrypt へ移行した。&lt;/p&gt;
&lt;p&gt;参考にした記事ではWebroot プラグインを使用し、サーバーを停止せずに行う手法が多数でしたが、僕の環境（Node.js）だと少しハマったのでStandalo
      
    
    </summary>
    
    
  </entry>
  
</feed>