2014-06-01

jQueryのeachを読む

JavaScript tech

コードリーディングの第一歩として自分が読みやすいJavaScriptを読むことに。

jQueryのソースコードを読むための参考サイト２０選 - DQNEO起業日記

を参考にして、よく使うeachメソッドを読んでみる。

ソースコードビューアあったから、古いバージョンとメソッドの内容を比較するのにいいかもしれない。

jQuery source viewer

よく使う方法

このようなhtmlがある時に、liを1つずつ取り出す。

<ul>
    <li>(・∀・)</li>
    <li>(*´Д｀)</li>
    <li>(・∀・)</li>
    <li>(*´Д｀)</li>
    <li>(・∀・)</li>
</ul>

$('li').each(function(i, elm) {
    // elm == this
    console.log(i + $(elm).text()); // 0(・∀・) のように表示される
});

eachメソッド

// args is for internal usage only
each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );

    if ( args ) {
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        }

    // A special, fast, case for the most common use of each
    } else {
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {
                    break;
                }
            }
        }
    }

    return obj;
}

eachメソッドについての疑問

eachの第3引数argsは何か？使うの？
第3引数argsがある場合はapply、ない場合はcallを使っている。applyとcallって何だっけ？
$.each($('li')) と $('li).each 両方使えるよね？

1. eachの第3引数`args`は何か？使うの？

applyとcall

全く読んでいなかったサイ本の出番！第5版しかもってないからそれを引っ張り出して読む。サイ本、いい本ですよね。

JavaScript 第6版

作者: David Flanagan,村上列
出版社/メーカー: オライリージャパン
発売日: 2012/08/10
メディア: 大型本
購入: 12人クリック: 252回
この商品を含むブログ (18件) を見る

P.138 8.6.4 apply()メソッドとcall()メソッド の部分より引用

2つのメソッドを利用すると、あるオブジェクトのメソッドであるかのように関数を呼び出すことができます。call()メソッドとapply()メソッドの最初の引数は、これから呼び出す関数の対象となるオブジェクトで、関数の本体のthisキーワードの値になります。call()メソッドの2番目以降の引数は、これから呼び出す関数に引数として渡されます。

apply()メソッドとcall()メソッドの違いについては、

apply()メソッドもcall()メソッドと同じような働きをします。ただ、関数に渡す引数を配列形式で指定する点が異なります。

なるほど。第3引数のargsは配列形式で渡してあげると。

第3引数`args`を試す

試しに第3引数を渡してeachを実行してみる。

// callback関数の引数に第3引数で渡した配列の値が入る。
$.each(['a', 'b', 'c'], function(a, b) {
    console.log(this); // String {0: "a", length: 1}
    console.log(a); // 1
    console.log(b); // 2
}, [1, 2]);

$('li').each(function(a, b) {
    // elm == this
    console.log($(this).text() + ':' + a + ' :' + b); // (・∀・):3 :5 
}, [3, 5]);    

// 第3引数は配列形式じゃないといけないので、以下はエラーになる
$('li').each(function() {
    console.log(this);
}, 'test');

ここまで見て思ったのは、eachに第3引数を渡して使ったことないこと。

使い方としては以下のような感じ？うーん・・・

// こういう使い方は出来るのか？
$.each([1, 2, 3], function(x, y) {
    console.log(this + ':' + x + ':' + y); // 1:5:10
    console.log((this + x) * y); // 60
}, [5, 10]);

// わざわざ引数で渡すならこうするかな？
$.each([1, 2, 3], function() {
    var x = 5, y = 10;
    console.log(this + ':' + x + ':' + y); // 1:5:10
    console.log((this + x) * y); // 60
});

まて。eachメソッドにコメント書いてあった。

// args is for internal usage only

argsは内部利用のためにのみ使う？？よくわからなかった。。

第3引数なしの場合は`callback.call()`が実行される

argsがない場合のコメント

// A special, fast, case for the most common use of each

eachの一般的な使い方ってことかな？？

配列じゃなくてオブジェクトもOK

// オブジェクトもいける
// callback関数の引数には`key`と`value`が入ってくる
$.each({'test': 123, 'test2': 'あいうえお'}, function(key, value) {
    console.log(key, value); // test 123, test2 あいうえお
    console.log(this); // Number {}, String {0: "あ", 1: "い", 2: "う", 3: "え", 4: "お", length: 5}
});


// `i`にはindex, `v`には値が入ってくる
// この場合は this == v
var obj = $.each([1, 2, 3, 4, 5], function(i, v) {
    console.log(i + ':' + this); // 0:1, 1:2, 2:3, 3:4, 4:5
    console.log(i + ':' + v); // 0:1, 1:2, 2:3, 3:4, 4:5
});
// each関数はobjをreturnするのでこうなる
console.log(obj); // [1, 2, 3, 4, 5]

2. `$.each($('li'))` と `$('li').each` 両方使えるよね？

$('li').each(function(i, elm) {}); の場合は以下が呼ばれる。

// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) { // callbackにfunction(i, elm) {} が入る
    return jQuery.each( this, callback, args ); // eachメソッドを呼ぶ。thisは$('li')
},

jQuery.eachを呼んでいるので、 $.each($('li'), function(i, elm) {}); となる！

2014-05-15

DayOneに投稿するブックマークレット

JavaScript tech

DayOneの使い方を見直そうと思い検索していて見つけた記事

DayOneをWebクリップに変えるブックマークレット DayOneClip - W&R : Jazzと読書の日々

素晴らしい！
普段はChromeを使っているので、Chromeにブックマークレットを登録して実行！
便利だわー。

DayOneのURL schemeはこちらに

Mac Guide – DAY ONE / SUPPORT

DayOneはYouTubeの動画も再生出来るらしい。

DayOneにYouTubeの動画もクリップできるようにしました DayOneClip - W&R : Jazzと読書の日々

YouTube動画貼り付け版を試してみたが、画像が表示されるだけで再生出来ず＞＜
ブックマークレットのコードを見てみると、

if(/m\.youtube\.com/.test(url))

youtubeのurl判断が m.youtube.com になっていたので、この部分を変更することに。
元のブックマークレットはモバイル版のリンクを使っている模様。

自分の使い方だと、

PCのブラウザで https://www.youtube.com/watch?v=xxxx のようなurlの動画を見る
これ保存しとこ
プラウザのブックマークレット実行！
DayOneに投稿

がいいので、以下のようにブックマークレットを変更させてもらった。

javascript:title=document.title;url=location.href;clip=title+"\n";if(/.+\.youtube\.com/.test(url)){id=url.split("v=")[1];clip+=url+"\nhttp://youtube.com/watch?v="+id}else{text="";p=document.getElementsByTagName("p");for(k in p) text+=p[k].innerText;text=text.replace(/\n/g,"").replace(/undefined/g,"").substr(0,100);clip+=url+"\n<img src=http://capture.heartrails.com/300x200/?"+url+" style=\"border-radius:10px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">\n"+text+"...\n"}location="dayone://post?entry="+encodeURIComponent(clip);

このブックマークレットを登録して実行するとDayOneにリンク情報が転送されて。。。

f:id:gawao:20140515133420j:plain

Done をクリックすると http://youtube.com/watch?v=xxxxxx のurlの動画が表示されて再生出来る！

f:id:gawao:20140515133434j:plain

出来ました！

winerosesさんありがとうございます！！

2014-04-14

Webサービスのつくり方ー「新しい」を生み出すための33のエッセイを読んだ

Book tech

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

作者: 和田裕介
出版社/メーカー: 技術評論社
発売日: 2012/11/20
メディア: 単行本（ソフトカバー）
購入: 29人クリック: 685回
この商品を含むブログ (27件) を見る

Webサービスの過程を考慮してエッセイ風に語っている本。
各章を読んで印象に残った事と感想をメモ。

取り敢えず何かつくろう

第1章心構えと下準備

ぐだぐだ言ってないでコードを書けよ、ハゲ

実現していない、カタチになっていないことにはあまり価値がない

唯一重要なものはコードなんだ。

Mac一つあれば開発出来る！

なければつくる

ブログは自分自身を成長さえるよい鍛錬の場

勉強会は面白くて、いい仲間ができる場所

3回繰り返すことがあれば共通化を考える

コード書く前に色々調べて時間だけが過ぎて結局何もできてない。。って事ばかりなのではっとさせられた。

第2章企画

次の7つの項目を決めること

哲学

アイデア

テーマ

コンセプト

名前

デザイン

内部設計

哲学

個々人が持っている、特定の興味に関する揺るがない気持ちのこと

アイデア

哲学を叶えるための個別の具体的なアイデア

テーマ

哲学をより具体的にした、勝負する領域のこと

コンセプト

テーマに沿った、アイデアを形成するための骨格

デザイン

コンセプトやアイデアを洗練させていくと無駄なものが削ぎ落され、サービスやアプリに対する最低限の機能が抽出されます

紙にUIのイラストを書くような作業を、何度も繰り返すとよい

内部設計

ユーザーから見たシステムの振る舞いを書いてから作業に移るとよい

アイデアは新しい組み合わせ

哲学！！！
アイデアは組み合わせ！これは自分も思っていたこと。

第3章設計

ユースケースとは、大まかに定義すると、ユーザーから見たシステムの振る舞いを指す

ぼんやりとしているシステムの機能を明確化するために書かれる

ユースケースを元に実装計画を立てられる

ユースケースごとに実装をしていくと考えると、現在の実装段階が分かって効果的

ユースケースシナリオ

ユースケースは実装の目標

内部設計の肝はデータベースの設計

今までユースケースって書いたことがなかったが、これから書いてみよう。
抜けがなくなって手戻りしなくなりそうだし、実装方針を固めるのに役に立ちそう。

第4章開発

モック作ったりWeb API使ったり

MVC

WAF

perlでのコード

CSS Framework達

ここあまりついていけなかった。。実際にコードを書きながらもう一回読んでみよう。
perlやってみようかな。。

第5章プロモーションと運用

そのサービスが何を目標としていて何ができるのかだけでも最低限文章として書けるようにしておく

プレストか拡散とか

システム運用とコンテンツ運用

サーバ構成

キャッシュ

スケールアップとスケールアウト

やり方は一つじゃない

ここもついていけていない・・＞＜
サーバ構成とか超苦手部分だ。
運用していてもサーバ構成や負荷について全く気にしたことなかったからなー。
一人で運用までやってみると、こういう事も経験するからやるしかないと思った。

2014-04-13

Chrome Extensionが作れた！

JavaScript tech

はじまり

仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。
そこでたまたま tacamy さんのスライド

はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck

を見て、Chrome Extensionすげー！って思った。JS Girlsというのもあるのね。
仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。
作業短縮、ミスも減る！！メリットしかない！という事で作り方の勉強から。

勉強方法

まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。
右クリックのTwitter検索便利。

Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール

次に、 JS Girlsのハンズオン資料と本家のサンプルで勉強。
とてもわかりやすくて理解が深まった気がする。画像を取得して表示するのいいなー。

作り始める

やりたいこと

HTMLを表示
表示しているHTMLをスクレイピングして必要な要素を抽出
抽出した要素からjsonを作成
作成したjsonをクリップボードにコピー出来る
Chrome Extensionのアイコンは、必要なページにのみ表示

やりたいことは決まっていたのだが、今まで勉強した内容ではどうやったらいいかわからなかった。。。
サンプルにヒントがないか見ていたら、ぴったりのサンプルが見つかった！

https://developer.chrome.com/extensions/samples

のMappy
pageAction.showやextension.onRequestで検索していたら出てきたサンプル
上記のやりたいことを実現するための要素が全部入っていたと思う。

2014-03-27

素敵な写真を一括で取得したい☆彡

Bash tech

某最新音楽ニュースサイトの写真は素敵なものばかりで、いつも保存させてもらっていた。
一つ一つポチポチと保存していたのだが、全部保存したいし保存してない写真があるかもしれない、と常々思っていた。
ちょっと。。。何これ。。。何枚あるのよ面倒くさい！自動化出来ないかなーと思っていて調べたら、curlという素敵コマンドがあるらしいので色々試してみた。

取り敢えず `-O` オプション

-O と [0000-1000] のようにして連番を生成すればコマンド一つで大量のファイルを取得出来る！すごい。
早速やってみる。(※urlは仮)

curl -O http://example.com/image/DSC_[0000-1000].jpg

[1/1001]: http://example.com/image/DSC_0000.jpg --> news_large_DSC_0000.jpg
--_curl_--http://example.com/image/DSC_0000.jpg
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  9630    0  9630    0     0  14750      0 --:--:-- --:--:-- --:--:-- 14747

ダウンロードを開始している表示が延々と流れる。成功か？
数分待って1000までの画像ダウンロード終了。
中身を確認してみると。。
10KBの画像ファイルが大量にできている。404だったものが10KBのファイルとして残っているようだ。
404のファイルは保存したくない。。オプションで指定できない？？
不要なので一括削除！

$ find . -size -10k | xargs rm

curlのオプションを調べたが、存在しないファイルを保存しないオプションはないみたい。

HTTPヘッダの取得

シェルスクリプトを書けば、HTTPヘッダを取得して処理を分けたり出来るらしい。

Helix Melody:Livedoorクリップのリンク切れを一括チェックする方法 - livedoor Blog（ブログ）

を参考にさせていただき、HTTPヘッダの取得からやってみる。

$ curl -I http://example.com/image/DSC_0000.jpg
HTTP/1.1 404 Not Found

きた！HTTPステータスコードを見て、404だった場合にファイルを保存しないように出来そう。
複数ファイルの場合は？

$ curl -I http://example.com/image/DSC_[0-10].jpg

[1/11]: http://example.com/image/DSC_0.jpg --> <stdout>
--_curl_--http://example.com/image/DSC_0.jpg
HTTP/1.1 404 Not Found

できてる！けど、一回一回判断出来るのか？シェルスクリプトの中で繰り返しをするか？

ステータスコードの抜き出し

404 だけ取る場合

$ curl -s -I http://example.com/image/DSC_0000.jpg | grep HTTP/ | cut -d' ' -f2 > test.txt

HTTP/1.1 404 Not Found だけ取る場合

$  curl -s -I  http://example.com/image/DSC_0000.jpg | grep HTTP/

grepコマンドは最近勉強したから理解出来るが、cut -d' ' -f2 がわからない。

2014-03-08

MacBook Pro Retina 15インチ買ったからさ

IT業界で働き出して約10年。全く（ではないが）成長出来てない自分に苛立ちを感じる今日この頃。
昨日も自分がダメなことを棚にあげて愚痴りまくっていたわけで。
せっかく新しいパソコン買ったので、気合を入れて勉強をしようと。今度こそ本気！

まずは開発環境の構築だ。
以前はMacに色々入れて開発環境を構築していたのだけれど、ごちゃごちゃしてしまい大変なことになっていた。
仮想マシンにLinuxを入れて云々。。。という話をよく目にしていたので、自分もやってみることに。

困ったときのドットインストール。しばらくやってなかったし、勉強した内容もすっかり忘れているドットインストール／(^o^)＼。

レッスン一覧を見てみると、ローカル開発環境の構築というのがある。
ぴったりではないか！！遥か昔にもやった記憶があるけど、レッスン新しくなってるし！

さっそくやってみると、はてなブックマーク等でよく見かけていた文字が。。こいつは何だ。
Vagrantなんて読むのよこれ。ヴァグラント？いいえ。ベイグラント
こいつを使うと、いい感じに仮想マシンを立ち上げたりできるのねー。なるほど。というのは理解。

再びレッスン一覧を見てみると、Vagrant入門を発見！

2つのレッスンを合わせてやることに。合わせてやることで理解が深まった（気がした）。

ローカル開発環境の構築はうまくいったかなー。

2012-09-05

「入門考える技術・書く技術」を読む

Book

入門考える技術・書く技術――日本人のロジカルシンキング実践法

作者: 山崎康司
出版社/メーカー: ダイヤモンド社
発売日: 2011/04/08
メディア: 単行本（ソフトカバー）
購入: 15人クリック: 71回
この商品を含むブログ (25件) を見る

きっかけ

業務に関連してこの本の存在を知り、いい機会だったので読むことにした。

ざっくり感想

この本は一度読んでみるべき。薄いので読みやすい。
今まで文章の書き方を意識したことがなかったが、書き方の技術・考え方を知っているだけで、今までよりも読みやすい文章を書くことが出来るのようになると思う。

実践OPQ

折角ロジカルシンキング実践法の本を読んだので、この本のやり方に習ってOPQ分析をしてみる。

OPQ分析

対象は、この本を読むかどうか迷っている方

O:Objective（望ましい状況）: この本は読む価値があるのか判断したい
P:Problem（問題）: この本は読む価値があるのかわからない
Q:Question（読み手の疑問）: この本は読む価値があるの？
A:Answer（答え/文書の主メッセージ）: 読む価値がある

OPQすべてが表現を変えただけで、同じ意味のような気が…

判断根拠

どのような視点でビジネス文書を書けばいいのかわかる
- 何を書くのか決めるのは読み手
- ビジネス文書は結論が冒頭
- 考えるプロセスと書くプロセスを分ける

考えを形にする方法がわかる
- 読み手視点のOPQ分析
- 要約メッセージを文章にするときの「4つの鉄則」
- ピラミッドを作る

考えを文章でわかりやすく表現する方法がわかる
- 文書全体の構造はピラミッドに同じ
- 文章のわかりやすさは「接続詞」次第

わかりやすい文書を書くためのトレーニング方法がわかる
- 感謝の言葉にPDF
- 「1日1回ピラミッド」×4ヵ月

まとめ

長いメールや企画書を書くことがほとんどないので、本の内容を活かせる場面が少ないかもしれない。
しかし、考えるプロセスを入れて文章を書くことを意識するだけで、読みにくかった文章が少しずつ改善されていくと思う。
メールを書くときに、「・・・が、・・・」「・・・し、・・・」をよく使うので注意しないと・・・

よく使う方法

eachメソッド

eachメソッドについての疑問

1. eachの第3引数argsは何か？使うの？

applyとcall

第3引数argsを試す

第3引数なしの場合はcallback.call()が実行される

2. $.each($('li')) と $('li').each 両方使えるよね？

第1章 心構えと下準備

第2章 企画

第3章 設計

第4章 開発

第5章 プロモーションと運用

はじまり

勉強方法

作り始める

やりたいこと

取り敢えず -O オプション

HTTPヘッダの取得

ステータスコードの抜き出し

きっかけ

ざっくり感想

実践OPQ

OPQ分析

判断根拠

まとめ

1. eachの第3引数`args`は何か？使うの？

第3引数`args`を試す

第3引数なしの場合は`callback.call()`が実行される

2. `$.each($('li'))` と `$('li').each` 両方使えるよね？

第1章心構えと下準備

第2章企画

第3章設計

第4章開発

第5章プロモーションと運用

取り敢えず `-O` オプション