三角Validator 2020-05-02T14:54:31+09:00 lepton9 Hatena::Blog hatenablog://blog/11696248318757084698 p5.jsとml5.jsでWebカメラに写った顔にグリッチエフェクトをかける hatenablog://entry/26006613558611560 2020-05-02T14:54:31+09:00 2020-05-02T15:07:20+09:00 在宅勤務でSnap Cameraが流行っている Snap CameraみたいにWebカメラの映像にエフェクトをかけるの作ってみたい エフェクトかけるならglitchエフェクトかけてみたい 顔だけglitchしたい という謎な思いつきをしてしまったのでやってみた。 気軽に試したいのでjsでなんとかすることにして、glitchエフェクトをかけるのは普段使い慣れてるp5.jsを使うことにする。p5.jsでglitchしてるコードを探していたら https://codepen.io/tksiiii/pen/xdQgJX こんなかっこいいのを見つけたので、このコードを参考にしつつWebカメラのソースに適… <ul> <li>在宅勤務で<a href="https://snapcamera.snapchat.com">Snap Camera</a>が流行っている</li> <li>Snap Cameraみたいに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%AB%A5%E1%A5%E9">Webカメラ</a>の映像にエフェクトをかけるの作ってみたい</li> <li>エフェクトかけるならglitchエフェクトかけてみたい</li> <li>顔だけglitchしたい</li> </ul> <p>という謎な思いつきをしてしまったのでやってみた。</p> <p>気軽に試したいのでjsでなんとかすることにして、glitchエフェクトをかけるのは普段使い慣れてるp5.jsを使うことにする。p5.jsでglitchしてるコードを探していたら</p> <p><a href="https://codepen.io/tksiiii/pen/xdQgJX">https://codepen.io/tksiiii/pen/xdQgJX</a></p> <p>こんなかっこいいのを見つけたので、このコードを参考にしつつ<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%AB%A5%E1%A5%E9">Webカメラ</a>のソースに適用する。 顔認識についてはml5.jsを使ってみる。</p> <h3>ml5.js</h3> <p><a href="https://ml5js.org/">ml5js·Friendly Machine Learning For The Web</a></p> <p>ml5.jsは<a class="keyword" href="http://d.hatena.ne.jp/keyword/google">google</a>が作ってるTensorFlow.jsのwrapperで、細かいことは知らなくてもやりたいことベースで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>の技術を使うことができるようなjsライブラリになってる。今回はFaceAPIを使い、顔を認識して顔エリアの長方形座標や大きさを取得する。</p> <p><a href="https://learn.ml5js.org/docs/#/reference/face-api">FaceApi - ml5 - A friendly machine learning library for the web.</a></p> <p>使い方は上記リンクの<code>Quickstart</code>の通りだけど、</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> faceapi = ml5.faceApi(detectionOptions, modelLoaded); </pre> <p>このコードのようにFaceAPIを初期化するときに、第2引数にコールバックを指定する。コールバックは予め<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>で作成されたモデルの読み込みが完了したタイミングで呼び出される。読み込みは結構時間がかかる。コールバック内では</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink>faceapi.detect(myImage, (err, results) =&gt; <span class="synIdentifier">{</span> <span class="synIdentifier">}</span>); </pre> <p>このように<code>detect</code>すると、顔の識別が完了したタイミングでコールバックが呼び出され、<code>results</code>に顔のエリアの座標や大きさ、顔の各パーツの頂点座標が入ってくる。FaceAPIは複数の顔を認識できるので、<code>results</code>は配列のデータになっていて一つの配列要素が一つの顔のデータに対応する。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">for</span>(<span class="synIdentifier">let</span> i = 0; i &lt; results.length; i++)<span class="synIdentifier">{</span> <span class="synStatement">const</span> box = results<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>.alignedRect._box; <span class="synStatement">const</span> x = box._x; <span class="synStatement">const</span> y = box._y; <span class="synStatement">const</span> width = box._width; <span class="synStatement">const</span> height = box._height; <span class="synIdentifier">}</span> </pre> <p>こんな感じで顔エリアを矩形で表現するための座標、幅、高さを取得できる。 そのほかにも</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">for</span>(<span class="synIdentifier">let</span> i = 0; i &lt; results.length; i++)<span class="synIdentifier">{</span> <span class="synStatement">const</span> mouth = results<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>.parts.mouth; <span class="synStatement">for</span>(<span class="synIdentifier">let</span> j = 0; j &lt; mouth; j++)<span class="synIdentifier">{</span> <span class="synStatement">const</span> x = mouth<span class="synIdentifier">[</span>j<span class="synIdentifier">]</span>._x <span class="synStatement">const</span> y = mouth<span class="synIdentifier">[</span>j<span class="synIdentifier">]</span>._y <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> </pre> <p>とすることで、口の各頂点座標が取得できたりする。この頂点を線で結ぶことで口の形になる。両眉毛、両目、鼻の頂点座標も同様に取得できる。</p> <p>p5.jsとml5.jsで<a class="keyword" href="http://d.hatena.ne.jp/keyword/webcam">webcam</a>の映像から顔を認識するコードについては</p> <p><a href="https://editor.p5js.org/ml5/sketches/FaceApi_Video_Landmarks">p5.js Web Editor | FaceApi_Video_Landmarks</a></p> <p>これが参考になると思う。ポイントは</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink>video = createCapture(VIDEO); </pre> <p>で作ったvideoを、FaceAPIの初期化関数の第一引数にいれるところ。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink>faceapi = ml5.faceApi(video, detection_options, modelReady) </pre> <p>モデル読み込み完了時に呼ばれるコールバックの中身も見ておくと</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synIdentifier">function</span> modelReady() <span class="synIdentifier">{</span> faceapi.detect(gotResults) <span class="synIdentifier">}</span> <span class="synIdentifier">function</span> gotResults(err, result) <span class="synIdentifier">{</span> <span class="synComment">// いろいろやる</span> faceapi.detect(gotResults) <span class="synIdentifier">}</span> </pre> <p>顔を識別したタイミングでコールバックが走り、処理が終わったら再度顔を識別する、というように繰り返し識別処理が走る。p5.jsのdraw関数だと毎フレーム処理が走ってしまうので、もしdraw関数内で<code>detect</code>した場合、顔識別が終わる前に次の顔識別が走ったりしてしまうと思う。draw関数は使わずに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%C6%B5%A2">再帰</a>でやるほうがマシンにやさしそう。<a href="#f-43c8457f" name="fn-43c8457f" title="ただし再帰だけでやる場合は、顔を認識しない限り映像が止まる。">*1</a></p> <h3>GLSL</h3> <p>今回は顔のエリアだけにエフェクトをかけたいので、上記の<code>detect</code>で取得できる座標と大きさの範囲を加工する。しかし素直にp5.jsで実装してみたら重すぎてカメラの映像が固まってしまった。カメラ解像度分の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%BB%A5%EB">ピクセル</a>一つ一つに対して色情報を変更していく処理を1秒間に数十回繰り返すので、直列に処理していくCPUでは厳しいのだろう。</p> <p>こういうときはそれぞれの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%BB%A5%EB">ピクセル</a>(テクセル)に対して<a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a>を使って並列に処理をしていけるシェーダーを作ると良いらしい。</p> <p>シェーダーについては知識0だったけど、p5.jsを使ってシェーダーを学んでいける下のサイトがとてもわかり易かった。</p> <p><a href="https://itp-xstory.github.io/p5js-shaders/#/">Introduction to p5.js shaders - p5.js shaders</a></p> <p>シェーダーはGLSLという言語で書いていく。 最初に貼った<a href="https://codepen.io/tksiiii/pen/xdQgJX">codepenのGlitchエフェクト</a>では4種類のエフェクトが使われている。4つのエフェクトを一つのフラグメントシェーダーで再現するのは中々骨が折れるので、4つのフラグメントシェーダーを使ってそれぞれのシェーダーで一つのエフェクトをかけていって重ねがけすることにした。</p> <p>複数のシェーダーを重ねがけする方法については、p5.jsのshader exampleにあるMulti-Pass <a class="keyword" href="http://d.hatena.ne.jp/keyword/Blur">Blur</a>のコードを参考にした。</p> <p><a href="https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-10_two-pass-blur/sketch.js">p5jsShaderExamples/sketch.js at gh-pages · aferriss/p5jsShaderExamples</a></p> <p>コードの要点だけを書くとこんな感じ。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synIdentifier">function</span> preload()<span class="synIdentifier">{</span> <span class="synComment">// load the shaders, we will use the same vertex shader and frag shaders for both passes</span> blurH = loadShader(<span class="synConstant">'base.vert'</span>, <span class="synConstant">'blur.frag'</span>); blurV = loadShader(<span class="synConstant">'base.vert'</span>, <span class="synConstant">'blur.frag'</span>); <span class="synIdentifier">}</span> <span class="synIdentifier">function</span> setup() <span class="synIdentifier">{</span> <span class="synComment">//初期化処理</span> <span class="synComment">// initialize the createGraphics layers</span> pass1 = createGraphics(windowWidth, windowHeight, WEBGL); pass2 = createGraphics(windowWidth, windowHeight, WEBGL); <span class="synComment">// noStrokeとかする</span> <span class="synIdentifier">}</span> <span class="synIdentifier">function</span> draw() <span class="synIdentifier">{</span> <span class="synComment">// カメラ映像をテクスチャとして最初のシェーダーに渡す</span> blurH.setUniform(<span class="synConstant">'tex0'</span>, cam); <span class="synComment">// we need to make sure that we draw the rect inside of pass1</span> pass1.rect(0,0,width, height); <span class="synComment">// set the shader for our second pass</span> pass2.shader(blurV); <span class="synComment">// エフェクトをかけたpass1のテクスチャを次のシェーダーに渡す</span> blurV.setUniform(<span class="synConstant">'tex0'</span>, pass1); <span class="synComment">// again, make sure we have some geometry to draw on in our 2nd pass</span> pass2.rect(0,0,width, height); <span class="synComment">// draw the second pass to the screen</span> image(pass2, 0,0, width, height); <span class="synIdentifier">}</span> </pre> <p>エフェクトをかけた結果をそのまま画面に出力せず、一旦<code>createGraphics</code>で作成した<a class="keyword" href="http://d.hatena.ne.jp/keyword/canvas">canvas</a>上に出力する。この<a class="keyword" href="http://d.hatena.ne.jp/keyword/canvas">canvas</a>はメモリに載ってるだけなので画面には出てこない。<a href="#f-dbf8a096" name="fn-dbf8a096" title="offscreen renderingと呼ばれている">*2</a> 最後のエフェクト処理が終わった後に<code>image</code>で最<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%AA%B7%EB">終結</a>果を画面に表示している。</p> <p>最終的にできたコードは下記の<a href="https://glitch.com">glitch.com</a>にあげておいた。<a href="#f-42d7362b" name="fn-42d7362b" title="glitch effectだけに">*3</a> 埋め込み右下の<code>View App</code>ボタンをクリックするとデモが確認できるはず。モデル読み込みが遅くて起動に30秒程度かかるので注意。<a href="#f-ddb7f951" name="fn-ddb7f951" title="あとたまにサイトが落ちている...">*4</a> 現状<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a>では動かないようだ。</p> <div class="glitch-embed-wrap" style="height: 420px; width: 100%;"> <iframe src="https://glitch.com/embed/#!/embed/webcam-face-glitch?path=README.md&previewSize=0" title="webcam-face-glitch on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;"> </iframe> </div> <p><a href="https://webcam-face-glitch.glitch.me/">埋め込みが見れない場合はこちら</a></p> <p>課題としては、シェーダー使ってるのにまだ重い。シェーダープログラミング力がまだまだ足りないと思った。<code>createGraphics</code>が何個もあるから重いのか?いい感じのコードを思いついた人いたら教えて下さい。</p> <div class="footnote"> <p class="footnote"><a href="#fn-43c8457f" name="f-43c8457f" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ただし<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%C6%B5%A2">再帰</a>だけでやる場合は、顔を認識しない限り映像が止まる。</span></p> <p class="footnote"><a href="#fn-dbf8a096" name="f-dbf8a096" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">offscreen renderingと呼ばれている</span></p> <p class="footnote"><a href="#fn-42d7362b" name="f-42d7362b" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">glitch effectだけに</span></p> <p class="footnote"><a href="#fn-ddb7f951" name="f-ddb7f951" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">あとたまにサイトが落ちている...</span></p> </div> lepton9 World Data Viz Challenge 2018 hatenablog://entry/17680117126969192575 2019-02-26T23:39:27+09:00 2019-02-26T23:39:27+09:00 たまたま見つけたイベントだったんだけど、World Data Viz Challenge 2018の神戸ラウンドに行ってきた。 姉妹都市提携している神戸市とバルセロナ市が合同で開催しているイベントで、都市に関する何らかのデータを使って、都市課題の解決に繋がる可視化作品を発表するのが趣旨みたい。バルセロナラウンドは去年の11月に開催されていて、神戸ラウンドが2/16,17の土日にあった。市とも連携しているのか、神戸大学の学生のセッションが多かったのが印象的だった。 バルセロナ あんまり知らなかったんだけど、バルセロナはヨーロッパの中でもスマートシティ化が最も進んでいる都市で、木々や信号、ゴミ箱、… <p>たまたま見つけたイベントだったんだけど、<a href="http://kobe-barcelona.net/">World Data Viz Challenge 2018</a>の神戸ラウンドに行ってきた。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%D0%CB%E5%C5%D4%BB%D4">姉妹都市</a>提携している神戸市と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%BB%A5%ED%A5%CA">バルセロナ</a>市が合同で開催しているイベントで、都市に関する何らかのデータを使って、都市課題の解決に繋がる可視化作品を発表するのが趣旨みたい。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%BB%A5%ED%A5%CA">バルセロナ</a>ラウンドは去年の11月に開催されていて、神戸ラウンドが2/16,17の土日にあった。市とも連携しているのか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%C0%B8%CD%C2%E7%B3%D8">神戸大学</a>の学生のセッションが多かったのが印象的だった。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%BB%A5%ED%A5%CA">バルセロナ</a></h3> <p>あんまり知らなかったんだけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%BB%A5%ED%A5%CA">バルセロナ</a>はヨーロッパの中でもスマートシティ化が最も進んでいる都市で、木々や信号、ゴミ箱、道路などに設置されているセンサーデータを取得して、リアルタイムに分析できるようなシステムを作っているらしい。とても先進的だ。</p> <p><a href="https://news.yahoo.co.jp/byline/yazakiyuichi/20160831-00061685/">神戸市がスマートシティに?連携するバルセロナ市の現在(矢崎裕一) - 個人 - Yahoo!ニュース</a></p> <p>二日目に発表してくれたTableau Japanの方の話によると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%BB%A5%ED%A5%CA">バルセロナ</a>市が公開しているデータのフォーマットは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSV">CSV</a>が一般的らしく、データを公開する側の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C6%A5%E9%A5%B7%A1%BC">リテラシー</a>が高い印象を受けた。一方で神戸市は半分以上PDFなので、データを取り出すだけでも一苦労…。神戸市はまだ頑張ってる方だと思うけど、日本全体でみたらオープンデータを活用するのは今の所物凄く大変そうな空気を感じた。</p> <h3>誰のためのVisualization?</h3> <p>Data Visualizationというのは、どうしても見た目の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トが目立つので「なんか面白そうなデータがあったので可視化してみました。よかったですね。」で終わってしまうことが起こりやすい。 Visualizationは手段であって目的ではないので、そのVisualizationは誰が見るために作っているのか、見る人がどういうInsightを持つものなのかを意識して作ることが重要だな、といくつかの発表を見てて思った。</p> <h3>終わりに</h3> <p>市主催のイベントだからなのか、発表者に対する質問タイムのときに、消防署の方とか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%B5%B0%E9%B0%D1%B0%F7%B2%F1">教育委員会</a>の給食課の方とかが出てきて、普段IT系の勉強会では出会えないような人たちの実情が聞けて面白かった。神戸市にはこれからもデータドリブンな都市づくりができるように頑張ってほしいと思いました。</p> lepton9 データサイエンティスト養成読本の登竜門編 hatenablog://entry/98012380861968313 2019-02-09T01:20:55+09:00 2019-02-09T01:20:55+09:00 データサイエンティスト養成読本 登竜門編 (Software Design plus)作者: 高橋淳一,野村嗣,西村隆宏,水上ひろき,林田賢二,森清貴,越水直人,露崎博之,早川敦士,牧允皓,黒柳敬一出版社/メーカー: 技術評論社発売日: 2017/03/25メディア: 大型本この商品を含むブログ (1件) を見る データをサイエンスする仕事に就く人が知っているべきことが一通り書かれている。データサイエンス未経験の人が0から学べるような内容になっていると思うが、9章の統計知識、10章の数理モデルのお話には数式がたくさん出てくるので、数学からしばらく距離を置いていた人は面食らうかもしれない。 We… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774188778/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51ryAx7ClvL._SL160_.jpg" class="hatena-asin-detail-image" alt="データサイエンティスト養成読本 登竜門編 (Software Design plus)" title="データサイエンティスト養成読本 登竜門編 (Software Design plus)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774188778/dxytt6r-22/">データサイエンティスト養成読本 登竜門編 (Software Design plus)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 高橋淳一,野村嗣,西村隆宏,水上ひろき,林田賢二,<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%B9%C0%B6">森清</a>貴,越水直人,露崎博之,早川敦士,牧允皓,黒柳敬一</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/03/25</li><li><span class="hatena-asin-detail-label">メディア:</span> 大型本</li><li><a href="http://d.hatena.ne.jp/asin/4774188778/dxytt6r-22" target="_blank">この商品を含むブログ (1件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>データをサイエンスする仕事に就く人が知っているべきことが一通り書かれている。データサイエンス未経験の人が0から学べるような内容になっていると思うが、9章の統計知識、10章の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%F4%CD%FD%A5%E2%A5%C7%A5%EB">数理モデル</a>のお話には数式がたくさん出てくるので、数学<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%AB%A4%E9%A4%B7">からし</a>ばらく距離を置いていた人は面食らうかもしれない。</p> <p>Web系エンジニアにとっては、3章のシェル、4章のデータベースの内容は簡単すぎるので読み飛ばして良いと思う。逆に言うとめっちゃ基礎から説明してくれるので、今までこの辺のツールを触ってこなかった人にとってはありがたい章だと思った。こんなに丁寧に解説してくれるのかーと思って関心していた。</p> <p>5章ではRStudioとJupyter Notebookのインストールから使い方までの説明が書いてある。Jupyter Notebookは今回初めて使ったけど、データに対して行った処理の履歴が残るし、処理内容や結果を<a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a>使って簡単にまとめてレポート化できるので、実際に手を動かしてみてとても便利なことが実感できた。Rについては、変数代入を <code>&lt;-</code> で行ったり、パイプ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B1%E9%BB%BB%BB%D2">演算子</a>が <code>%&gt;%</code> だったりと見慣れない記法が多く、このキモさに慣れるのには少し時間がかかりそう。</p> lepton9 機械学習エンジニアになりたい人のための本という本を読んだ hatenablog://entry/10257846132702872272 2019-01-12T01:51:31+09:00 2019-01-12T09:41:25+09:00 機械学習エンジニアになりたい人のための本 AIを天職にする (AI&TECHNOLOGY)作者: 石井大輔出版社/メーカー: 翔泳社発売日: 2018/10/17メディア: 単行本(ソフトカバー)この商品を含むブログを見る 難しいことは書いてないので、読むのが早い人は一日で読み終えることができるだろう。 機械学習界隈のキャリアの現状、どういうジョブがあるのか、世界事情、コミュニティ、情報収集、勉強方法まで、浅く広く理解するにはいい本だった。 機械学習周りのことをつぶやいてるTwitterアカウントやおすすめのブログなども載っていてて参考になったけれど、この分野はかなり移り変わりが激しいので、数… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/479815671X/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/514WgARryhL._SL160_.jpg" class="hatena-asin-detail-image" alt="機械学習エンジニアになりたい人のための本 AIを天職にする (AI&TECHNOLOGY)" title="機械学習エンジニアになりたい人のための本 AIを天職にする (AI&TECHNOLOGY)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/479815671X/dxytt6r-22/">機械学習エンジニアになりたい人のための本 AIを天職にする (AI&TECHNOLOGY)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%D0%B0%E6%C2%E7%CA%E5">石井大輔</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/10/17</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/479815671X/dxytt6r-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>難しいことは書いてないので、読むのが早い人は一日で読み終えることができるだろう。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>界隈のキャリアの現状、どういうジョブがあるのか、世界事情、コミュニティ、情報収集、勉強方法まで、浅く広く理解するにはいい本だった。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>周りのことをつぶやいてる<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アカウントやおすすめのブログなども載っていてて参考になったけれど、この分野はかなり移り変わりが激しいので、数年後この情報がどれだけ役に立つかはよくわからない。そういう意味で鮮度が重要な本なので、読もうと思ってるならできるだけ早く読んでおいたほうが良さそう。</p> <h3>転職活動の方法とか</h3> <p>第5章に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>周りの職種に転職するための方法が書いてある。履歴書、職務履歴書の書き方や面接対策まで書いてあって親切みを感じた。書類の書き方サンプルがあったけどあんまり参考にならん気がする。<a href="#f-8de23127" name="fn-8de23127" title="趣味でDJやってる話いる?">*1</a></p> <p>個人のアピールポイントを載せてない履歴書(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%A6%CC%B3%B7%D0%CE%F2%BD%F1">職務経歴書</a>)をよく見かけるけど載せたほうが良いよということが書いてあった。僕は今の会社でソフトウェアエンジニアの応募書類を見たり面接をしたりしているけれど、確かにそういう書類は結構ある。この本にはその職種につきたい理由や、どんな仕事がやりたいかとか未来のことを書くのがいいみたいなアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>をしているけれど、面接する側からすると、過去にどういう成果を出してきたのかをたくさん書いてもらえると、応募者がどんなことに関心があって、仕事にどういう関わり方をしてきたかがわかるので嬉しい。過去の成果に対するアピールポイントがあった上で、未来はこういう感じでやっていきたいというようなことが書いてあると、文章に一貫性と説得力が生まれていいんちゃうかと思った。</p> <h3>海外事情</h3> <p>第8章に海外事情が書いてある。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%E1%A5%EA">アメリ</a>カの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%EA%A5%B3%A5%F3%A5%D0%A5%EC%A1%BC">シリコンバレー</a>だけかなーと思ったら、ニューヨークやロサンゼルスのことも書いてあって面白かった。その他に中国、ヨーロッパ、東南アジアのことも簡潔にまとめてあって、日本以外がどうなってるかを雑に知るには丁度良かった。</p> <h3>まとめ</h3> <p>各項目が短くまとめてあってブログの記事感覚で読めるし、なんか時間が無くて効率的にこの界隈の情報とかリンク集を集めたい人にはおすすめと思いました。</p> <div class="footnote"> <p class="footnote"><a href="#fn-8de23127" name="f-8de23127" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">趣味でDJやってる話いる?</span></p> </div> lepton9 Logitech Bluetooth Illuminated Keyboard K810 US配列買った hatenablog://entry/10328749687194833875 2016-11-26T15:53:49+09:00 2018-06-18T12:06:56+09:00 これまでのあらすじ MacとWindows共にApple Wireless Keyboard*1を使って入力していた。 Apple Wireless Keyboardの浅い打鍵感が好きだった。 でも電池の入れ替え面倒だった。 WindowsならWindows用のキーボードが使いたかった。 コードは邪魔だからワイヤレスのキーボードが使いたかった。 US配列が好きだった。 テンキーはいらなかった。 AltキーはSpaceキーの直ぐ左についていて欲しかった。 そして見つけたのがK810(US配列)だった。 *1:Magic Keyboardの一個前のやつ <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20161126/20161126123921.jpg" alt="f:id:lepton9:20161126123921j:plain" title="f:id:lepton9:20161126123921j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>これまでのあらすじ</h3> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>共に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboard<a href="#f-71f12ab2" name="fn-71f12ab2" title="Magic Keyboardの一個前のやつ">*1</a>を使って入力していた。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboardの浅い打鍵感が好きだった。</li> <li>でも電池の入れ替え面倒だった。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>なら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>用のキーボードが使いたかった。</li> <li>コードは邪魔だからワイヤレスのキーボードが使いたかった。</li> <li>US配列が好きだった。</li> <li>テンキーはいらなかった。</li> <li>AltキーはSpaceキーの直ぐ左についていて欲しかった。</li> </ul> <p>そして見つけたのがK810(US配列)だった。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20161126/20161126123959.jpg" alt="f:id:lepton9:20161126123959j:plain" title="f:id:lepton9:20161126123959j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>Ctrl + Alt + Delete</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboardを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>で使い続ける選択肢は無くはなかったのだけど、セキュリティ上の理由で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>のログオン時に<code>Ctrl + Alt + Delete</code>キーを押さなければならなかったのと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>用キーボードの<code>Delete</code>キーは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>では<code>Backspace</code>キーとして認識されてしまうため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboardを使って<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>にログオンすることができず、仕方なくノートPC本体のキーボードでログオンしていた。ログオン前の画面なので<a class="keyword" href="http://d.hatena.ne.jp/keyword/AutoHotkey">AutoHotkey</a>は使えるはずもなく、今はどうかわからないけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%B8%A5%B9%A5%C8%A5%EA">レジストリ</a>変更してキーを入れ替えてもうまく動かなかった記憶がある。そもそも印字されているキーと実際のキーが異なる状態は避けたかった。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20161126/20161126124012.jpg" alt="f:id:lepton9:20161126124012j:plain" title="f:id:lepton9:20161126124012j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>Alt + Enter</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>では<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>では<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>をメインブラウザとして使っていた。アドレスバーで検索ワードを入力して、新しいタブにバックグラウンドで開く操作をしたいときに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>では<code>Alt + Enter</code>を、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>では<code>command + enter</code>を押す必要があった。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboardを使っていたときは、<code>option</code>キーが<code>左Alt</code>キーに対応してるため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>を使うときと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>を使うときで、左親指を使って押す位置がキー一個分違うというとても紛らわしいことになっており、頻繁に間違えてストレスだった。</p> <ul> <li><a href="https://support.apple.com/ja-jp/HT202676">Boot Camp で実行している Windows で Apple 製のキーボードを使う - Apple サポート</a></li> <li><a href="https://support.google.com/chrome/answer/157179?hl=ja">Chrome のキーボード ショートカット - Chrome ヘルプ</a></li> <li><a href="https://support.apple.com/kb/PH21483?locale=ja_JP&amp;viewlocale=ja_JP">MacのためのSafari: Safari のキーボードおよびその他のショートカット</a></li> </ul> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>用キーボードの<code>command</code>キーは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>では<code>Windows</code>キーに対応しているため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/AutoHotkey">AutoHotkey</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>を使っているときは<code>Windows + Enter</code>を<code>Alt + Enter</code>に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%C3%A5%D4%A5%F3%A5%B0">マッピング</a>したりしていた時期もあったのだけど、たまにうまく動かないことがあって辛かった。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20161126/20161126124020.jpg" alt="f:id:lepton9:20161126124020j:plain" title="f:id:lepton9:20161126124020j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>K810の良いところ</h3> <h4><code>Ctrl + Alt + Delete</code>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>にログオンできる</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>用キーボードだからね。</p> <h4><code>Alt</code>キーが<code>Space</code>キーの左にある</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>で新しいタブにバックグラウンドで開く操作が共<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%CC%B2%BD">通化</a>できた。</p> <h4>充電はUSBから</h4> <p>電池ではないので入れ替えの手間がないのは予想以上に楽だった。あと、充電しながら使えるのがとてもよろしい。</p> <h4>打鍵が静か</h4> <p>もともと打鍵強くないのでそんなにうるさくなかったと思うけど、K810使ってみて<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Wireless Keyboardより静かに打てていると感じた。</p> <h4>誤動作しない</h4> <p>質の悪い<a class="keyword" href="http://d.hatena.ne.jp/keyword/bluetooth">bluetooth</a>キーボードだと一度しかキー押してないのに何故か押しっぱなしされたような挙動になることがあったけど、今のところそういう現象に遭遇してない。</p> <h3>K810の微妙なところ</h3> <h4>電源スイッチのスライド方向</h4> <p>右側面にON/OFFスイッチがあり、上にスライドするとON、下にスライドするとOFFになるのだけど、普通逆やろと思った。USB挿すときに一回間違えたと思って上下逆にして挿したけど挿さらなくて結局最初挿した方向が正しかったみたいな感じでいつも間違える。</p> <h4>指紋、傷が目立つ</h4> <p>これはあんまり気にしてない。</p> <h3>その他</h3> <ul> <li>電源入れるとバックライトがついて眩しいみたいなレビューがあったけど、仕事とかで明るい部屋で使う分には特に気にならない。</li> <li>functionキーを使いたい場合、デフォルトは<code>FN</code>キーと共に押す必要があるけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Logicool">Logicool</a>のSetPointをインストールすればfunctionキー単体で機能するようになる。</li> <li>ペアリングは3つまでできる。僕は一個しか使ってない。</li> </ul> <p>日本の<a class="keyword" href="http://d.hatena.ne.jp/keyword/amazon">amazon</a>だとUSキーボードとJISキーボード両方売ってるから、買うときは間違えないように気をつけましょう。</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0099SMFVQ/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41AnbOuJ4TL._SL160_.jpg" class="hatena-asin-detail-image" alt="Logitech Bluetooth Illuminated Keyboard K810 並行輸入品" title="Logitech Bluetooth Illuminated Keyboard K810 並行輸入品"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0099SMFVQ/dxytt6r-22/">Logitech Bluetooth Illuminated Keyboard K810 並行輸入品</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Logitech">Logitech</a></li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li><li><a href="http://d.hatena.ne.jp/asin/B0099SMFVQ/dxytt6r-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00BBN579E/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51QrB84dbcL._SL160_.jpg" class="hatena-asin-detail-image" alt="LOGICOOL Bluetooth イルミネートキーボード K810" title="LOGICOOL Bluetooth イルミネートキーボード K810"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00BBN579E/dxytt6r-22/">LOGICOOL Bluetooth イルミネートキーボード K810</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%ED%A5%B8%A5%AF%A1%BC%A5%EB">ロジクール</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2013/02/15</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li><li><a href="http://d.hatena.ne.jp/asin/B00BBN579E/dxytt6r-22" target="_blank">この商品を含むブログ (6件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <div class="footnote"> <p class="footnote"><a href="#fn-71f12ab2" name="f-71f12ab2" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">Magic Keyboardの一個前のやつ</span></p> </div> lepton9 Amazon Route 53 + namecheapで運用する独自ドメインメール hatenablog://entry/6653458415124183537 2015-10-13T17:03:00+09:00 2018-06-13T00:06:34+09:00 スマホの契約をキャリアからMVNOに移行しようと思っていて、そうするとキャリアメールが使えなくなるから、せっかくなら独自ドメインでメールを運用してみようと思った。 独自ドメインメールの運用に必要な作業としては大きく3つがある。 独自ドメインの取得 DNSサーバー設定 メールサーバー構築 独自ドメインに関しては、Amazon Route 53のレジストラ機能を使って取得したものがあるのでそれを使おうと思う。その流れでDNSもRoute 53を使うことにする。問題はメールサーバー。 個人のメール用途程度でメールサーバーを自分で立てるのはちょっと仰々しいし、セキュリティに配慮したりスパムメール対策も… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>の契約をキャリアから<a class="keyword" href="http://d.hatena.ne.jp/keyword/MVNO">MVNO</a>に移行しようと思っていて、そうするとキャリアメールが使えなくなるから、せっかくなら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C8%BC%AB%A5%C9%A5%E1%A5%A4%A5%F3">独自ドメイン</a>でメールを運用してみようと思った。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C8%BC%AB%A5%C9%A5%E1%A5%A4%A5%F3">独自ドメイン</a>メールの運用に必要な作業としては大きく3つがある。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C8%BC%AB%A5%C9%A5%E1%A5%A4%A5%F3">独自ドメイン</a>の取得</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a>サーバー設定</li> <li>メールサーバー構築</li> </ul> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C8%BC%AB%A5%C9%A5%E1%A5%A4%A5%F3">独自ドメイン</a>に関しては、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a> Route 53の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%B8%A5%B9%A5%C8%A5%E9">レジストラ</a>機能を使って取得したものがあるのでそれを使おうと思う。その流れで<a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a>もRoute 53を使うことにする。問題はメールサーバー。 個人のメール用途程度でメールサーバーを自分で立てるのはちょっと仰々しいし、セキュリティに配慮したり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%D1%A5%E0%A5%E1%A1%BC%A5%EB">スパムメール</a>対策もあったりで面倒くさそう。だからメールサーバーを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DB%A5%B9%A5%C6%A5%A3%A5%F3%A5%B0">ホスティング</a>してくれるサービスを使うことにした。</p> <h3>メールサーバーの比較</h3> <p>今回メールサーバーに求めるものとして</p> <ul> <li>安い。月100円前後くらい</li> <li>2段階認証がある</li> </ul> <p>を条件にした。なぜ無料ではない条件にしたかというと、無料サービスはいつ有料になるかわからないから。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Apps">Google Apps</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Outlook">Outlook</a>の前例があるし…。</p> <p>いろいろ調べた結果、namecheapという<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%B8%A5%B9%A5%C8%A5%E9">レジストラ</a>が扱っているメールサービスを使ってみることにした。というかこれくらいしか丁度いいプランやってるとこ見つけられなかった。他にいいところあったら教えてほしいくらい。</p> <p><a href="https://www.namecheap.com/?aff=91463">Namecheap.com • Cheap Domain Name Registration &amp; Web Hosting</a></p> <p>注意: この記事内のnamecheapへのリンクはsupportページ以外<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D5%A5%A3%A5%EA%A5%A8%A5%A4%A5%C8">アフィリエイト</a>になってるので、嫌な人は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%A1%BA%F7%A5%A8%A5%F3%A5%B8%A5%F3">検索エンジン</a>から迂回おねがいします。</p> <p>国内のメールサーバーで有名なさくらのメー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>と、namecheapのPrivate Email HostingのPrivateプランで比較してみる。 <code>✓</code>がついてたら機能有りの意味。あと、これは2015/10現在の比較データです。</p> <table> <thead> <tr> <th></th> <th>さくらのメー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a></th> <th>namecheap Private Email Hosting (Private)</th> </tr> </thead> <tbody> <tr> <td>価格/year</td> <td>¥1029</td> <td>$9.88</td> </tr> <tr> <td>ディスク容量</td> <td>10GB</td> <td>email:3GB/file:1GB</td> </tr> <tr> <td>メールアドレス数</td> <td>無制限</td> <td>1個。追加するごとに$2.98/year<a href="#f-fe79fe9a" name="fn-fe79fe9a" title="Namecheap.com Knowledgebase • Prices for additional mailboxes for Namecheap Private Email (Private Email, Private Email: Mailbox management, )">*1</a></td> </tr> <tr> <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%A4%A5%EA%A5%A2%A5%B9">エイリアス</a></td> <td>1アカウントを複数<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>で共有すれば実現可</td> <td>1個</td> </tr> <tr> <td>受信</td> <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/POP3">POP3</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/APOP">APOP</a>/IMAP4</td> <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/POP3">POP3</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/IMAP">IMAP</a></td> </tr> <tr> <td>暗号化</td> <td>初期<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>のみ</td> <td>✓</td> </tr> <tr> <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%D6%A5%E1%A1%BC%A5%EB">ウェブメール</a></td> <td>✓</td> <td>✓</td> </tr> <tr> <td>2段階認証</td> <td>-</td> <td>✓<a href="#f-f348f512" name="fn-f348f512" title="Namecheap.com Knowledgebase • How can I enable Two-Factor Authentication? (Account Security, General &amp; Support, )">*2</a></td> </tr> <tr> <td>転送</td> <td>✓</td> <td>✓<a href="#f-d12a051f" name="fn-d12a051f" title="Namecheap.com Knowledgebase • How to setup forwarding in Namecheap Private Email (Private Email: General information, Email Forwarding, Private Email: Webmail Features, )">*3</a></td> </tr> <tr> <td>振り分け転送</td> <td>-</td> <td>✓<a href="#f-b0022f1a" name="fn-b0022f1a" title="Namecheap.com Knowledgebase • How to setup custom email filters (Private Email: Webmail Features)">*4</a></td> </tr> <tr> <td>迷惑メールフィルター</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>ウィルスチェック</td> <td>✓</td> <td>対応予定<a href="#f-3b0b23fa" name="fn-3b0b23fa" title="Namecheap.com Knowledgebase • What spam protection options do you offer? (Hosting Information, Spam Protection, ) Namecheap.com Knowledgebase • What is Namecheap Spam Protection? (Spam Protection) このへん読む限りPrivate Email HostingにはSpamの対策しか入ってないけど近いうちにAnti-virusも対応するとか書いてあるように思える">*5</a></td> </tr> <tr> <td>無料お試し期間</td> <td>2週間</td> <td>2ヶ月</td> </tr> </tbody> </table> <ul> <li><a href="http://www.sakura.ne.jp/mail/">セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】</a></li> <li><a href="https://www.namecheap.com/hosting/email.aspx?aff=91463">Cheap Email Hosting Service • Namecheap.com</a></li> </ul> <p>並べてみるとさくらのほうがいい気がするけど、メールアドレスそんなにたくさん増やさないならnamecheapで良いかという感じはある。ただ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%D1%A5%E0%A5%D5%A5%A3%A5%EB%A5%BF%A1%BC">スパムフィルター</a>の精度がどれほどのものかわからないのと、ウィルスチェックがまだ無いようなので少し不安がある。</p> <p>あと、上の比較では書いてないけどnamecheapのBusiness以上のプランだとExchange ActiveSyncに対応しているので、モバイルで受信するときにわざわざ<a class="keyword" href="http://d.hatena.ne.jp/keyword/iCloud">iCloud</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Outlook">Outlook</a>のアドレスに転送しなくてもpush通知を受け取れる。これは個人的に結構嬉しい。Businessの価格は月換算すると$2.41で300円いかないくらいだから、キャリアのインターネットサービスと同じくらいと考えると割と許容範囲だと思う。</p> <p>とりあえず調子良さそうならBusinessに変更するかもしれないなーとか考えつつ、今回はPrivateで登録することにした。</p> <h3>namecheap Private Email Hosting登録</h3> <p>ここでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C8%BC%AB%A5%C9%A5%E1%A5%A4%A5%F3">独自ドメイン</a>として<code>glitchdeploy.com</code>というかっこいい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を使って登録してるけど、この記事参考にする場合は自分の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>に置き換えてほしい。</p> <p><a href="https://www.namecheap.com/hosting/email.aspx?aff=91463">Cheap Email Hosting Service • Namecheap.com</a></p> <p>上記リンクのPrivateからセレクトボックスで2 months (free trial)を選択して<code>Add to Cart</code>をクリックする。これで2ヶ月間無料で使える。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012183337.png" alt="f:id:lepton9:20151012183337p:plain" title="f:id:lepton9:20151012183337p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ここでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a> Route 53で取得した<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を使うので、目立たない位置にある<code>Use a domain I own from another registrar</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012183603.png" alt="f:id:lepton9:20151012183603p:plain" title="f:id:lepton9:20151012183603p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>取得した<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を入力して<code>Use this Domain</code>をクリックすると、右側のYour Orderの内容が変わるので<code>Continue</code>ボタンをクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012183811.png" alt="f:id:lepton9:20151012183811p:plain" title="f:id:lepton9:20151012183811p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>メールアカウントを作成する。<code>Create Email Address Now</code>をクリックして使いたいメールアドレスにチェックを入れる。Privateプランの場合は1アカウントまでは無料。2つ以上だとお金がかかる。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012184131.png" alt="f:id:lepton9:20151012184131p:plain" title="f:id:lepton9:20151012184131p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>カートの内容が表示される。<code>AUTORENEW OFF</code>になっている場合は、2ヶ月後にサービスが使えなくなる。ONにするとこのプランのまま3ヶ月目も継続する。お試しで使いたいだけならOFFにしておく。<code>Confirm Order</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012185024.png" alt="f:id:lepton9:20151012185024p:plain" title="f:id:lepton9:20151012185024p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>namecheapのアカウントを持っていない場合は登録処理をする。右側に必要な情報を入力して<code>Create Account and Continue</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012185323.png" alt="f:id:lepton9:20151012185323p:plain" title="f:id:lepton9:20151012185323p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>個人で登録するので、<code>I'm registering on behalf of a company</code>のチェックは外しておく。あと、ここの入力ボックスは何故かハイフンやハッシュを入力するとエラーになるので、住所に入力するときは適当にハイフンをドットに置き換えたりした。<code>State/Province</code>を入力するとエラーが出るかもしれないが、日本に住んでるなら<code>Country</code>でJapanを選択すればエラーは出なくなるはず。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012185500.png" alt="f:id:lepton9:20151012185500p:plain" title="f:id:lepton9:20151012185500p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>2段階認証の設定。<code>Enable Two-Factor Authentication</code>にチェックを入れる。<code>Phone Number</code>を入力し、<code>Description</code>に何用途の電話かわかりやすいようにメモを残して<code>Continue</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012190031.png" alt="f:id:lepton9:20151012190031p:plain" title="f:id:lepton9:20151012190031p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>入力した電話番号が正しければここでSMSが飛んでくるので、<code>Verification Code</code>にSMSに書かれているコードを入力して<code>Verify Phone Number</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012190431.png" alt="f:id:lepton9:20151012190431p:plain" title="f:id:lepton9:20151012190431p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>Continue with Checkout</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012190641.png" alt="f:id:lepton9:20151012190641p:plain" title="f:id:lepton9:20151012190641p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CD%F8%CD%D1%B5%AC%CC%F3">利用規約</a>に合意して<code>Pay Now</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012190801.png" alt="f:id:lepton9:20151012190801p:plain" title="f:id:lepton9:20151012190801p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これでnamecheapのアカウント作成とPrivate Email Hostingの契約が完了した。</p> <h3>Route 53で<a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a>レコードを追加する</h3> <p><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/1340/93/open-xchange-records-for-domains-with-third-party-dns">Namecheap.com Knowledgebase • Namecheap Private Email records for domains with third-party DNS (Private Email: DNS Settings)</a></p> <p>ここにある通り<a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a>レコードの追加を行う。</p> <p><code>autodiscover</code>, <code>autoconfig</code>, <code>_autodiscover._tcp</code>のレコードに関しては、Exchange ActiveSyncで使用されるレコードなので、Privateプランでは設定する必要はない。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a>のマネージメントコンソールにログインし、<code>Route 53</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012200919.png" alt="f:id:lepton9:20151012200919p:plain" title="f:id:lepton9:20151012200919p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>Hosted Zones</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012201025.png" alt="f:id:lepton9:20151012201025p:plain" title="f:id:lepton9:20151012201025p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>Domain Name</code>で設定する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を選択し、<code>Go to Record Sets</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012201041.png" alt="f:id:lepton9:20151012201041p:plain" title="f:id:lepton9:20151012201041p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>Create Record Set</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012201146.png" alt="f:id:lepton9:20151012201146p:plain" title="f:id:lepton9:20151012201146p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>右側のカラムでレコードを追加する。まずmxレコードから。<code>Type</code>で<code>MX</code>を選択。MXレコードは2つ必要なので、<code>Value</code>に改行区切りで2つ入力し、<code>Create</code>をクリック。</p> <pre class="code" data-lang="" data-unlink>10 mx1.privateemail.com. 10 mx2.privateemail.com.</pre> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012201959.png" alt="f:id:lepton9:20151012201959p:plain" title="f:id:lepton9:20151012201959p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>次にcnameレコード。mxレコードと同じ流れで<code>Create Record Set</code>をクリックする。出てきた右カラムで<code>Name</code>に<code>mail</code>と入力し、<code>Type</code>で<code>CNAME</code>を選択。<code>Value</code>には<code>privateemail.com</code>を入力し、<code>Create</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012202243.png" alt="f:id:lepton9:20151012202243p:plain" title="f:id:lepton9:20151012202243p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>最後に送信元<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を認証するためのtxtレコード。<code>Type</code>で<code>TXT</code>を選択。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Value">Value</a>には</p> <pre class="code" data-lang="" data-unlink>v=spf1 include:spf.privateemail.com ~all </pre> <p>を入力し、<code>Create</code>ボタンをクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012203026.png" alt="f:id:lepton9:20151012203026p:plain" title="f:id:lepton9:20151012203026p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a>レコードの設定が完了した。</p> <h3>メー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>設定</h3> <p>ここまで設定が終わると、namecheapのアカウント登録時に入力したメールアドレス宛に、Activateが終わった旨のメールが届いているはずなので確認する。</p> <p>作成したメールアカウントに一時パスワードが生成されている。まずこのパスワードを変更する。メール内の<code>Subscription</code>のリンクをクリックする。このリンクはnamecheapで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を管理していない場合、サイト上では辿れないリンクになっている模様。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012210853.png" alt="f:id:lepton9:20151012210853p:plain" title="f:id:lepton9:20151012210853p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>右下のほうに<code>EDIT STORAGE</code>というプルダウンがあるのでクリックし、<code>Change Password</code>を選択。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012211135.png" alt="f:id:lepton9:20151012211135p:plain" title="f:id:lepton9:20151012211135p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>新しいパスワードとnamecheapアカウントのパスワードを入力し、<code>Save Changes</code>をクリック。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20151012/20151012211239.png" alt="f:id:lepton9:20151012211239p:plain" title="f:id:lepton9:20151012211239p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これでパスワードが変更された。ここまでの設定でメールがまともに使えるようになった。あとはnamecheapが用意している<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%D6%A5%E1%A1%BC%A5%EB">ウェブメール</a>クライアントを使ったり</p> <p><a href="https://www.namecheap.com/support/knowledgebase/subcategory.aspx/2178/private-email-webmail-features">Namecheap.com Knowledgebase • Private Email: Webmail Features • Category</a></p> <p>お好きなメールクライアントに設定したり</p> <p><a href="https://www.namecheap.com/support/knowledgebase/subcategory.aspx/2175/private-email-client-setup">Namecheap.com Knowledgebase • Private Email: Client Setup • Category</a></p> <p>すればメールが使えるようになる。長くなったので続きは次の記事で書く。</p> <p>namecheapはドキュメントがかなり充実しているので、ほとんど詰まることなく設定できてよかった。</p> <p><a href="https:&#x2F;&#x2F;www.namecheap.com&#x2F;?aff=91463"><img src="https:&#x2F;&#x2F;files.namecheap.com&#x2F;graphics&#x2F;linkus&#x2F;120x90-1.gif" width="120" height="90" border="0" alt="Namecheap.com"></a></p> <div class="footnote"> <p class="footnote"><a href="#fn-fe79fe9a" name="f-fe79fe9a" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9185/2177/prices-for-additional-mailboxes-for-namecheap-private-email">Namecheap.com Knowledgebase • Prices for additional mailboxes for Namecheap Private Email (Private Email, Private Email: Mailbox management, )</a></span></p> <p class="footnote"><a href="#fn-f348f512" name="f-f348f512" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9253/45/how-to-two-factor-authentication">Namecheap.com Knowledgebase • How can I enable Two-Factor Authentication? (Account Security, General &amp; Support, )</a></span></p> <p class="footnote"><a href="#fn-d12a051f" name="f-d12a051f" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/1396/2214/how-to-setup-forwarding-in-namecheap-private-email">Namecheap.com Knowledgebase • How to setup forwarding in Namecheap Private Email (Private Email: General information, Email Forwarding, Private Email: Webmail Features, )</a></span></p> <p class="footnote"><a href="#fn-b0022f1a" name="f-b0022f1a" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9392/2178/how-to-setup-custom-email-filters">Namecheap.com Knowledgebase • How to setup custom email filters (Private Email: Webmail Features)</a></span></p> <p class="footnote"><a href="#fn-3b0b23fa" name="f-3b0b23fa" class="footnote-number">*5</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://www.namecheap.com/support/knowledgebase/article.aspx/138/22/what-spam-protection-options-do-you-offer">Namecheap.com Knowledgebase • What spam protection options do you offer? (Hosting Information, Spam Protection, )</a> <a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9367/2216/what-is-namecheap-spam-protection">Namecheap.com Knowledgebase • What is Namecheap Spam Protection? (Spam Protection)</a> このへん読む限りPrivate Email Hostingには<a class="keyword" href="http://d.hatena.ne.jp/keyword/Spam">Spam</a>の対策しか入ってないけど近いうちにAnti-virusも対応するとか書いてあるように思える</span></p> </div> lepton9 ストリームからBPMを計算する。RxJSを使って hatenablog://entry/8454420450084759894 2015-02-22T22:40:38+09:00 2018-06-13T00:05:01+09:00 ボタンを叩くタイミングからBPMを検出して設定してくれる、いわゆるタップテンポ機能。 シーケンサーやサンプラーなどに搭載されていて、最近はブラウザ上で確認できるサービスもいくつかある。 Tap for Beats Per Minute BPM Tap BPM beat finder Tap BPM - Online Beats Per Minute Calculator and Counter http://www.tempotap.com <p>ボタンを叩くタイミングから<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>を検出して設定してくれる、いわゆるタップテンポ機能。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A1%BC%A5%B1%A5%F3%A5%B5%A1%BC">シーケンサー</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%F3%A5%D7%A5%E9%A1%BC">サンプラー</a>などに搭載されていて、最近はブラウザ上で確認できるサービスもいくつかある。</p> <ul> <li><a href="http://www.all8.com/tools/bpm.htm">Tap for Beats Per Minute BPM</a></li> <li><a href="http://www.drumbot.com/projects/tap_bpm/#.VOmMcUKdhXY">Tap BPM beat finder</a></li> <li><a href="http://www.beatsperminuteonline.com">Tap BPM - Online Beats Per Minute Calculator and Counter</a></li> <li><a href="http://www.tempotap.com">http://www.tempotap.com</a></li> </ul> <h3>Reactive Programming</h3> <p>そしてこの記事。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fninjinkun.hatenablog.com%2Fentry%2Fintrorxja" title="【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun&#39;s diary" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p><a href="https://ninjinkun.hatenablog.com/entry/introrxja">&#x3010;&#x7FFB;&#x8A33;&#x3011;&#x3042;&#x306A;&#x305F;&#x304C;&#x6C42;&#x3081;&#x3066;&#x3044;&#x305F;&#x30EA;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D6;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;&#x5165;&#x9580; - ninjinkun&#39;s diary</a></p> <p>昔これ読んだときに適当なイベントストリームから<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>計算することもできそうと思ったので、勉強ついでに似たようなものを作ってみた。</p> <p><a href="https://distkloc.github.io/tap-tempo-machine/#/">Tap Tempo Machine - Simple BPM calculator</a></p> <p><a href="https://gyazo.com/969a354139e566d81eebb12812928220"><img src="https://i.gyazo.com/969a354139e566d81eebb12812928220.gif" alt="Gyazo" /></a></p> <p>Jキーを押す<a href="#f-6cb33f7f" name="fn-6cb33f7f" title="JキーにしたのはLDRとかTumblrとかVimのキーバインドで一番良く押しそうなボタンとかいうどうでもいい理由から。">*1</a>か灰色部分をタイミングよくクリックしてると<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>が表示される。直近4回の<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>の平均を表示する。それだけのページ。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>検出部分にRxJSを使っている。<a href="#f-ea60b35d" name="fn-ea60b35d" title="その他はAngularJS">*2</a></p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FReactive-Extensions%2FRxJS" title="Reactive-Extensions/RxJS" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p><a href="https://github.com/Reactive-Extensions/RxJS">GitHub - Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript</a></p> <h3>クリックイベントから<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>を出力する</h3> <p>クリックイベントをobservableに変換して<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>出力まで持ってくあたりの部分を書いてみる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>の計算方法は一応書いておくと、</p> <pre class="code" data-lang="" data-unlink>BPM = Beats Per Minute = Beats/Minute = Beats/60s</pre> <p>つまり60秒間に打つBeatの数が<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>ということなので、60秒を各Beat間の秒間隔で割ると<a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>が出てくるということになる。 実際のコードからちょっと改変してるけど雰囲気こんな感じになる。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// クリックイベントをobservableのシーケンスに変換</span> <span class="synIdentifier">var</span> source = Rx.Observable.fromEvent(<span class="synStatement">window</span>, <span class="synConstant">'click'</span>) <span class="synComment">// observable間の時間間隔の情報を持つobservableのシーケンスを返す</span> .timeInterval() <span class="synComment">// 1つめのobservableの時間間隔は0になるので無視する。</span> .skip(1) <span class="synComment">// timeInterval()で返ってきたそれぞれのobservableがもつintervalというプロパティだけを</span> <span class="synComment">// 新しいobservableのシーケンスとして返す。</span> .pluck(<span class="synConstant">'interval'</span>) <span class="synComment">// 前回のイベント発生から10秒経っていたら次のobservableは無視する。</span> .where(<span class="synIdentifier">function</span> (interval) <span class="synIdentifier">{</span> <span class="synStatement">return</span> interval &lt;= 10000; <span class="synIdentifier">}</span>) <span class="synComment">// 4つのobservableをひとまとまりのobservableとして返す。</span> <span class="synComment">// 1要素単位でずらして格納していく。</span> .windowWithCount(4, 1) <span class="synComment">// 入れ子になったobservableのシーケンスを平準化する。</span> <span class="synComment">// 平準化するときに各observableの値4つ(ここではintervalの値)の平均をとる。</span> .selectMany(<span class="synIdentifier">function</span> (elements) <span class="synIdentifier">{</span> <span class="synStatement">return</span> elements.average(); <span class="synIdentifier">}</span>) <span class="synComment">// 平均されたintervalをBPMに変換して小数点以下を四捨五入する。</span> .map(<span class="synIdentifier">function</span> (interval) <span class="synIdentifier">{</span> <span class="synStatement">return</span> Math.round(60000 / interval); <span class="synIdentifier">}</span>); <span class="synComment">// クリック毎に直近4回の平均BPMが出力される。</span> source.subscribe(<span class="synIdentifier">function</span> (bpm) <span class="synIdentifier">{</span> console.log(bpm); <span class="synIdentifier">}</span>); </pre> <p>多分この中でイメージしにくいのは<code>windowWithCount</code>と<code>selectMany</code>だと思う。</p> <p><code>windowWithCount(4, 1)</code>は、例えば</p> <pre class="code" data-lang="" data-unlink>1,2,3,4,5,6,...</pre> <p>このようなシーケンスの場合、</p> <pre class="code" data-lang="" data-unlink>[1,2,3,4],[2,3,4,5],[3,4,5,6]...</pre> <p>となって返ってくる。<code>[ ]</code>がひとつのobservable。<code>[ ]</code>に含まれている各要素もobservable。observableが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FE%A4%EC%BB%D2">入れ子</a>になって返ってくる。</p> <p>第二引数を変えると、例えば<code>windowWithCount(4, 4)</code>の場合、</p> <pre class="code" data-lang="" data-unlink>[1,2,3,4],[5,6,7,8],[9,10,11,12]...</pre> <p>となる。4つずつskipして格納される。ドキュメント見るといいです。</p> <p><a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/windowwithcount.md">RxJS/windowwithcount.md at master &middot; Reactive-Extensions/RxJS &middot; GitHub</a></p> <p><code>selectMany</code>は<code>windowWithCount</code>によって<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FE%A4%EC%BB%D2">入れ子</a>のobservableになってしまったシーケンスを平らなobservableのシーケンスに戻す。</p> <pre class="code" data-lang="" data-unlink>[1,2,3,4],[2,3,4,5],[3,4,5,6]...</pre> <p>これが</p> <pre class="code" data-lang="" data-unlink>1,2,3,4,2,3,4,5,3,4,5,6...</pre> <p>となって返ってくる。<a href="#f-726a2b8a" name="fn-726a2b8a" title="実際はこの順序にならないかもしれない。[http://ja.stackoverflow.com/questions/5304/rxjs-の-flatmap-の挙動が直感と異なる:title]">*3</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/BPM">BPM</a>の例の場合、平らなシーケンスに戻す前に<code>average()</code>によって子observable各要素の平均をとっている。例えば</p> <pre class="code" data-lang="" data-unlink>[120,122,122,120],[124,122,123,123]...</pre> <p>こんな入力の場合</p> <pre class="code" data-lang="" data-unlink>121,123...</pre> <p>このように返ってくる。</p> <p><a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/selectmany.md">RxJS/selectmany.md at master &middot; Reactive-Extensions/RxJS &middot; GitHub</a></p> <h3>おわり</h3> <p>普段<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Linq">Linq</a>書いてるからRxのメソッドチェーン書いててとても気持ち良い。嬉しい。ありがとう、ありがとう。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fdistkloc%2Ftap-tempo-machine" title="distkloc/tap-tempo-machine" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p><a href="https://github.com/distkloc/tap-tempo-machine">GitHub - distkloc/tap-tempo-machine: Simple BPM calculator</a></p> <p><a href="https://distkloc.github.io/tap-tempo-machine/#/">Tap Tempo Machine - Simple BPM calculator</a></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>でも一応動くけど、ngTouchのngClick使ってるにもかかわらず反応が鈍い。<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>アニメーション切っても改善しなかったのでJS見なおす必要ありそう。</p> <div class="footnote"> <p class="footnote"><a href="#fn-6cb33f7f" name="f-6cb33f7f" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">Jキーにしたのは<a class="keyword" href="http://d.hatena.ne.jp/keyword/LDR">LDR</a>とか<a class="keyword" href="http://d.hatena.ne.jp/keyword/Tumblr">Tumblr</a>とか<a class="keyword" href="http://d.hatena.ne.jp/keyword/Vim">Vim</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AD%A1%BC%A5%D0%A5%A4%A5%F3%A5%C9">キーバインド</a>で一番良く押しそうなボタンとかいうどうでもいい理由から。</span></p> <p class="footnote"><a href="#fn-ea60b35d" name="f-ea60b35d" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">その他はAngularJS</span></p> <p class="footnote"><a href="#fn-726a2b8a" name="f-726a2b8a" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">実際はこの順序にならないかもしれない。<a href="http://ja.stackoverflow.com/questions/5304/rxjs-の-flatmap-の挙動が直感と異なる">javascript - RxJS &#x306E; `flatMap` &#x306E;&#x6319;&#x52D5;&#x304C;&#x76F4;&#x611F;&#x3068;&#x7570;&#x306A;&#x308B; - &#x30B9;&#x30BF;&#x30C3;&#x30AF;&#x30FB;&#x30AA;&#x30FC;&#x30D0;&#x30FC;&#x30D5;&#x30ED;&#x30FC;</a></span></p> </div> lepton9 Ansible GalaxyにGitBucketのroleを登録した hatenablog://entry/8454420450073976241 2014-11-16T15:51:17+09:00 2015-10-17T01:32:27+09:00 社内のsvn環境をgitに移行しようと思ってGitBucketの環境をansibleで構築してたのだけど、ふとAnsible Galaxyを見たらGitBucketのroleはまだ無かったし折角なので登録してみた。 https://galaxy.ansible.com/list#/roles/2155 これ。 githubにあるgitbucketリポジトリにインストールスクリプトが置いてあるので、基本的にはこのスクリプトをansibleのyaml記法に書き換えて作った。UbuntuとCentOSで起動することを確認している。 <p>社内の<a class="keyword" href="http://d.hatena.ne.jp/keyword/svn">svn</a>環境をgitに移行しようと思ってGitBucketの環境をansibleで構築してたのだけど、ふと<a href="https://galaxy.ansible.com/">Ansible Galaxy</a>を見たらGitBucketのroleはまだ無かったし折角なので登録してみた。</p> <p><a href="https://galaxy.ansible.com/list#/roles/2155">https://galaxy.ansible.com/list#/roles/2155</a></p> <p>これ。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>にあるgitbucket<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>に<a href="https://github.com/takezoe/gitbucket/tree/master/contrib">インストールスクリプト</a>が置いてあるので、基本的にはこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>をansibleの<a class="keyword" href="http://d.hatena.ne.jp/keyword/yaml">yaml</a>記法に書き換えて作った。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/CentOS">CentOS</a>で起動することを確認している。</p> <h3>Ansible Galaxyに登録するもの</h3> <p>複雑なrole作ってしまうとそれを作った人が実行する環境に最適化されたものが出来上がるので、他の人が再利用するのは難しかったりする。再利用しやすいroleを公開したいならなるべく単機能に絞ったほうが良いと思った。今回社内に構築したGitBucket環境は、GitBucketの他にnginxを入れてリバースプロキシとして使い、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%AB%B8%CA%BD%F0%CC%BE%BE%DA%CC%C0%BD%F1">自己署名証明書</a>生成して<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>でアクセスできるようにするところまでansibleでやっていたが、そこまでを一つのroleでやってしまうとnginxとか別にいらん人やhttpでも問題ない人には使ってもらうことができない。なのでGitBucketが立ち上がる必要最小限の構成をroleにした。</p> <h3>Role作成で覚えておくこと</h3> <p>ansible-examplesの<a href="https://github.com/ansible/ansible-examples/tree/master/tomcat-standalone">tomcat-standalone</a>眺めていていたら<code>libselinux-python</code>をインストールしていたので、これはなんで必要なのか不思議に思っていた。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fansible%2Fansible-examples" title="ansible/ansible-examples" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p>最近の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Red%20Hat">Red Hat</a>系の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%B9%A5%C8%A5%EA%A5%D3%A5%E5%A1%BC%A5%B7%A5%E7%A5%F3">ディストリビューション</a>ではデフォルトで<a class="keyword" href="http://d.hatena.ne.jp/keyword/SELinux">SELinux</a>が有効になっている。そうするとansibleのファイル操作系モジュールでエラーになってしまうので、それを避けるために<code>libselinux-python</code>をインストールしていたようだった。実際に<a class="keyword" href="http://d.hatena.ne.jp/keyword/CentOS">CentOS</a> 6.5の環境でansibleの<code>template</code>モジュールが下記のようなエラーになることを確認した。</p> <pre class="code" data-lang="" data-unlink>msg: Aborting, target uses selinux but python bindings (libselinux-python) aren&#39;t installed!</pre> <p>今回作ったroleでは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SELinux">SELinux</a>がインストールされていて、かつ無効でない場合に<code>libselinux-python</code>をインストールするようにしてある。<a href="#f-717f797f" name="fn-717f797f" title="今のところRed Hat系のみ対応">*1</a></p> <pre class="code" data-lang="" data-unlink>- name: Check if selinux is installed command: getenforce register: command_result ignore_errors: True - name: Install libselinux-python yum: name={{ item }} with_items: - epel-release - libselinux-python when: command_result|success and command_result.stdout != &#39;Disabled&#39;</pre> <p><a href="https://github.com/distkloc/ansible-role-gitbucket/blob/master/tasks/selinux.yml">ansible-role-gitbucket/selinux.yml at master · distkloc/ansible-role-gitbucket</a></p> <h3>参考</h3> <ul> <li><a href="http://qiita.com/hnakamur/items/4c5abbbbbb5623ce46ad">role&#x3092;&#x4F5C;&#x6210;&#x3057;&#x3066;Ansible Galaxy&#x306B;&#x767B;&#x9332;&#x3059;&#x308B;&#x30EF;&#x30FC;&#x30AF;&#x30D5;&#x30ED;&#x30FC; - Qiita</a></li> <li><a href="http://qiita.com/kiri/items/f329a35543022d6e45d0">AnsibleWorks Galaxy&#x306B;role&#x3092;&#x767B;&#x9332;&#x3057;&#x3066;&#x307F;&#x308B; - Qiita</a></li> <li><a href="http://blog.n-z.jp/blog/2014-06-02-ansible-galaxy.html">ansible-galaxy &#x3092;&#x4F7F;&#x3063;&#x3066;&#x307F;&#x305F; - @znz blog</a></li> </ul> <div class="footnote"> <p class="footnote"><a href="#fn-717f797f" name="f-717f797f" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">今のところ<a class="keyword" href="http://d.hatena.ne.jp/keyword/Red%20Hat">Red Hat</a>系のみ対応</span></p> </div> lepton9 MacBook Pro Retina買ってからやったこと (2014年版 開発環境+DTM環境編) hatenablog://entry/12921228815722761247 2014-04-28T15:08:26+09:00 2018-06-12T23:58:22+09:00 MacBook Pro 15-inch, Mid 2009からMacBook Pro Retina 13-inch, Late 2013に乗り換えた。 次に買い換えるとき絶対忘れるので何をしたか残しておこうと思った。 古い方のmacbookにはいらないものがたくさん入ってそうだったのと、新しい方は256GBのSSDで容量節約したかったので今回は移行アシスタントは使わず、人力でがんばった。 <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook%20Pro">MacBook Pro</a> 15-inch, Mid 2009から<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook%20Pro">MacBook Pro</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Retina">Retina</a> 13-inch, Late 2013に乗り換えた。 次に買い換えるとき絶対忘れるので何をしたか残しておこうと思った。 古い方の<a class="keyword" href="http://d.hatena.ne.jp/keyword/macbook">macbook</a>にはいらないものがたくさん入ってそうだったのと、新しい方は256GBの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>で容量節約したかったので今回は移行アシスタントは使わず、人力でがんばった。</p> <h3>コンピュータ名</h3> <p>いままで全然気にしたこともなかったけど、rebuild.fm ep.27聞いてからマシンに名前つけたいと思うようになった。</p> <p><a href="http://rebuild.fm/27/">Rebuild: 27: Dragon Quest, Docker and AngularJS (Naoya Ito)</a></p> <p>調べたらいろいろあって楽しい。</p> <p><a href="http://masahiror.hatenadiary.jp/entry/20060904/naming_matome">&#x30B5;&#x30FC;&#x30D0;&#x540D;&#x306A;&#x3069;&#x3001;&#x305F;&#x304F;&#x3055;&#x3093;&#x306E;&#x540D;&#x524D;&#x304C;&#x5FC5;&#x8981;&#x306A;&#x3068;&#x304D;&#x306B;&#x4F7F;&#x3048;&#x308B;&#x300C;&#x547D;&#x540D;&#x30B7;&#x30EA;&#x30FC;&#x30BA;&#x300D;&#x307E;&#x3068;&#x3081; - masahiror&#x306E;&#x6C17;&#x307E;&#x307E;&#x8A18;&#x9332;&#x7C3F;</a><a href="http://b.hatena.ne.jp/entry/http://masahiror.hatenadiary.jp/entry/20060904/naming_matome" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://masahiror.hatenadiary.jp/entry/20060904/naming_matome" alt="" class="http-bookmark" /></a></p> <p>結構迷ったけど、バンドとかやってたのもあって最終的にElectro Harmonixの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%D5%A5%A7%A5%AF%A5%BF%A1%BC">エフェクター</a>名をつけていくことにした。<br/> 最初なのでもちろん<code>big-muff</code>と命名した。かなり気に入っている。次のマシンは<code>small-clone</code>にしたい。</p> <p><a href="http://www.electroharmonix.co.jp/eh/index.html">Electro Harmonix エレクトロ・ハーモニックス</a></p> <p>設定自体は「システム環境設定」> 「共有」のコンピュータ名の変更で行う。</p> <h3>Command Line Tools for <span data-unlink>Xcode</span></h3> <p>homebrewを使うため。</p> <pre class="code" data-lang="" data-unlink>xcode-select --install</pre> <h3>dotfiles</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>から自分のdotfilesをcloneしてくる。</p> <p><a href="https://github.com/distkloc/dotfiles">distkloc/dotfiles</a></p> <p>homebrewやnodebrewインストール、goの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ作成、neobundle.<a class="keyword" href="http://d.hatena.ne.jp/keyword/vim">vim</a>のcloneとdotfilesの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%DC%A5%EA%A5%C3%A5%AF%A5%EA%A5%F3%A5%AF">シンボリックリンク</a>を作る<a href="https://github.com/distkloc/dotfiles/blob/master/bootstrap/mac.sh">簡単なシェルスクリプト</a>作ってるのでそれを実行する。</p> <h3>homebrew</h3> <p>dotfilesの中にBrewfile<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ作ってその中に<a href="https://github.com/distkloc/dotfiles/blob/master/Brewfile/Brewfile">Brewfile</a>置いてるので、</p> <pre class="code" data-lang="" data-unlink>brew bundle Brewfile/Brewfile</pre> <p>でパッケージとhomebrew-caskで入るアプリを一括インストール。最近はcaskの方に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ricty">Ricty</a>とかあって楽だし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SuperCollider">SuperCollider</a>まであって感動した。</p> <h4><span data-unlink>google日本語入力</span></h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/google">google</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/IME">IME</a>をcaskで入れた場合、そのままでは使えるようにならないので「システム環境設定」> 「キーボード」 > 「入力ソース」から<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>のソースを追加する。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20140427/20140427030657.png" alt="f:id:lepton9:20140427030657p:plain" title="f:id:lepton9:20140427030657p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>とりあえずひらがなと英数だけ追加した。</p> <h4>Alfredのおまじない</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/brew">brew</a> caskで入れたアプリを検索対象に含める。</p> <pre class="code" data-lang="" data-unlink>brew cask alfred link</pre> <p><a href="http://waka.github.io/2014/1/19/homebrew_cask.html">Macの環境構築にhomebrew-cask+Brewfile便利 - yo_waka's blog</a></p> <h3>デフォルトシェル変更</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/zsh">zsh</a>使う。</p> <pre class="code" data-lang="" data-unlink>chsh -s /bin/zsh</pre> <h3><span data-unlink>iTunes</span></h3> <p>90GBくらいあったので外付けHDDに移動することにした。HDDは<a class="keyword" href="http://d.hatena.ne.jp/keyword/LaCie">LaCie</a>の500GBを買った。</p> <p><a href="http://store.apple.com/jp/product/HB817J/A/lacie-500gb-porsche-design-usb-30-p9223-slim-hard-drive">LaCie 500GB Mobile Porsche Slim USB 3.0 Hard Drive</a></p> <p>これ。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/iTunes">iTunes</a>のデータ移動にはメディアファイルだけ移動する方法とライブラリ情報ファイルごと移動する方法がある。</p> <p><a href="http://worldwideweirdo.jp/?p=173">» iTunesをタイムカプセルに接続した外付けしたHDDに保存&使用感 WorldWideWeirdo</a></p> <p>今回はライブラリ情報ごと外付けに持っていく方法をとった。optionボタン押しながら<a class="keyword" href="http://d.hatena.ne.jp/keyword/iTunes">iTunes</a>を起動して外付けHDDに移動した<a class="keyword" href="http://d.hatena.ne.jp/keyword/iTunes">iTunes</a> Library.itlファイルを選択するだけで完了。</p> <p>あと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iTunes">iTunes</a>の認証解除もやっておいた。</p> <p><a href="http://nanapi.jp/53/">iTunesで認証したPCが5台を越えてしまったときの対処法 | nanapi [ナナピ]</a></p> <h3><span data-unlink>iPhoto</span></h3> <p>これも外付けに移動。<a class="keyword" href="http://d.hatena.ne.jp/keyword/iTunes">iTunes</a>と同じようにoptionボタン押しながら<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhoto">iPhoto</a>を起動。移動させた<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhoto">iPhoto</a> Libraryを選択する。</p> <p><a href="http://ah-sobot.com/iphoto-control">iPhotoの写真をMac外のディスクで管理する方法 | Ah-SOBOT</a></p> <h3><span data-unlink>オーディオインターフェイス</span></h3> <p>もともと<a href="http://www.roland.co.jp/products/jp/FA-66/">EDIROLのFA-66</a>をバスパワーで使っていたのだけれど、これ<a class="keyword" href="http://d.hatena.ne.jp/keyword/FireWire">FireWire</a>でしか繋ぐことができない。今回買った<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook%20Pro">MacBook Pro</a>にはそんな端子ついてない。<a class="keyword" href="http://d.hatena.ne.jp/keyword/apple">apple</a>は<a href="http://store.apple.com/jp/product/MD464ZM/A/apple-thunderbolt-firewire%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF">Thunderbolt - FireWire変換アダプタ</a>を出しているので、これを使って繋いでみたけど、バスパワーではまともに動作しなかった。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Roland">Roland</a>のFA-66の製品ページには</p> <blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Thunderbolt - <a class="keyword" href="http://d.hatena.ne.jp/keyword/FireWire">FireWire</a> アダプタで変換してのご使用は、動作を保証いたしかねます。正常に動作しないケースが確認されております。</p> <p><cite><a href="http://www.roland.co.jp/support/article/?q=confirmation&amp;p=FA-66&amp;id=1806511">FA-66 FireWire Macintosh 関連情報 :: FA-66 :: 動作確認情報 :: サポート :: ローランド</a></cite></p></blockquote> <p>とか書いてあるので仕方がないと思う。アダプター使ってセルフパワーにしたら動くかもしれないけど、コードが増えるのが嫌なので試してない。結局新しいオーディオ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%D5%A5%A7%A5%A4%A5%B9">インターフェイス</a>を買うことにした。</p> <p>NIのKOMPLETE AUDIO 6か<a href="http://www.roland.co.jp/products/jp/QUAD-CAPTURE/">RolandのQUAD-CAPTURE</a>で迷ったけど、QUAD-CAPTUREは出力用の標準フォンジャック端子が2つしかないのに対して、AUDIO 6は4つ付いていたのでAUDIO 6にした。</p> <p>AUDIO 6使ってみてわかったけど、ヘッドフォンモニターの出力と、マスター出力のボリューム調節を別々にできるのがとても便利だった。</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B004YPRPJ6/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41AJB8EtLHL._SL160_.jpg" class="hatena-asin-detail-image" alt="NATIVE INSTRUMENTS ネイティブインストゥルメンツ/KOMPLETE AUDIO 6" title="NATIVE INSTRUMENTS ネイティブインストゥルメンツ/KOMPLETE AUDIO 6"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B004YPRPJ6/dxytt6r-22/">NATIVE INSTRUMENTS ネイティブインストゥルメンツ/KOMPLETE AUDIO 6</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Native%20Instruments">Native Instruments</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2013/11/01</li><li><span class="hatena-asin-detail-label">メディア:</span> エレクトロニクス</li><li><a href="http://d.hatena.ne.jp/asin/B004YPRPJ6/dxytt6r-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>あと、公式サイトのサポートページに書いてあったけど、オーディオ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%D5%A5%A7%A5%A4%A5%B9">インターフェイス</a>は繋ぐUSBポートに相性があるらしい。</p> <blockquote><p>ほとんどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Macbook">Macbook</a>および<a class="keyword" href="http://d.hatena.ne.jp/keyword/iMac">iMac</a>の内部ルーティングでは、特定の一つのポートのみが<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%AA%A1%BC%A5%C7%A5%A3%A5%AA">USBオーディオ</a>・デ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>に適しています。このポートの物理的な場所は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>の機種やリビジョンによって変わってきます。アップルのシステム情報(アプリケーション>ユーティリティ)を開く事によって、内部USBの配置を確認し、オーディオ・インターフェースのための正確なポートを見つけることができます。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%C7%A5%A3%A5%AA%A5%A4%A5%F3%A5%BF%A1%BC%A5%D5%A5%A7%A1%BC%A5%B9">オーディオインターフェース</a>は内蔵カメラとそのポートを共有するべきではありません。</p> <p><cite><a href="http://www.native-instruments.com/jp/support/knowledge-base/show/405/nimac/">NI&#x30CF;&#x30FC;&#x30C9;&#x30A6;&#x30A7;&#x30A2;&#x30C7;&#x30D0;&#x30A4;&#x30B9;&#x304C;&#x8A8D;&#x8B58;&#x3055;&#x308C;&#x306A;&#x3044;(Mac) &ndash; Native Instruments</a></cite></p></blockquote> <p>内蔵カメラとポートを共有すべきではない。らしい。システム情報開いて確認してみた。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20140427/20140427165957.png" alt="f:id:lepton9:20140427165957p:plain" title="f:id:lepton9:20140427165957p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>肝心の内蔵カメラ(<a class="keyword" href="http://d.hatena.ne.jp/keyword/iSight">iSight</a>)が見当たらなかった。これで問題なく動いてるからまあいいやという感じ。</p> <h3><span data-unlink>Ableton Live</span></h3> <p>Liveは8をまだ使ってる。ライセンスについては古いマシンに入ってるLiveをアンインストールすれば大丈夫そう。</p> <p><a href="http://www.h-resolution.com/ableton/license.html">Ableton Live ライセンスについて</a></p> <p>Liveの本体は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ableton">Ableton</a>の公式サイトにログインすると32bitか64bitを選んでDLすることができる。Max for Liveや購入したPartner Instruments(今はPackという名前になってる)もログインするだけでDLできる。一々パッケージのDVDから入れる必要なくてすごい便利。すごい。</p> <p><a href="https://www.ableton.com/ja/">Music production with Live 9 and Push | Ableton</a></p> <p>でもそれなりに容量大きいし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ableton">Ableton</a> Suite 8についてた音源やPackの一部はDLできないみたいなので、Live本体だけDLして、残りは古いマシンからLiveのライブラリを外付けHDDに持ってくることにした。</p> <p>デフォルトのLiveライブラリは<code>~/Library/Application Support/Ableton/Library/</code>にある。これをまるごと外付けHDDに移動して、新しいマシンでLiveを開いて「環境設定」 > 「Library」 > 「ライブラリロケーション」から「ロケーションを変更」を選択して移動したLibraryディテクトリを選択して暫く待つ。終わったら同じところにある「ライブラリを修復」もやっておくといいかもしれない。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20140427/20140427174820.png" alt="f:id:lepton9:20140427174820p:plain" title="f:id:lepton9:20140427174820p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>自分で作ったLiveセットは、ライブラリさえ壊れてなけばどこにおいても問題なさそうな感じだった。ただしLiveのライブラリ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに入れていないサンプルがあったり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/VST">VST</a>の場所が変わると読み込めないので、都度場所を教えてあげる必要がある。もしかしたらメニューの「ファイル」 > 「ファイルの管理」 > 「ライブラリの管理」で直せるかもしれない。</p> <h3><span data-unlink>Waves</span></h3> <p>L3のライセンスをiLokに入れてたのだけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Waves">Waves</a>のAuthorize方式が変わって専用アプリ(WLC)でオンライン認証できるようになってた。</p> <p><a href="http://www.minet.jp/support/content/view/595/26/">Media Integration | サポート</a></p> <p>ただ、これを使うには最新のWLCをインストールして、WLC上でiLokに入っているライセンスを一度<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>上に戻す必要がある。しかし僕のiLokの<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>は壊れたのか認識されなかった。この場合、WLC上でライセンスを年に一回だけRecoverできるので、これで修復しなければならない。</p> <p>ここが<a class="keyword" href="http://d.hatena.ne.jp/keyword/Waves">Waves</a>の商売上手なところというかやらしいところというか、このRecover機能は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Waves">Waves</a> Update Planに加入していないと利用することができない。しかたがないので$70支払って一年間加入することにした。悲しい。</p> <p>補足だけど、2014年4月現在、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OSX">OSX</a> 10.9向けのWLCは<a href="http://www.waves.com/downloads/v9">このページ</a>からoffline installerをDLしてくる必要がある。</p> <h3>Plugin Alliance</h3> <p>brainworxのbx_controlとbx_soloの再アクティベートをする必要があった。</p> <p><a href="http://plugin-alliance.com/en/downloads.html">Downloads - PLUGIN ALLIANCE - ENGLISH</a></p> <p>まずここから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>をダウンロード、インストールする。Liveを起動して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>を立ち上げるとLicense認証のフォームが出てくるので、Plugin Allianceのログインアカウントとパスワードを入力した。だけど何故か認証失敗エラー出る。仕方ないのでオフライン認証したら今度はLiveがエラーで落ちてしまって認証すらすることができなくなってしまったので一旦<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>をアンインストールすることにした。</p> <p>アンインストール方法は、<code>/Library/Audio/Plug-Ins/VST/Plugin Alliance</code>の中の.<a class="keyword" href="http://d.hatena.ne.jp/keyword/vst">vst</a>の削除と<code>/Library/Audio/Plug-Ins/VST3</code>の中の.vst3の削除、あと<code>~/Library/Application Support/Plugin Alliance</code>の中にライセンスのファイルがあるのでそれも削除する。</p> <p>しばらく原因がわからなかったので後回しにしてたけど、ふと思いついて、ログインアカウントのメールアドレスをサイト上で変更したらすんなりと認証通った。僕はメールアドレスに<a class="keyword" href="http://d.hatena.ne.jp/keyword/gmail">gmail</a>の<code>+</code>を使う<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%A4%A5%EA%A5%A2%A5%B9">エイリアス</a>を利用していたのだけれど、どうもその<code>+</code>がログインアカウントメールアドレスに入ってるとうまくいかないようだった。</p> <p>あとは古いマシンでactivateされているライセンスをサイト上でdeactivateすればよい。</p> <p><a href="https://plugin-alliance.com/en/myplugins.html">myPLUGINS - PLUGIN ALLIANCE - ENGLISH</a></p> <p>myPLUGINS > View &amp; Manage Registered Pluginsから行う。</p> <h3>Max6</h3> <p>これも再度<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%BD%A5%E9%A5%A4%A5%BA">オーソライズ</a>。</p> <p><a href="http://www.mi7.co.jp/products/cycling74/authorization/auth_max6.php">MI7 Japan - Cycling 74 | オーソリゼーション: Max 6</a></p> <p>この通りにやっていくだけだった。同時に複数マシンで起動しないなら何台でも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%BD%A5%E9%A5%A4%A5%BA">オーソライズ</a>できるみたい。結構緩くて嬉しい。</p> <h3>1Password</h3> <p>長い間<a class="keyword" href="http://d.hatena.ne.jp/keyword/LastPass">LastPass</a>を使っていたけど、なんかサイトの管理画面がずっと垢抜けてなくてダサいから1Passwordに乗り換えることにした。</p> <p><a href="http://n1kumeet5.com/2011/11/1password/">[Mac]lastpassから1Passwordに移行してみる | N1kuMeet5</a></p> <p>だいたいこちらに書いてある通りにやったら簡単に移行できた。</p> <p>あとは<a class="keyword" href="http://d.hatena.ne.jp/keyword/LastPass">LastPass</a>退会する。</p> <p><a href="https://lastpass.com/delete_account.php">LastPass - あなたのアカウントの削除</a></p> <h3>Time Machine</h3> <p>外付けHDDもTime Machineのバックアップ対象に加える。</p> <p>Time Machine環境設定からオプションを開くと、外付けHDDが除外対象になっているので外すだけ。<a class="keyword" href="http://d.hatena.ne.jp/keyword/AirMac">AirMac</a>にHDD繋いでたりする場合、そのHDDはTime Machineバックアップ対象にできないので諦めましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20140427/20140427185146.png" alt="f:id:lepton9:20140427185146p:plain" title="f:id:lepton9:20140427185146p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>キャッシュとDownload<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リは特にバックアップいらないかと思って除外してみた。</p> <pre class="code" data-lang="" data-unlink>~/Library/Caches /Library/Caches /System/Library/Caches ~/Downloads</pre> <h3>解像度変更</h3> <p>画面ちょっと広く使えるように変更する。</p> <p>「システム環境設定」 > 「ディスプレイ」 > 「ディスプレイ」で解像度: 変更を選択。一個右へ。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20140427/20140427200915.png" alt="f:id:lepton9:20140427200915p:plain" title="f:id:lepton9:20140427200915p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>おわり</h3> <p>とても疲れた。もうやりたくない。</p> lepton9 コーディングを支える技術、読んだ hatenablog://entry/12921228815719633639 2014-03-09T17:31:32+09:00 2018-06-12T23:40:23+09:00 コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)作者: 西尾泰和出版社/メーカー: 技術評論社発売日: 2013/04/24メディア: 単行本(ソフトカバー)この商品を含むブログ (37件) を見る 流行りの技術や特定の言語によらないプログラミングの学び方を学ぶ本。構成がよく考えられていて首尾一貫しているので自然に頭に入ってくるし楽しく読むことができた。少し感想を書きたい。 名前というものがある 名前を使う前までは番号を使ってたんだけど、人間は番号だけ見ても何のことかわからないしすぐ忘れちゃう。だから番号に対応するオブジェクトに名前をつけて… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477415654X/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51nXP3TKXVL._SL160_.jpg" class="hatena-asin-detail-image" alt="コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)" title="コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477415654X/dxytt6r-22/">コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 西尾泰和</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2013/04/24</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/477415654X/dxytt6r-22" target="_blank">この商品を含むブログ (37件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>流行りの技術や特定の言語によらないプログラミングの学び方を学ぶ本。構成がよく考えられていて首尾一貫しているので自然に頭に入ってくるし楽しく読むことができた。少し感想を書きたい。</p> <h3>名前というものがある</h3> <p>名前を使う前までは番号を使ってたんだけど、人間は番号だけ見ても何のことかわからないしすぐ忘れちゃう。だから番号に対応するオブジェクトに名前をつけてあげたらわかりやすくて便利になった。とても便利でよかったんだけど、名前とオブジェクト対応表が一つだけだと、うっかり同じ名前を使ってしまうと競合して壊れるから注意して憶えておく必要がある。人間は無意識に記憶を改竄したりするし、ずっと対応表について思いを馳せていることはできない。じゃあどうしたかというとそこでスコープというものが産まれた。</p> <p>こんな感じで人がいろいろ工夫して言語が進化していく過程が書かれている。普段考えもしない細部にも歴史がある。</p> <h3>多重継承に対する言語間の違い</h3> <p>多重継承には複数の親クラスの間で同じ名前のメソッドがあったとき、どちらを優先するかという問題がある。僕は<a class="keyword" href="http://d.hatena.ne.jp/keyword/c%23">c#</a>メインで使っているので、多重継承禁止<a href="#f-37585833" name="fn-37585833" title="interface除く">*1</a>するのがすっきりしてていいと思ってた。でも果敢にも多重継承できるようにしちゃって、やっぱり結構苦労していたりする言語とか、moduleのみmix-inを可能にした<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>とか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/scala">scala</a>なんかは初期からtraitがあったりする。それぞれの言語の実装の違いが簡潔にまとめられていてとてもわかりやすいと思った。</p> <h3>コラム</h3> <p>コラムがいくつかあって、その中でも</p> <ul> <li>理解を確認するためにはまずアウトプット</li> <li>何を学べがよいかがわからない理由</li> <li>具体的な知識と抽象的な知識</li> <li>噛み砕く</li> <li>必要なところからかじる</li> <li>おおまかにつかんで徐々に詳細化する</li> <li>端から順番に写経する</li> </ul> <p>このあたりなんだけど、なかなかこういう技術の学び方って文章化されにくいし、初心者の人はこのコラムだけ読んでもかなり参考になると思う。</p> <p>僕は去年、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B1%FE%CD%D1%BE%F0%CA%F3%B5%BB%BD%D1%BC%D4%BB%EE%B8%B3">応用情報技術者試験</a>を受けていたのだけれど、その試験用に勉強した、こういうものがある、そういうものもある、みたいな広く薄い知識に、歴史という重みを与えてくれたのがこの本だった。海苔だけだったのに海苔に餅が包まれて質量あるし砂糖醤油で食べると美味しいみたいな感じです。もっと早く読めばよかった。</p> <ul> <li><a href="http://nhiro.org/langbook/">「コーディングを支える技術」著者公式ページ</a></li> </ul> <p>こちらに補足記事が載っているので全部読みましょう。</p> <div class="footnote"> <p class="footnote"><a href="#fn-37585833" name="f-37585833" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">interface除く</span></p> </div> lepton9 httpまたはhttpsでのアクセスを強制するカスタムフィルター hatenablog://entry/12921228815718295718 2014-02-15T23:14:02+09:00 2014-02-15T23:14:02+09:00 httpsでしかアクセスさせたくないページの場合、そのページのアクションメソッドに [RequireHttps]属性を付けると、httpでアクセスしたとき自動時にhttpsにリダイレクトさせることができます。 でもその逆、httpsでアクセスしたときにhttpにリダイレクトさせるような属性は用意されていません。なので自分で作る必要があります。 これ既に作っていた人がいて、それがこちらの記事。消えちゃってるのでInternetArchiveとGistの直リンク。 Switching between Http and Https automatically with ASP.NET MVC - F… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>でしかアクセスさせたくないページの場合、そのページのアクションメソッドに <code>[RequireHttps]</code>属性を付けると、httpでアクセスしたとき自動時に<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>にリダイレクトさせることができます。</p> <p>でもその逆、<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>でアクセスしたときにhttpにリダイレクトさせるような属性は用意されていません。なので自分で作る必要があります。</p> <p>これ既に作っていた人がいて、それがこちらの記事。消えちゃってるのでInternetArchiveとGistの直リンク。</p> <ul> <li><a href="https://web.archive.org/web/20130525163415/http://blog.fearofaflatplanet.me.uk/switching-between-http-and-https-automaticall">Switching between Http and Https automatically with ASP.NET MVC - Fear of a Flat Planet</a></li> <li><a href="https://gist.github.com/robertmilne/993231">MyController.cs</a></li> </ul> <p>このカスタムフィルター属性結構良いと思うのですが、2点おしいところがあります。</p> <ol> <li>非<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSL">SSL</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSL">SSL</a>ページで異なる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a><a href="#f1" name="fn1" title="IPも">*1</a>やポートを使用している場合対応できない<a href="#f2" name="fn2" title="これはRequireHttps属性も対応してない">*2</a></li> <li>クエリストリングやアンカー(#)を引き継いでリダイレクトできない<a href="#f3" name="fn3" title="UrlBuilder.Pathにクエリストリング以下を設定するとランタイムエラーになる">*3</a></li> </ol> <p>1は開発サイトとかでありがち。</p> <p>その辺を考慮して少し修正した対応版作りました。</p> <pre class="code lang-cs" data-lang="cs" data-unlink><span class="synStatement">using</span> System.Web.Mvc; <span class="synType">namespace</span> Utils.Filter { <span class="synType">public</span> <span class="synType">enum</span> Scheme { Ignore, Http, Https, } [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = <span class="synConstant">true</span>, AllowMultiple = <span class="synConstant">false</span>)] <span class="synType">public</span> <span class="synType">class</span> RequireHttpSchemeAttribute : FilterAttribute, IAuthorizationFilter { <span class="synType">private</span> <span class="synType">readonly</span> Scheme scheme; <span class="synType">public</span> RequireHttpSchemeAttribute(Scheme scheme) { <span class="synStatement">this</span>.scheme = scheme; } <span class="synType">public</span> <span class="synType">void</span> OnAuthorization(AuthorizationContext filterContext) { <span class="synStatement">if</span> ((scheme == Scheme.Https) &amp;&amp; !filterContext.HttpContext.Request.IsSecureConnection) { filterContext.Result = GetResult(filterContext, <span class="synConstant">&quot;https://localhost:1443&quot;</span>); } <span class="synStatement">else</span> <span class="synStatement">if</span> ((scheme == Scheme.Http) &amp;&amp; filterContext.HttpContext.Request.IsSecureConnection) { filterContext.Result = GetResult(filterContext, <span class="synConstant">&quot;http://localhost:1180&quot;</span>); } } <span class="synType">private</span> <span class="synType">static</span> RedirectResult GetResult(AuthorizationContext filterContext, <span class="synType">string</span> baseUrl) { var uri = <span class="synStatement">new</span> Uri(baseUrl); <span class="synStatement">return</span> <span class="synStatement">new</span> RedirectResult(uri.GetLeftPart(UriPartial.Authority) + filterContext.HttpContext.Request.RawUrl); } } } </pre> <p>URLベタ書きの部分は普通は<code>Web.config</code>とかに記述してあると思うからそれを使いましょう。</p> <h3>使い方</h3> <p>こんな感じです。</p> <pre class="code lang-cs" data-lang="cs" data-unlink>[RequireHttpScheme(Scheme.Http)] <span class="synType">public</span> <span class="synType">virtual</span> ActionResult HttpOnly() { <span class="synStatement">return</span> View(); } </pre> <p>これは<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>でアクセスされた場合、httpにリダイレクトする。</p> <pre class="code lang-cs" data-lang="cs" data-unlink>[RequireHttpScheme(Scheme.Https)] <span class="synType">public</span> <span class="synType">virtual</span> ActionResult HttpsOnly() { <span class="synStatement">return</span> View(); } </pre> <p>これはhttpでアクセスされた場合、<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>にリダイレクトする。</p> <pre class="code lang-cs" data-lang="cs" data-unlink>[RequireHttpScheme(Scheme.Https)] <span class="synType">public</span> <span class="synType">class</span> AlmostSecureController : Controller { <span class="synType">public</span> <span class="synType">virtual</span> ActionResult HttpsOnly() { <span class="synStatement">return</span> View(); } [RequireHttpScheme(Scheme.Ignore)] <span class="synType">public</span> <span class="synType">virtual</span> ActionResult DoesntMatter() { <span class="synStatement">return</span> View(); } } </pre> <p>これはコントローラー自体に属性が付いていますので、このコントローラー内の全てのアクションメソッドで<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>でのアクセスを強制しようとしています。しかし例外として<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%C3%C4%EA">特定</a>のアクションメソッドにはリダイレクト処理をさせたくないという場合があります。<br/> そういうときに例外にしたいアクションメソッドに<code>Scheme.Ignore</code>を設定した<code>RequireHttpScheme</code>属性を付けてあげると、そのアクションメソッドでは何も起きなくなります。<a href="#f4" name="fn4" title="でもこういう場合は往々にしてこのメソッドだけhttpアクセスを強制させたかったりするので、Scheme.IgnoreじゃなくてScheme.httpを設定することになると思う">*4</a> 一つのコントローラー内に沢山アクションメソッドがある場合に便利かもしれませんね。</p> <div class="footnote"> <p class="footnote"><a href="#fn1" name="f1" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">IPも</span></p> <p class="footnote"><a href="#fn2" name="f2" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">これはRequireHttps属性も対応してない</span></p> <p class="footnote"><a href="#fn3" name="f3" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">UrlBuilder.Pathにクエリストリング以下を設定するとランタイムエラーになる</span></p> <p class="footnote"><a href="#fn4" name="f4" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">でもこういう場合は往々にしてこのメソッドだけhttpアクセスを強制させたかったりするので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Scheme">Scheme</a>.Ignoreじゃなくて<a class="keyword" href="http://d.hatena.ne.jp/keyword/Scheme">Scheme</a>.httpを設定することになると思う</span></p> </div> lepton9 2週間で応用情報技術者試験に合格するためにやったこと hatenablog://entry/12921228815716666592 2014-01-19T18:29:57+09:00 2018-06-12T23:49:34+09:00 午後問題が時間切れで全然出来た感じがしなかったので駄目だったかなーと思って忘れていた応用情報技術者試験の合格証が届いていました。だから何をしたか書いておこうと思いました。 <p>午後問題が時間切れで全然出来た感じがしなかったので駄目だったかなーと思って忘れていた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B1%FE%CD%D1%BE%F0%CA%F3%B5%BB%BD%D1%BC%D4%BB%EE%B8%B3">応用情報技術者試験</a>の合格証が届いていました。だから何をしたか書いておこうと思いました。</p> <h3>0からのスタートではない</h3> <p>当時の僕はwebアプリケーションエンジニアで実務経験4年でした。プログラミング、セキュリティの知識はあるけどインフラやストラテ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B8%A1%BC">ジー</a>はほぼわからん状態からのスタートでした。</p> <p>受験したのは2013年秋期。初受験です。ITパスポートや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%F0%CB%DC%BE%F0%CA%F3%B5%BB%BD%D1%BC%D4%BB%EE%B8%B3">基本情報技術者試験</a>も受けたことがないので、IT系の試験としても初でした。</p> <h3>やったこと</h3> <h4>勉強開始1日目</h4> <p>まず午前の過去問を一回分だけ解きました。6割とれてなかったと思います。まだ慌てるような時間じゃないので点数は気にしません。どんな問題がどのような形式で出るかを掴むことが重要。</p> <h4>2~11日目</h4> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://itunes.apple.com/jp/app/%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id398338957?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/4afd4a057149ca8b3db9f15dfe8e069427efcb71/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple122%2Fv4%2F8b%2Fc4%2F88%2F8bc48895-513a-9f56-0622-e4d499f33223%2Fsource%2F100x100bb.jpg" alt="応用情報技術者 午前 一問一答問題集" title="応用情報技術者 午前 一問一答問題集" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://itunes.apple.com/jp/app/%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id398338957?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank">応用情報技術者 午前 一問一答問題集</a></p><ul><li class="itunes-embed-artist">Tokyo Interactive</li><li class="itunes-embed-genre">教育</li><li class="itunes-embed-price">¥840</li><li class="itunes-embed-badge"><a href="https://itunes.apple.com/jp/app/%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id398338957?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div></p> <p>この<a class="keyword" href="http://d.hatena.ne.jp/keyword/iphone%A5%A2%A5%D7%A5%EA">iphoneアプリ</a>で午前の過去問を解き続けました。 無料お試し版もある。</p> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://itunes.apple.com/jp/app/%E5%85%A8%E5%95%8F%E8%A7%A3%E8%AA%AC%E4%BB%98-%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id406324144?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/d8a875305035b2e185b3061425bfb651ef062fa1/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis5-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple125%2Fv4%2Fb1%2F24%2F6f%2Fb1246f7c-4023-76a6-1ab3-a58c2747ec84%2Fsource%2F100x100bb.jpg" alt="全問解説付 応用情報技術者 午前 一問一答問題集" title="全問解説付 応用情報技術者 午前 一問一答問題集" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://itunes.apple.com/jp/app/%E5%85%A8%E5%95%8F%E8%A7%A3%E8%AA%AC%E4%BB%98-%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id406324144?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank">全問解説付 応用情報技術者 午前 一問一答問題集</a></p><ul><li class="itunes-embed-artist">Tokyo Interactive</li><li class="itunes-embed-genre">教育</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://itunes.apple.com/jp/app/%E5%85%A8%E5%95%8F%E8%A7%A3%E8%AA%AC%E4%BB%98-%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%8D%88%E5%89%8D-%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E5%95%8F%E9%A1%8C%E9%9B%86/id406324144?mt=8&uo=4&at=10lrRd" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div></p> <p>問題ごとに不正解、正解、二回連続正解かを記録してくれているので後で見返すのに便利でした。</p> <p>問題数が少ないというレビューがありましたが、用語問題であれば選択肢全てに簡単な解説があるので、正解の選択肢だけではなく、他の選択肢についても理解していけば十分カバーできると思います。</p> <p>解説を読んでもわからないときは参考書を読みました。</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774193151/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51HKPqtv8XL._SL160_.jpg" class="hatena-asin-detail-image" alt="平成30年度【春期】【秋期】応用情報技術者 合格教本 (情報処理技術者試験)" title="平成30年度【春期】【秋期】応用情報技術者 合格教本 (情報処理技術者試験)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774193151/dxytt6r-22/">平成30年度【春期】【秋期】応用情報技術者 合格教本 (情報処理技術者試験)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 大滝みや子,<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%C5%E8%CD%B5%BB%CB">岡嶋裕史</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/12/08</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/4774193151/dxytt6r-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>これ。かなり分厚いのでよっぽど暇か勉強が好きじゃないとこんな本完読できないと思う。問題解いて不明点を理解するためだけに使いました。</p> <p>この期間、仕事が忙しかったりして2日ほど勉強さぼった。</p> <h4>12~13日目</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/iphone%A5%A2%A5%D7%A5%EA">iphoneアプリ</a>で引き続き午前問題を解きつつ、午後の過去問を一回分解きました。本番で時間内に解けそうな気がしませんでした。</p> <p>ネットの体験談とか読んでると、午後の問題は午前の勉強で十分事足りるとか書いてありましたが、不安になってきたので問題集を買いました。</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477419347X/dxytt6r-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/61a6HdZyqdL._SL160_.jpg" class="hatena-asin-detail-image" alt="平成30-01年度 応用情報技術者 試験によくでる問題集【午後】 (情報処理技術者試験)" title="平成30-01年度 応用情報技術者 試験によくでる問題集【午後】 (情報処理技術者試験)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477419347X/dxytt6r-22/">平成30-01年度 応用情報技術者 試験によくでる問題集【午後】 (情報処理技術者試験)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 大滝みや子</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/03/13</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/477419347X/dxytt6r-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>解説しっかりしてるしそれなりに役に立ったと思う。</p> <h4>14日目</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/iphone%A5%A2%A5%D7%A5%EA">iphoneアプリ</a>は結局1周半しか通せませんでしたが、この時点で午前の過去問を解くと7割は超えられるようになっていました。</p> <p>午後問題は問題集にさらっと目を通すくらいにとどめました。気休めにはなった。</p> <h4>当日</h4> <p>欠席者が多かった気がする。雨が降っていたからかもしれない。 会場が大学とかだと時計が無かったりするので持参しないと悲惨なことになります。</p> <h3>結果</h3> <p>気になる人もいると思いますので恥ずかしいけど書いておきます。</p> <table> <thead> <tr> <th style="text-align:center;">午前 </th> <th style="text-align:center;"> 午後</th> </tr> </thead> <tbody> <tr> <td style="text-align:center;">73.75 </td> <td style="text-align:center;"> 61</td> </tr> </tbody> </table> <p>まあ2週間ならこんなもの<a href="#f-b3ea8d50" name="fn-b3ea8d50" title="ということにしておく">*1</a>。 午後はぎりぎりのラインです。予想通り時間切れで点数を失いました。本当に危なかった。</p> <h3>午後対策について</h3> <p>過去問解いたり当日の試験解いたりして思いましたが、午後問題はITの試験というより国語の試験です。読解力がモノを言ってきます。わからなくても問題文中にヒントや答えが書いてあったりするので、決して諦めないことが重要だと思いました。何か書けば点が貰えます。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%BF%C0%AE26%C7%AF">平成26年</a>以降の試験について</h3> <p>昨今の情報漏洩事件を反映して、試験の方もセキュリティの問題に比重が置かれて行くようです。特に2013年までとは違って、<strong>2014年春期からは午後問題でセキュリティの問題が必須になる</strong>ので注意が必要です。</p> <blockquote><p>午前試験において「中分類11 セキュリティ」の出題比率を高くします。<br /> 午後試験において「情報セキュリティ分野」を選択問題から必須問題に変更します。<br /> なお、出題する各分野の配点に変更はありません。</p> <p><cite><a href="http://www.ipa.go.jp/about/press/20131029.html" target="_blank">プレス発表  iパス(ITパスポート試験)をはじめとする情報処理技術者試験の出題構成の見直しについて:IPA 独立行政法人 情報処理推進機構</a></cite></p></blockquote> <h3>勉強してよかった</h3> <p>あんまりこういう資格で転職とかに有利になることは無いけれど、広く浅く知識が習得できるし、なんとなく用語しか知らなかったものも仕組みが分かったりして楽しかったです。高度も受けてみたいと思った。</p> <h3>勉強中に参考にした記事</h3> <ul> <li><a href="http://tarte41.hatenablog.com/entry/20110210/1297436006">&#x3010;IT&#x3011;&#x4ED5;&#x4E8B;&#x3092;&#x3057;&#x306A;&#x304C;&#x3089;&#xFF12;&#x9031;&#x9593;&#x3067;&#x5FDC;&#x7528;&#x60C5;&#x5831;&#x6280;&#x8853;&#x8005;&#x8A66;&#x9A13;&#x306B;&#x5408;&#x683C;&#x3059;&#x308B;&#x65B9;&#x6CD5; - &#x3042;&#x307E;&#x3042;&#x307E;&#x304F;&#x308D;&#x306B;&#x304F;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://tarte41.hatenablog.com/entry/20110210/1297436006" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://tarte41.hatenablog.com/entry/20110210/1297436006" alt="" class="http-bookmark" /></a></li> <li><a href="http://d.hatena.ne.jp/tek_koc/20100110/1263097202">http://d.hatena.ne.jp/tek_koc/20100110/1263097202</a><a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/tek_koc/20100110/1263097202" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/tek_koc/20100110/1263097202" alt="" class="http-bookmark" /></a></li> <li><a href="http://d.hatena.ne.jp/tek_koc/20100411/1270986619">http://d.hatena.ne.jp/tek_koc/20100411/1270986619</a><a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/tek_koc/20100411/1270986619" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/tek_koc/20100411/1270986619" alt="" class="http-bookmark" /></a></li> <li><a href="http://nanapi.jp/79455/">&#x904E;&#x53BB;&#x554F;&#x3092;&#x7E70;&#x308A;&#x8FD4;&#x305D;&#x3046;&#xFF01;&#x5FDC;&#x7528;&#x60C5;&#x5831;&#x6280;&#x8853;&#x8005;&#x8A66;&#x9A13;&#x306E;&#x5BFE;&#x7B56;&#x6CD5; | nanapi [&#x30CA;&#x30CA;&#x30D4;]</a><a href="http://b.hatena.ne.jp/entry/http://nanapi.jp/79455/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://nanapi.jp/79455/" alt="" class="http-bookmark" /></a></li> <li><a href="http://ysadaharu.hatenablog.jp/entry/2014/01/04/040733">&#x3010;2014&#x3011;&#x5FDC;&#x7528;&#x60C5;&#x5831;&#x6280;&#x8853;&#x8005; &#x304A;&#x3059;&#x3059;&#x3081;&#x53C2;&#x8003;&#x66F8;&#x30E9;&#x30F3;&#x30AD;&#x30F3;&#x30B0; - ysadaharuhatenablog</a><a href="http://b.hatena.ne.jp/entry/http://ysadaharu.hatenablog.jp/entry/2014/01/04/040733" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://ysadaharu.hatenablog.jp/entry/2014/01/04/040733" alt="" class="http-bookmark" /></a> <a href="#f-f135fca7" name="fn-f135fca7" title="当時読んだのは2012版だけど新しい版を貼っておく">*2</a></li> </ul> <div class="footnote"> <p class="footnote"><a href="#fn-b3ea8d50" name="f-b3ea8d50" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ということにしておく</span></p> <p class="footnote"><a href="#fn-f135fca7" name="f-f135fca7" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">当時読んだのは2012版だけど新しい版を貼っておく</span></p> </div> lepton9 はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた hatenablog://entry/12921228815714115306 2013-12-14T16:51:33+09:00 2013-12-14T16:51:33+09:00 はてなブログのboilerplateが公開されている このboilerplateにはコンパイル前のlessとコンパイル後のcssが含まれている どうせならlessで書いてコンパイルしたい gruntを使えばlessファイルの保存を検知して自動コンパイルするタスクが組める gruntを使うにはnode.jsのパッケージ管理ツールnpmが必要 nodebrewならnode.jsのバージョンも管理できる ということなので、はてなブログのテーマを作ろうとしたら何故かnodebrewのインストールから始めることになった。 nodebrewのインストール hokaccha/nodebrew node.js… <ol> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>の<a href="https://github.com/hatena/Hatena-Blog-Themes/tree/master/boilerplate">boilerplate</a>が公開されている</li> <li>このboilerplateにはコンパイル前のlessとコンパイル後の<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>が含まれている</li> <li>どうせならlessで書いてコンパイルしたい</li> <li>gruntを使えばlessファイルの保存を検知して自動コンパイルするタスクが組める</li> <li>gruntを使うにはnode.jsのパッケージ管理ツールnpmが必要</li> <li>nodebrewならnode.jsのバージョンも管理できる</li> </ol> <p>ということなので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>のテーマを作ろうとしたら何故かnodebrewのインストールから始めることになった。</p> <h3>nodebrewのインストール</h3> <ul> <li><a href="https://github.com/hokaccha/nodebrew">hokaccha/nodebrew</a></li> <li><a href="http://tacamy.hatenablog.com/entry/2013/02/10/141434">node.js 入れるなら nodebrew が超簡単 - tacamy memo</a></li> </ul> <p>この辺り読んで入れた。僕は<code>nodebrew install</code>してしまったけど、<code>nodebrew install-binary</code>にしたほうが速いしいいと思う。<br/> 知らずに<code>nodebrew install</code>したら大変時間が掛かってたいへん大変だった。</p> <h3>gruntのインストール</h3> <p><a href="http://kojika17.com/2013/03/grunt.js-memo.html">Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17</a></p> <p>このへん。プラグインについては、まずgruntを入れて</p> <pre class="code" data-unlink>npm install grunt --save-dev</pre> <p>lessをコンパイルする <a href="https://github.com/gruntjs/grunt-contrib-less">grunt-contrib-less</a> と</p> <pre class="code" data-unlink>npm install grunt-contrib-less --save-dev</pre> <p>ファイルを監視して何かをする <a href="https://github.com/steida/grunt-este-watch">grunt-este-watch</a> と</p> <pre class="code" data-unlink>npm install grunt-este-watch --save-dev</pre> <p>サーバーに繋いでLiveReloadする <a href="https://github.com/gruntjs/grunt-contrib-connect">grunt-contrib-connect</a> を入れた。</p> <pre class="code" data-unlink>npm install grunt-contrib-connect --save-dev</pre> <p>grunt-contrib-watchではなくてgrunt-este-watchにしたのは軽いから。</p> <p><a href="http://qiita.com/sasaplus1/items/fd07e41a0c80ce6296ec">Node.js - grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita [キータ]</a></p> <h3>Gruntfile.js作成</h3> <p><a href="http://yukihir0.hatenablog.jp/entry/2013/08/11/171536">grunt-contrib-lessでlessファイルのコンパイルを自動化する。 - タチコマ好きなエンジニアのブログ</a></p> <p>この辺りを参考にさせてもらった。僕のGruntfile.jsは<a href="https://github.com/distkloc/SankakuValidator/blob/master/Gruntfile.js">こちら</a>。</p> <p>grunt-contrib-lessの設定は、開発環境用と</p> <pre class="code" data-unlink>development: <span class="synIdentifier">{</span> options: <span class="synIdentifier">{</span> paths: <span class="synConstant">'&lt;%= less.production.options.paths %&gt;'</span> <span class="synIdentifier">}</span>, files: <span class="synIdentifier">{</span> <span class="synConstant">'&lt;%= projectName %&gt;.css'</span>: <span class="synConstant">'&lt;%= projectName %&gt;.less'</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> </pre> <p>clean-<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>で圧縮して<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>出力する本番環境用に分けた。</p> <pre class="code" data-unlink>production: <span class="synIdentifier">{</span> options: <span class="synIdentifier">{</span> paths: <span class="synIdentifier">[</span><span class="synConstant">'less'</span><span class="synIdentifier">]</span>, cleancss: <span class="synConstant">true</span> <span class="synIdentifier">}</span>, files: <span class="synIdentifier">{</span> <span class="synConstant">'&lt;%= projectName %&gt;.min.css'</span>: <span class="synConstant">'&lt;%= projectName %&gt;.less'</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>, </pre> <p>pathsは開発/本番どちらも同じにしたいので、開発は本番のプロパティ値を参照するようにした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>はプロジェクトのルートに出力するようにした。</p> <p>ちなみに<code>&lt;%= %&gt;</code>はgruntのテンプレート機能で、自分で定義したものを使ったり、他のプロパティから参照したり、jsをインラインで実行できたりする。詳しくは<a href="http://gruntjs.com/configuring-tasks#templates">ここ</a>。</p> <p>grunt-este-watchについては、</p> <pre class="code" data-unlink>esteWatch: <span class="synIdentifier">{</span> options: <span class="synIdentifier">{</span> dirs: <span class="synIdentifier">[</span><span class="synConstant">'./'</span>, <span class="synConstant">'less/'</span><span class="synIdentifier">]</span>, <span class="synIdentifier">}</span>, <span class="synConstant">'less'</span>: <span class="synIdentifier">function</span>(filepath) <span class="synIdentifier">{</span> <span class="synStatement">return</span> <span class="synConstant">'less:development'</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> </pre> <p>カレントディレクトリとlessディレクトリのlessファイルに更新があれば、grunt-contrib-lessの開発環境用タスクが動くという感じ。</p> <p>そしてgrunt-contrib-connectは、</p> <pre class="code" data-unlink>connect: <span class="synIdentifier">{</span> server: <span class="synIdentifier">{</span> options: <span class="synIdentifier">{</span> livereload: <span class="synConstant">true</span>, port: 9000, open: <span class="synConstant">'http://localhost:&lt;%= connect.server.options.port %&gt;/view/'</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>, </pre> <p>こんな感じで<code>livereload: true</code>にしておくと、<code>grunt</code>実行時にLiveReloadに必要なスクリプトをhtmlファイルに自動でインジェクトしてくれる。これをやっておけばブラウザのLiveReloadエクステンションとかはいらない。あと<code>open</code>にURLを指定することでデフォルトのブラウザを使って自動でそのページを開いてくれるようになる。/view/以下にテスト用のindex.htmlなどをおいているのでそこを指定。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>コンパイル</h3> <p>あとはプロジェクトのルートで</p> <pre class="code" data-unlink>grunt</pre> <p>を実行すればターミナルが待機状態になり勝手にブラウザでview/index.htmlが開く。そしてlessファイルを修正すると自動でコンパイルしてブラウザ再読み込みが走る。これはたのしい。</p> <h3>貼り付け</h3> <p>良い塩梅にデザインできたら</p> <pre class="code" data-unlink>grunt less:production</pre> <p>で圧縮して出力された<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>のデザイン<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>に貼り付けておしまい。<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>出力先を<a class="keyword" href="http://d.hatena.ne.jp/keyword/dropbox">dropbox</a>とかにして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>側で外部<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>読み込みしておけば一々コピペとかしなくて捗ると思う。</p> <p><a href="http://kyabana.hatenablog.jp/entry/2013/04/04/215057">はてなブログテーマのらくちん制作環境 - kyabana's blog</a></p> <p>でも僕は様々なしがらみがあってやっていない。人間誰しもしがらみを持って生きているからしかたがないことだと思う。</p> <p>ソースはGitHubに置いておいた。</p> <p><a href="https://github.com/distkloc/SankakuValidator">distkloc/SankakuValidator</a></p> lepton9 Xamarin StudioでNuGetを使う hatenablog://entry/12921228815712710592 2013-11-30T04:49:29+09:00 2018-06-12T23:59:40+09:00 blogを書くのは久しぶりなので、簡単なことを簡単に書くことにした。 今回は.NETのためのパッケージマネージャNuGetをXamarin Studioで使う方法について書いてみる。 <p>blogを書くのは久しぶりなので、簡単なことを簡単に書くことにした。<br/> 今回は.NETのためのパッケージマネージャ<a href="http://www.nuget.org/">NuGet</a>をXamarin Studioで使う方法について書いてみる。</p> <p>英語読めるすごい人はこっち見たほうが早いと思う。<br/> <a href="https://github.com/mrward/monodevelop-nuget-addin">GitHub - mrward/monodevelop-nuget-addin: NuGet addin for MonoDevelop and Xamarin Studio</a></p> <h3>自分の環境</h3> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> 10.9 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Mavericks">Mavericks</a></li> <li>Xamarin Studio (4.0.13)</li> <li>Mono (3.2.4)</li> </ul> <h3>NuGetの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>追加</h3> <p>Xamarin Studioのメニューからアドイン マネージャ開く。Gallery > Manage Repositories選択</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131126/20131126030748.png" alt="f:id:lepton9:20131126030748p:plain:w500" title="f:id:lepton9:20131126030748p:plain:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></span></p> <p>右上の 追加 > オンライン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を追加。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131126/20131126030442.png" alt="f:id:lepton9:20131126030442p:plain:w500" title="f:id:lepton9:20131126030442p:plain:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></span></p> <p>Xamarin Studioのバージョンに合わせてurlを入力。僕の環境だと</p> <blockquote><p><code>http://mrward.github.com/monodevelop-nuget-addin-repository/4.0/main.mrep</code></p> <p><cite><a href="https://github.com/mrward/monodevelop-nuget-addin">GitHub - mrward/monodevelop-nuget-addin: NuGet addin for MonoDevelop and Xamarin Studio</a></cite></p></blockquote> <p>になる。 OK押したらアドイン <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>管理のウィンドウで<code>mrward.github.com</code>にチェックが付いているか確認</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131126/20131126032211.png" alt="f:id:lepton9:20131126032211p:plain:w500" title="f:id:lepton9:20131126032211p:plain:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></span></p> <p>で、終わり。簡単。</p> <h3>使い方</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>環境のVSと同じように使えて便利。</p> <p>Xamarin Studio上でソリューションの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a><a href="#f-f26bc992" name="fn-f26bc992" title="プロジェクトのコンテキストメニューでも可。ただしソリューションから設定したほうが複数プロジェクトに一括参照設定とかできるので楽だよ">*1</a>からManage NuGet Packages...を選択。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131126/20131126032411.png" alt="f:id:lepton9:20131126032411p:plain:w500" title="f:id:lepton9:20131126032411p:plain:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></span></p> <p>Availableのタブで右側の検索窓にインストールしたいパッケージ名を入力して検索したら出てくると思うから、左ペインで選択して、右下のManageボタン押す。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131129/20131129030251.png" alt="f:id:lepton9:20131129030251p:plain:w500" title="f:id:lepton9:20131129030251p:plain:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></span></p> <p>パッケージをインストールしたいプロジェクトにチェックを入れてOKボタン。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lepton9/20131127/20131127031548.png" alt="f:id:lepton9:20131127031548p:plain" title="f:id:lepton9:20131127031548p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで参照に追加される。参照から削除したい場合はチェックを外してOK押すだけ。ただし他の依存関係があると削除できないので、そういう場合はその依存先パッケージを先に削除する。</p> <div class="footnote"> <p class="footnote"><a href="#fn-f26bc992" name="f-f26bc992" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">プロジェクトの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a>でも可。ただしソリューションから設定したほうが複数プロジェクトに一括参照設定とかできるので楽だよ</span></p> </div> lepton9