Chrome Extensionが作れた！
はじまり
仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。
そこでたまたま tacamy さんのスライド
はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck
を見て、Chrome Extensionすげー！って思った。JS Girlsというのもあるのね。
仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。
作業短縮、ミスも減る！！ メリットしかない！という事で作り方の勉強から。
勉強方法
まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。
右クリックのTwitter検索便利。
次に、 JS Girlsのハンズオン資料と本家のサンプルで勉強。
とてもわかりやすくて理解が深まった気がする。画像を取得して表示するのいいなー。
作り始める
やりたいこと
- HTMLを表示
- 表示しているHTMLをスクレイピングして必要な要素を抽出
- 抽出した要素からjsonを作成
- 作成したjsonをクリップボードにコピー出来る
- Chrome Extensionのアイコンは、必要なページにのみ表示
やりたいことは決まっていたのだが、今まで勉強した内容ではどうやったらいいかわからなかった。。。
サンプルにヒントがないか見ていたら、ぴったりのサンプルが見つかった！
のMappy
pageAction.showやextension.onRequestで検索していたら出てきたサンプル
上記のやりたいことを実現するための要素が全部入っていたと思う。
素敵な写真を一括で取得したい☆彡
某最新音楽ニュースサイトの写真は素敵なものばかりで、いつも保存させてもらっていた。
一つ一つポチポチと保存していたのだが、全部保存したいし保存してない写真があるかもしれない、と常々思っていた。
ちょっと。。。何これ。。。何枚あるのよ面倒くさい！自動化出来ないかなーと思っていて調べたら、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 がわからない。
MacBook Pro Retina 15インチ買ったからさ
IT業界で働き出して約10年。全く（ではないが）成長出来てない自分に苛立ちを感じる今日この頃。
昨日も自分がダメなことを棚にあげて愚痴りまくっていたわけで。
せっかく新しいパソコン買ったので、気合を入れて勉強をしようと。今度こそ本気！
まずは開発環境の構築だ。
以前はMacに色々入れて開発環境を構築していたのだけれど、ごちゃごちゃしてしまい大変なことになっていた。
仮想マシンにLinuxを入れて云々。。。という話をよく目にしていたので、自分もやってみることに。
困ったときのドットインストール。しばらくやってなかったし、勉強した内容もすっかり忘れているドットインストール／(^o^)＼。
レッスン一覧を見てみると、ローカル開発環境の構築というのがある。
ぴったりではないか！！遥か昔にもやった記憶があるけど、レッスン新しくなってるし！
さっそくやってみると、はてなブックマーク等でよく見かけていた文字が。。こいつは何だ。
Vagrantなんて読むのよこれ。ヴァグラント？いいえ。ベイグラント
こいつを使うと、いい感じに仮想マシンを立ち上げたりできるのねー。なるほど。というのは理解。
再びレッスン一覧を見てみると、Vagrant入門を発見！
2つのレッスンを合わせてやることに。合わせてやることで理解が深まった（気がした）。
ローカル開発環境の構築はうまくいったかなー。
「入門 考える技術・書く技術」を読む
入門 考える技術・書く技術――日本人のロジカルシンキング実践法
- 作者: 山崎康司
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2011/04/08
- メディア: 単行本（ソフトカバー）
- 購入: 15人 クリック: 71回
- この商品を含むブログ (25件) を見る
きっかけ
業務に関連してこの本の存在を知り、いい機会だったので読むことにした。
ざっくり感想
この本は一度読んでみるべき。薄いので読みやすい。
今まで文章の書き方を意識したことがなかったが、書き方の技術・考え方を知っているだけで、今までよりも読みやすい文章を書くことが出来るのようになると思う。
実践OPQ
折角ロジカルシンキング実践法の本を読んだので、この本のやり方に習ってOPQ分析をしてみる。
OPQ分析
対象は、この本を読むかどうか迷っている方
- O:Objective（望ましい状況）: この本は読む価値があるのか判断したい
- P:Problem（問題）: この本は読む価値があるのかわからない
- Q:Question（読み手の疑問）: この本は読む価値があるの？
- A:Answer（答え/文書の主メッセージ）: 読む価値がある
OPQすべてが表現を変えただけで、同じ意味のような気が…
判断根拠
- どのような視点でビジネス文書を書けばいいのかわかる
- 何を書くのか決めるのは読み手
- ビジネス文書は結論が冒頭
- 考えるプロセスと書くプロセスを分ける
- 考えを形にする方法がわかる
- 読み手視点のOPQ分析
- 要約メッセージを文章にするときの「4つの鉄則」
- ピラミッドを作る
- 考えを文章でわかりやすく表現する方法がわかる
- 文書全体の構造はピラミッドに同じ
- 文章のわかりやすさは「接続詞」次第
- わかりやすい文書を書くためのトレーニング方法がわかる
- 感謝の言葉にPDF
- 「1日1回ピラミッド」×4ヵ月
まとめ
長いメールや企画書を書くことがほとんどないので、本の内容を活かせる場面が少ないかもしれない。
しかし、考えるプロセスを入れて文章を書くことを意識するだけで、読みにくかった文章が少しずつ改善されていくと思う。
メールを書くときに、「・・・が、・・・」「・・・し、・・・」をよく使うので注意しないと・・・
