BeautifulSoup以外でのスクレイピング

Tomcat + Nginx + MariaDbに設定しよ(CentOS 7)

<p>商品やサービスを紹介するためにアニメーションを使った映像が活用されますが、イラストを動かしてアニメーションを作成するのは結構骨の折れる作業です。</p>
<p>キャラクターを登場させて、説明させるような場合は1フレームずつ画を作らなくてはいけない事もあります。</p>
<p>そこで少しでも簡単にキャラクターをキャラクターを動かすことはできないかな？とリサーチしたところ、「どうやらadobe Animateが良さそうだぞ」という所にたどり着きました。</p>
<h2>adobe Animateってなに？</h2>
<p>そもそも何じゃそりゃ？ということですが、元の名前は「Adobe Flash Professional」でした。</p>
<p>「Flashは完全に消える事に…」というようなタイトルの記事がここ数か月のうちにたくさん出ていたので、これから始めるのはリスクがあるかなと思ったのですが、最近ではアニメ制作会社の一部でも使用しているとの事だったので、とりあえずどんな物か調べてみることに。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13242" src="/uploads-archive/2017/09/1.jpg" alt="" width="640" height="348" srcset="/uploads-archive/2017/09/1.jpg 640w, /uploads-archive/2017/09/1-300x163.jpg 300w, /uploads-archive/2017/09/1-228x124.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>簡単にいうとFlashで良く行われていたアニメーションやゲームをHTML5やwebGlで吐き出せるというアプリケーションです。</p>
<p>そういえば、なぜadobe Animateが良さそうだと思ったかというと、1コマずつ作成しなくても、初めと終わりを設定すれば途中の画は自動で作ってくれるという、素晴らしい機能があります。</p>
<h2>アニメーションをpremiereに取り込む方法</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13265" src="/uploads-archive/2017/09/2.jpg" alt="" width="640" height="554" srcset="/uploads-archive/2017/09/2.jpg 640w, /uploads-archive/2017/09/2-300x260.jpg 300w, /uploads-archive/2017/09/2-228x197.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>書き出しから「ムービーの書き出し」を選択します。</p>
<p>premiere側はメディアの読み込み時に一番最初の画像を選択して、画像シーケンスにチェックを入れれば読み込む事ができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


「adobe animate CC」が結構使える！Premiereにアニメーションを読み込む方法

<p>今や、webサイトの開発・制作には欠かせない存在といっても過言ではないchromeのデベロッパーツールですが、<br />
もしかしたら意外と知られてないかもしれないという機能を紹介したいと思います。<br />
こんなの当たり前だよ！って感じでしたらすみません&#8230;</p>
<p>早速紹介したいと思いますが、chromeのデベロッパーツール自体の説明については省略させて頂きます。<br />
一応初心者向けの方を対象にした記事を貼っておきます。</p>
<p><a href="https://saruwakakun.com/html-css/basic/chrome-dev-tool">初心者向け！Chromeの検証機能（デベロッパーツール）の使い方</a><br />
&nbsp;<br />
記事にもありますが、<br />
ツールを開くにはショートカットも使用でき、<br />
<strong>「option」 + 「command」 + 「i」</strong>(Macの場合)<br />
<strong>「F12」</strong>(Windowsの場合)<br />
で開くことができます。</p>
<ol>
<li><a href="#i1">テーマ変更</a></li>
<li><a href="#i2">ルーラー表示</a></li>
<li><a href="#i3">要素の疑似状態を確認</a></li>
<li><a href="#i4">背景画像のチェック</a></li>
<li><a href="#i5">検証ツール表示の時だけできる「再読み込み」</a></li>
<li><a href="#i6">使用していないcssやjavascriptをチェック</a></li>
<li><a href="#i7">デバイスモード(PC)</a></li>
<li><a href="#i8">キャプチャを撮る</a></li>
</ol>
<p>&nbsp;</p>
<h2 id="i1">1.テーマ変更</h2>
<p>テーマといっても通常白い画面を黒に変更するといっただけです。<br />
ツールを開いている状態で、右上の「︙」をクリックして表示される「<strong>Setting</strong>」を選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13212" src="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png" alt="" width="448" height="324" srcset="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png 723w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-300x217.png 300w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-228x165.png 228w" sizes="(max-width: 448px) 100vw, 448px" /><br />
※すでに黒くしている画面です</p>
<p>Setting画面の<strong>PreferencesのAppearance</strong>の項目で、<br />
<strong>Theme</strong>というのがあるので、それをDarkに変更するだけでOKです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13213" src="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png" alt="" width="453" height="330" srcset="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png 716w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-300x219.png 300w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-228x166.png 228w" sizes="(max-width: 453px) 100vw, 453px" /></p>
<p>ターミナルに慣れている人にはこの黒い画面が良かったりするかもしれませんね。</p>
<p>&nbsp;</p>
<h2 id="i2">2.ルーラー表示</h2>
<p>ルーラーを表示させることができますが、<br />
先程のテーマ変更の時に表示した<strong>Setting画面のPreferencesのElements</strong>の項目にある、<br />
「Show rulers」にチェックを入れるだけです。<br />
ちょうど上の画像の下のほうに映っています。</p>
<p>チェックを入れると、<br />
ツールを開いてElementsのソースにマウスオーバーしている時に以下のように表示されます。</p>
<p><img decoding="async" loading="lazy" width="1024" height="803" class="alignnone size-large wp-image-13214" src="/uploads-archive/2017/09/5be3024d83687e1e82e760c26ef80c3c-1024x803.png" alt="" /></p>
<p>ツールを開いてたら表示されるようにしてくれたほうが使い勝手がいい気がしますが&#8230;</p>
<p>&nbsp;</p>
<h2 id="i3">3.要素の疑似状態を確認</h2>
<p>要素の疑似状態というのはcssの、<strong>active,hover,focus,visited</strong>のことで、<br />
サイトを実際に触っていなくてもその状態にできるようになります。</p>
<p>疑似状態にさせたいタグを選択して右クリックを押すと以下のパネルが表示されるので任意のものを選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13215" src="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png" alt="" width="451" height="341" srcset="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png 718w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-300x227.png 300w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-228x172.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>右クリックじゃなく、右上にある「<strong>:hov</strong>」をクリックすることでも可能です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13216" src="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png" alt="" width="335" height="150" srcset="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png 335w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-300x134.png 300w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-228x102.png 228w" sizes="(max-width: 335px) 100vw, 335px" /></p>
<p>最近は特にhoverの処理が盛んなので、これは制作時、もしくは他のサイトを見たりする時によく使用します。</p>
<p>&nbsp;</p>
<h2 id="i4">4.背景画像のチェック</h2>
<p>imgタグで置いている画像はElementsのタグをマウスオーバーすればサイズが表示されますが、背景画像では、cssのurlの箇所をマウスオーバーしても表示されません。<br />
その場合は、右クリックを押すと、以下のような項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13217" src="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png" alt="" width="1024" height="363" srcset="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png 1024w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-300x106.png 300w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-768x273.png 768w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-228x81.png 228w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0.png 1834w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これで「<strong>Sources Panel</strong>」もしくは「<strong>Application Panel</strong>」を選択すると、画像の重さやサイズがわかるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13218" src="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png" alt="" width="368" height="286" srcset="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png 702w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-300x233.png 300w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-228x177.png 228w" sizes="(max-width: 368px) 100vw, 368px" /></p>
<p>サイズが0×0に表示されることがあるので。その場合はもう１つの方で見ればわかるかと思います。</p>
<p>&nbsp;</p>
<h2 id="i5">5.検証ツール表示の時だけできる「再読み込み」</h2>
<p>ツールを表示してる時だけ再読込のボタンを長押しすると、違った再読込をすることが出来ます。<br />
「<strong>ハード再読み込み</strong>」と「<strong>キャッシュの消去とハード再読み込み</strong>」の2つができるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13220" src="/uploads-archive/2017/09/4a47bc9754d3131aab52fa5eaad54f0e-1024x756.jpg" alt="" width="688" height="517" /></p>
<p>ハード再読み込みってなんでしょうね&#8230;</p>
<p>キャッシュが残っている、残ってしまいそうな時はこの読み込み方法をするといいかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">使用していないcssやjavascriptをチェック</h2>
<p>ツールを開いてる状態で、console drawerが表示されている時(開いてない場合escボタンを押すと表示されます)<br />
consoleの左になる「<strong>︙</strong>」をクリックすると、以下の項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13228" src="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png" alt="" width="450" height="337" srcset="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png 699w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-300x225.png 300w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-228x171.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>ここで、「<strong>Coverage</strong>」というのを選択すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13229" src="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png" alt="" width="449" height="429" srcset="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png 700w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-300x287.png 300w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-228x218.png 228w" sizes="(max-width: 449px) 100vw, 449px" /></p>
<p>このような画面が出てるので、reloadボタンを押すと、チェックが始まります。<br />
チェック完了すると以下のような画面になります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13230" src="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png" alt="" width="451" height="481" srcset="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png 700w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-282x300.png 282w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-228x243.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>緑が使用されている、赤が使用されていないものになります。<br />
下の画面でファイルを選択すると、上でさらに詳細がわかります。</p>
<p>いらないコードを削除したい場合良いかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">6.デバイスモード</h2>
<p>iPhoneやAndroidのシミュレート出来るのはもうご存知かと思いますが、PCのモードがあるのは意外と知らないのでは？と思ったので紹介します。</p>
<p>Settings画面の「<strong>Devices</strong>」を選択すると、いろんなデバイスを追加出来る画面があります。<br />
この中で、「<strong>Laptop with HiDPI screen</strong>」「<strong>Laptop with MDPI screen</strong>」にチェックをいれるだけです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13221" src="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png" alt="" width="379" height="357" srcset="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png 702w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-300x282.png 300w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-228x215.png 228w" sizes="(max-width: 379px) 100vw, 379px" /></p>
<p>そして、デバイスモードの画面で、モードを変更しようとすると、</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13222" src="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png" alt="" width="1024" height="684" srcset="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png 1024w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-300x200.png 300w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-768x513.png 768w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-228x152.png 228w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972.png 1101w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>追加した2つが表示されており、これで確認することができます。<br />
「<strong>Laptop with HiDPI screen</strong>」は、1440×900<br />
「<strong>Laptop with MDPI screen</strong>」は、1280×800<br />
のサイズで表示してくれます。</p>
<p>PCモードいる？とか最初は思ったのですが、<br />
このサイズで見たい時や、ノートPCしかない時は便利です。</p>
<p>また、HiDPIはRetinaみたいなものなので、<br />
Retina対応のPCでない場合、Retinaでどういう風に見えているかみたいなのがチェック出来るようです(どこまで本物と同じかはわかりませんが&#8230;)</p>
<p>&nbsp;</p>
<h2 id="i7">7.キャプチャを撮る</h2>
<p>キャプチャは拡張機能やfirefoxのアドオンでしかできなかったのですが、<br />
このツールの機能で撮ることができます。</p>
<p>撮り方は私が把握してるのでは2つありますが、<br />
まずは先程紹介したデバイスモードの続きのものを紹介したいと思います。</p>
<p>デバイスモードを開いている時、右上の「<strong>︙</strong>」をクリックすると、以下の項目が出てきます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13224" src="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png" alt="" width="1024" height="660" srcset="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png 1024w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-300x193.png 300w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-768x495.png 768w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-228x147.png 228w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36.png 1169w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>「<strong>Capture screenshot</strong>」もしくは「<strong>Capture full size screenshot</strong>」を選択すればキャプチャが撮れてしまいます。<br />
ただ、フルサイズの場合はサイトによっては上手く撮れない場合があります。</p>
<p>pc.verもスマホ.verも撮れるので便利ですね〜</p>
<p>いちいちデバイスモードにするのが面倒くさいなという方にはもう一つの方法が良いかと思います。</p>
<p>それはツールを表示し、ツール上で<strong>「command」+「shift」+「p」</strong>を押すと、以下のような画面が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13225" src="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png" alt="" width="451" height="366" srcset="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png 703w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-300x244.png 300w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-228x185.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>ここでcapと打つと、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13226" src="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png" alt="" width="450" height="367" srcset="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png 701w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-300x245.png 300w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-228x186.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>先ほどと同じ文言のキャプチャを撮る項目が表示されるので、選択すればOKです！<br />
Mobileと表示されていますが、デバイスモードにしていない時は、PCの見ている画面でキャプチャを撮ることができます。</p>
<p>Chromeのデベロッパーツールでキャプチャを撮ろうと思ったら、<br />
ショートカットでツールを表示して(「command」+「option」+「i」)、<br />
<strong>「command」+「shift」+「p」</strong>を押して、<br />
capと打って、<br />
フルサイズか今開いている画面を選ぶ<br />
の4段階で完了しますね。</p>
<p>まぁちょっとプロセス面倒くさいかもしれないですね笑</p>
<p>今回はちょっとした機能の紹介でしたが、デベロッパーツールはまだまだ機能を持っています。</p>
<p>NetworkやPerformanceで、サイトをもっと速く表示させるためにチェックしたり等、<br />
まだまだ私自身も使いこなせていないので勉強したいと思います。</p>


large_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

medium_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

small_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

thumbnail_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

5be3024d83687e1e82e760c26ef80c3c-1024x803.png

意外と知らないかもしれないchromeのデベロッパーツールの機能

<p>Linuxサーバ上で、特定ディレクトリ以下へのファイルアクセスを監視する需要があったため、inotifyを使ってみることにしました。</p>
<p>inotifyとはLinuxカーネル2.6.13から追加された機能で、平たく言うと、ディスクへの読み書きイベントを通知する機能のことです。Windowsでは昔からディスク・ファイル読み書きイベントの横取りが可能だったこともあり、この機能が2005年まで無かったというのは驚きです。</p>
<p>さて、本題に戻りましょう。yumパッケージマネージャを使ってシステムへインストールします。</p>
<p><code># yum install inotify-tools</code></p>
<p>次はinotifyの起動ですがapacheやvsFTPのようにdaemonサービスとして動作するわけではありません。今回はバックグラウンドプロセスとして、コンソールから起動するようにしました。</p>
<p><code># inotifywait -rdm -o /var/log/inotify.log --format '%T %w%f %e' --timefmt '%F %T' --exclude '/|admin\/' /var/www/html/ &amp;</code></p>
<p>長々とオプションを指定してますが、「/var/www/html/以下で&#8221;/admin/&#8221;を含むディレクトリ以外でディレクトリ・ファイルアクセスが発生したら日時とともにログファイルへ保存する」という動きを定義しました。動作オプション動作オプションとしてrdmの組み合わせが一般的なようです。指定ディレクトリ以下を監視＋デーモンモードとして常時監視＋ループモードとして何度でもイベントを受ける、という意味です。この辺の組み合わせはここに書き切れないので、詳しくは&#8211;helpオプションで。</p>
<p>適当なファイルを作って更新して、消した場合の動作ログはこのような感じになります。</p>
<p><code>2017-09-dd hh:mm:ss /var/www/html/ CREATE test.txt</code><br />
<code>2017-09-dd hh:mm:ss /var/www/html/ MODIFY test.txt</code><br />
<code>2017-09-dd hh:mm:ss /var/www/html/ DELETE test.txt</code></p>
<p>「いつ」「どこで」「なんのファイルが」「どうなったか」が刻々と記録されます。あとはログファイルを監視するzabbix等と連携すれば、ファイル・ディレクトリの監視が行えます。</p>


inotifyを使ってみる

Three.jsでCSS3の3D描画ができた！

Chatworkタスクのリマインド管理

Symfony 2.0 からSymfony2.8まで アップデート

small_02d20a80b9e91d99c12c5823ea60be33.png

thumbnail_02d20a80b9e91d99c12c5823ea60be33.png

02d20a80b9e91d99c12c5823ea60be33.png

Googleスプレッドシートの更新をChatWorkへ通知してみた

前から気になっていたwebサイトの表現を試してみた&#8230;

Symfonyをアップデートしてみる (1)

CSSの3D回転で切り替える画像ビューアを作ってみました

<p>我々が普段生活している中では、気づかないところでコンピュータが生み出す「ランダム（乱数）」にお世話になっています。</p>
<p>スマホのゲームでガチャを回した時、アタリつき自動販売機で飲み物を買った時、モンテカルロ法シミュレーションを実行する時とさまざまです。</p>
<p>20年くらい前に日本人の数学者グループが考案した「メルセンヌツイスタ（MT）」と呼ばれる疑似乱数生成アルゴリズムは多くのプログラミング言語に実装され、今では疑似乱数が欲しいときのデファクトスタンダードになってるんじゃないでしょうか。</p>
<p>疑似乱数とは、乱暴に言っちゃえば「数が出るパターンに周期があるから、厳密には正しくないけど、だいたいランダムな数字の集まり」というものです。詳しいことは専門家の説明を読みましょう。疑似乱数の質はCPUの計算速度とメモリ量で決定するのですが、その中で効率が良い方法のひとつがMTなのです。MTの乱数周期は2<sup>19937</sup>-1と、とても長いので実用に耐えられるわけです。</p>
<p>余談ですが計算資源が貧弱な頃、例えば8bit、16bit時代のテレビゲームは1から255までの数字を良い具合に散らしたテーブルで保持する、なんて無茶をやってます。この場合、乱数列周期2<sup>8</sup>-1非常に短い。</p>
<p>一方、RSA暗号キーの生成など、暗号を作るときには周期性がある疑似乱数を使うと解読される可能性があります。そのため、キーを生成する際に「マウスを無作為に動かせ」「キーボードのキーをしっちゃかめっちゃかに叩け」といった指示が出ていた時代もありました。人為的なランダム入力を乱数の元にしていたわけです。</p>
<p>ところが10年くらい前から、CPUが持つ熱雑音などをもとに暗号化用の乱数がPCのハードウェアから取得できるようになりました。Linux処理系だと/dev/random、/dev/urandomがそれに該当します。</p>
<p>/dev/randomをファイルとして読み出すだけで、システムに溜まっている乱数が手に入ります。ただし、保持している情報量には限りがあるため、次の乱数が生成されるまで「処理をブロッキングする」か「疑似乱数で代用する」という限定条件があります。</p>
<p>前置きが長くなりました。その良質な乱数である/dev/randomがMTの乱数生成の代わりになるかどうか、を簡単なプログラムで検証してみました。</p>
<p>ちなみにphpであれば</p>
<div>


		<div id="crayon-6495402649157027523049" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
hexdec(bin2hex(file_get_contents('/dev/urandom', false, NULL, 0, 4)));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402649157027523049-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402649157027523049-1"><span class="crayon-e">hexdec</span><span class="crayon-sy">(</span><span class="crayon-e">bin2hex</span><span class="crayon-sy">(</span><span class="crayon-e">file_get_contents</span><span class="crayon-sy">(</span><span class="crayon-s">'/dev/urandom'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">NULL</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<p>これで4byte=32bit長の乱数が整数で入手できます。</p>
<p>ひたすらループを繰り返して、乱数を生成するテストプログラムを私のphp開発環境にて実行してみました。</p>
<table>
<tbody>
<tr>
<td>試行回数(回)</td>
<td>MT<br />
(10,000,000回ループ)</td>
<td>/dev/random<br />
(10,000回ループ)</td>
</tr>
<tr>
<td style="text-align: right;">1</td>
<td style="text-align: right;">2.84585</td>
<td style="text-align: right;">9.743988</td>
</tr>
<tr>
<td style="text-align: right;">2</td>
<td style="text-align: right;">2.868848</td>
<td style="text-align: right;">9.796494</td>
</tr>
<tr>
<td style="text-align: right;">3</td>
<td style="text-align: right;">2.865435</td>
<td style="text-align: right;">9.752865</td>
</tr>
<tr>
<td style="text-align: right;">4</td>
<td style="text-align: right;">2.836898</td>
<td style="text-align: right;">10.043154</td>
</tr>
<tr>
<td style="text-align: right;">5</td>
<td style="text-align: right;">2.832968</td>
<td style="text-align: right;">9.751514</td>
</tr>
<tr>
<td style="text-align: right;">6</td>
<td style="text-align: right;">2.866058</td>
<td style="text-align: right;">9.690516</td>
</tr>
<tr>
<td style="text-align: right;">7</td>
<td style="text-align: right;">2.91101</td>
<td style="text-align: right;">9.747249</td>
</tr>
<tr>
<td style="text-align: right;">8</td>
<td style="text-align: right;">2.857296</td>
<td style="text-align: right;">10.180832</td>
</tr>
<tr>
<td style="text-align: right;">9</td>
<td style="text-align: right;">2.856203</td>
<td style="text-align: right;">10.204445</td>
</tr>
<tr>
<td style="text-align: right;">10</td>
<td style="text-align: right;">2.872247</td>
<td style="text-align: right;">10.323912</td>
</tr>
<tr>
<td style="text-align: right;">平均</td>
<td style="text-align: right;">2.8612813</td>
<td style="text-align: right;">9.9234969</td>
</tr>
</tbody>
</table>
<p>結論から言えば、実行速度的に比べる必要もありませんでした。速度差およそ300倍。</p>
<p>しかし、/dev/randomからの乱数取得も実装コストが低いため、用途と利用シーンによっては利用することも検討してよいのでは、と思います。</p>
<p>&nbsp;</p>

その乱数、適切ですか？

wordpressのサーバー移行をphpmyadminを使わずにターミナルでやってみた

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  ドキュメントを作る際にER図を作るのが面倒<br />
  既存のものを参考にしたい</p>
<p>  などのケースがありがちなのでRailsのgemを導入してどんなものかやってみました。</p></div>
<h3>インストール</h3>
<div style="padding-left: 15px;">
  Railsプロジェクト直下のGemfileを以下のように編集します</p>
<p></p>

		<div id="crayon-6495402648c82952385007" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">diff</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  + group :development do
  +   gem 'rails-erd'
  + end</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402648c82952385007-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402648c82952385007-2">2</div><div class="crayon-num" data-line="crayon-6495402648c82952385007-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402648c82952385007-1"><span class="crayon-sy">&nbsp;&nbsp;+ group :development do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402648c82952385007-2"><span class="crayon-sy">&nbsp;&nbsp;+&nbsp;&nbsp; gem 'rails-erd'</span></div><div class="crayon-line" id="crayon-6495402648c82952385007-3"><span class="crayon-sy">&nbsp;&nbsp;+ end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>追加行を差分で示してあります。<br />
  開発時にしか使わないであろう機能なのでdevelopmentモードのみ。</p>
<p>  上記の編集後、bundle install実行</p>

		<div id="crayon-6495402648c87426074982" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">Shell</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  bundle install --path=vendor/bundler</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402648c87426074982-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402648c87426074982-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">bundle </span><span class="crayon-i">install</span><span class="crayon-h"> </span>--<span class="crayon-i">path</span>=<span class="crayon-i">vendor</span>/<span class="crayon-i">bundler</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>以上で終わり。</p></div>
<h3>PDfに出力してみる</h3>
<div style="padding-left: 15px;">
  早速使ってみる。<br />


		<div id="crayon-6495402648c88471984682" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">Shell</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  bundle exec erd</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402648c88471984682-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402648c88471984682-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">bundle </span><span class="crayon-e">exec </span><span class="crayon-i">erd</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<br />
  実行すればプロジェクトディレクトリ直下にerd.pdfが生成されます。</p>
<p>  全容が見えない程度にPDFのスクリーン・ショットが以下のような感じに<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5-300x64.png" alt="" width="300" height="64" class="alignnone size-medium wp-image-12977" srcset="/uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5-300x64.png 300w, /uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5-768x163.png 768w, /uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5-1024x218.png 1024w, /uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5-228x49.png 228w, /uploads-archive/2017/06/b647f1527c445fe41fcfe15b4c90aae5.png 1866w" sizes="(max-width: 300px) 100vw, 300px" /><br />
  とても見づらい。<br />
  RDBの中からすぐ見つからないようなModelリレーションや継承も解らない。<br />
  結論：使えない</p>
<p>  筆者としては以下のようなリレーションの出力を期待していたのですが・・・自作するしかないのかもしれません。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/06/rails_model_relation-300x221.png" alt="" width="300" height="221" class="alignnone size-medium wp-image-12976" srcset="/uploads-archive/2017/06/rails_model_relation-300x221.png 300w, /uploads-archive/2017/06/rails_model_relation-768x566.png 768w, /uploads-archive/2017/06/rails_model_relation-1024x755.png 1024w, /uploads-archive/2017/06/rails_model_relation-228x168.png 228w, /uploads-archive/2017/06/rails_model_relation.png 1465w" sizes="(max-width: 300px) 100vw, 300px" />
</div>

Railsのリレーション関係を記す

<p>少し前に見かけたMilanoteというアプリを紹介します。</p>
<p>一言で言ってしまうと、<br />
<strong>webの掲示板</strong>みたいなものです。</p>
<p><img decoding="async" src="/uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-1024x591.png" alt="" width="100%" class="alignnone size-large wp-image-12951" srcset="/uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-1024x591.png 1024w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-300x173.png 300w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-768x443.png 768w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-228x131.png 228w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191.png 1349w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>ボードに付箋を貼っていく感じのように追加、移動することができます。</p>
<p>記入できるのは、</p>
<ul>
<li>テキスト(この中でリストやtodo式に書くこともできる)</li>
<li>写真</li>
<li>リンク</li>
<li>グループ化(テキストの)</li>
</ul>
<p>あとはボードも複数作れるので、テーマや内容によって分けて使用することができます。</p>
<p>GoodPatchさんも使用しているようです。</p>
<p><a href="http://goodpatch.com/blog/communication-using-milanote/" target="_blank">【チームデザイン】『Milanote』を活用したチーム管理・コミュニケーション方法 | Goodpatch Blog</a></p>
<p><a href="https://www.milanote.com/" target="_blank">Milanote: The notes app for creative work.</a></p>
<p>なにか会社で共有したりするのに使えるかもしれませんね。</p>


クリエイティブワークを促進させるアプリ「Milanote」

small_nino-eye1.jpg

thumbnail_nino-eye1.jpg

nino-eye1.jpg

JSDoc で JavaScript のコメントを書こう

<h2>OAuth認証は</h2>
<p>OAuth認証は指定アプリからパスワードを使わないユーザー情報を収集する<b>オープン標準。</b></p>
<p>今、使うバーションはOAuth2.0。OAuth1.0には大きいSecurity問題が起きてっるため、修復しだが、今ソーシャルメディアはほとんどOAuth2.0を使ってる。</p>
<h2>役割</h2>
<p>OAuth2.0は四つ役割があります</p>
<ul style="list-style-type: circle">
<li><b>リソースオーナー</b>(resource owner)
<ul style="list-style-type: circle">
<li><b>エンドユーザーということ</b></li>
</ul>
</li>
<li><b>リソースサーバー</b> (resource server)
<ul style="list-style-type: circle">
<li>Facebookやyahooや個人情報持っているサイト</li>
</ul>
</li>
<li><b>クライアント</b> (client)
<ul style="list-style-type: circle">
<li>LaunchCartや個人情報を使えたいサービス</li>
</ul>
</li>
<li><b>認可サーバー</b>(authorization server)
<ul style="list-style-type: circle">
<li>OAuth認証（<b>リソースサーバーに置いてるplugin</b>）</li>
</ul>
</li>
</ul>
<h2>認証流れ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="http://www.sinaimg.cn/blog/developer/wiki/oAuth2_01.gif" width="620" height="400" /></p>
<ul>
<li>(A) まずクライアントがリソースオーナーに認可要求（Authorization Request）を出す。図ではクライアントがリソースオーナーに直接要求を出しているが、認可サーバー経由で間接的に要求する事がのぞましい<sup id="cite_ref-rfc1.2_4-1" class="reference"></sup>.</li>
<li>(B) リソースオーナーは認可要求を許可する旨の返答として<b>認可グラント</b>をクライアントに送る。これも認可サーバー経由で行う事がのぞましい<sup id="cite_ref-rfc1.2_4-2" class="reference"></sup></li>
<li>(C) クライアントは認可サーバーに認可グラントを送ることでアクセストークンを要求
<ul>
<li>取られる個人情報を要求する</li>
<li><img decoding="async" loading="lazy" class="alignnone size-medium" src="http://memories.zal.jp/WP/wp-content/uploads/2015/07/b_permissons_05.png" width="509" height="437" /></li>
</ul>
</li>
<li>(D) 認可サーバーはクライアントの認証と認可グラントの正当性の検証を行い、問題なければアクセストークンを発行。</li>
<li>(E)クライアントはアクセストークンにより認証を受けることで、保護されたリソースへのアクセスをリクエスト</li>
<li>(F) アクセストークンが正当なら、クライアントのリクエストを受け入れる</li>
</ul>
<p>&nbsp;</p>
<p>Resources:</p>
<ul>
<li><a href="http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6%E8%AF%B4%E6%98%8E">ウェイボー　OAuth認証説明</a></li>
<li><a href="https://ja.wikipedia.org/wiki/OAuth">Wiki</a></li>
</ul>
<p>&nbsp;</p>


OAuth(オー　オース)認証紹介

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2017/09/13

2017/09/13

2017/09/13

2017/09/12

2017/09/12

2017/08/17

2017/08/10

2017/08/10

2017/08/10

2017/08/10

2017/07/19

2017/07/19

2017/07/19

2017/07/11

2017/06/14

2017/06/14

2017/06/13

2017/06/13