読者です 読者をやめる 読者になる 読者になる

verbalize

文章書く練習.適当でいいから色々書きたい.

最近の開発環境におけるTips

vim Web 開発

近況

  • 夏休みが今週いっぱいで終わる
  • 今週rubyrailsに入門した

開発環境

rubyrailsは現在チュートリアルをやってるような感じで特に書くことはないのだけれど、それらを始めてから急に同時に多くのファイルを編集する機会が多くなってきました。なので、最近気づいたコードを書くときのコツ、vimのいい感じの使い方を少しメモしておきます。

① NERDTreeと画面分割を使う

プロジェクトのルートでNerdTreeを開きながら水平分割(s)を使うといろんなファイルをすぐ開けて便利です。加えてNERDTreeはファイルの作成/削除などの基本操作もできるのでvimの中で結構完結します。

f:id:bonhito:20160930011827p:plain

② タブページ機能を使ってファイルをうまく仕分ける

Model、View、Controller、設定ファイルといったコードのかたまりをタブを利用して分けてあげると使いやすい。もちろんタブ間の移動は使いやすいキーにバインドしておく必要があります。ファイルを新しいタブで開くときもNERDTreeはtでできるので楽ちんです。 f:id:bonhito:20160930012918p:plain

③ 作業の中断・開始にはセッションを使う

これまで書いたようにファイルは整理しながらたくさん開くので、必然的にその状況を保存したいなぁとなります。以下の記事にわかりやすく書いてあるのですが、vimでは:mksで現在開いているバッファやウィンドウの状態を保存してくれます。記事では~/.Session.vimに保存されると書いてあるのですが、私の環境では標準でカレントディレクトリ(./Session.vim)に作成されました。この方がわかりやすいので私は好きです。 keyamb.hatenablog.com

④ エディタとシェルはもう分けちゃったほうがよい

vimを開いている状態からrailsやgitのコマンドを打つためにシェルに戻るのは結構めんどくさいです。今までは:shellと打って抜けるやり方が好きでしたが、最近vimを抜けてからzshが入力を受け付けるまでが結構遅いことに気づき、iTermのウィンドウをそもそも分けることにしました。zshがちょっと重いらしく、あんまり使いこなせてもいないのでbashにしようかなと思ってます。あと、VimShellとかfugitiveはあんまり合いませんでした。


所感

  • やっぱり大きめのモニタあると捗る
  • エディタとシェルを分けちゃうとvimの存在意義が薄れてきている気が
  • vimは操作といい色々柔軟できるけどそろそろIDEも試してみようかな…

imgcatコマンドで遊ぶ

Mac Python 開発

近況

インターンに行ってJavaを用いたWebアプリケーション開発を経験してきました。

もともとサーバーサイドの方の知識は0に近く、データベースとかサーバーってめんどくさそう…くらいの認識でした。今回その辺りのコーディングをいくつか担当させて頂き、Webアプリの全体像が見えた気がします。とりあえず、Webアプリ開発を一通り経験したというのはとても大きな意味がありました。

また、チーム開発が初めてだったこともあり、Gitを初めて実践的に使った他、かんばんやKPTといったアジャイル的な開発手法にも触れられたのも楽しかったです。

imgcatコマンド

がらっと話は変わりますが本題。みなさんimgcatというコマンドをご存知でしょうか。おそらくiTerm上でしか動かない…と思いますが、ターミナル上で画像を表示するコマンドです。

f:id:bonhito:20160921220429p:plain

これ、一見ネタのようなコマンドですが、Qiitaにはこんな記事が投稿されています。

qiita.com

いや、やっぱりネタかもしれない。

こんなimgcatですが、もしかしたらこれってすごい力を秘めているのではないかと私は思いました。というのも、黒い画面というのはどうしても地味になりがちで、長時間コーディングをすると精神的に良くないと感じるからです。これを使えばもしかしたらターミナルが賑やかになるかもしれない...!

GIPHYからGIF画像を取得して表示する

ということで、いつまでも自分の手元にある画像を見ていても面白くないのでネットから拾ってきます。最初はGoogle画像検索を使おうと思っていましたが、最終的にGIPHYというサイトのAPIを使ってGIF画像を取ることにしました。そうです、imgcatでGIF画像を表示するとちゃんと動くんです!できたものはこんな感じ。

猫。

f:id:bonhito:20160921221902g:plain

ピカチュウ

f:id:bonhito:20160921221919g:plain

カートマン。

f:id:bonhito:20160921221936g:plain

GIPHYは海外サイトなので日本語では検索できませんが、結構素材は豊富っぽいです。

ソースコード

Pythonで書きました。簡単ですが...。 コレくらいだったらwgetとかでワンライナーで書けたりしそう。どうだろう。

手順はこんな感じです。

  1. コマンドライン引数で検索ワードを受け取る

  2. GIPHYのAPIを使って画像を検索し、結果からランダムに一つをピックアップする

  3. 選んだ画像のURLにHTTPリクエストを投げてかえってきた画像データをそのままバイナリで標準出力に流す

  4. imgcatにリダイレクトする

GIPHYのAPIGoogleのCustom Search APIと違って(おそらく)制限がないのと、現在public beta keyを出してくれてるので使うのが楽でした。

また、今回使った検索以外にもトレンドの画像の取得や絵文字からGIFへの変換など色々できるようで今度使ってみたいなと思います。

応用例

さて、そもそもこれを作ったワケというのは、黒い画面を眺め続け疲弊した心に安らぎをあたえてやることでした。

一つ考えた例としてgit commitする度に好きなテーマの画像が表示されるようにします。zshrcに以下を追加。

すると…

f:id:bonhito:20160921222816g:plain

予想外に地味😇。 今回は検索ワードを"LGTM"にしましたが、猫でいいかも。git commitmycommitに置き換えなきゃいけないのはスマートじゃないですね。

ということで、みなさんもくれぐれも心のケアは大切にして下さい(適当)。

終わりに

こういうの作ってる最中はいいんだけど、作り終わった後の賢者タイムの辛さ…ね…。

所感

  • 拾ってくる画像

    Twitterからとってきても面白いかも。

  • 最後の使い方の例のところ改良の余地有り

    元々git commitしたら画像を表示するというのは、たまたま見かけたcdしたらlsするという記事にヒントを得たものでした。なので本当はgit commit() { \gitcommit "$@" && [GIF画像表示}のような感じにしたかったのですが、ちょっとうまくいきませんでした。今後改良したい。  

  • 画像が表示されるまで1〜3秒かかる

    お茶でも飲んで一息つきましょう...。

Chrome extensionに入門した

chrome Web

http://dotinstall.com/lessons/basic_chrome_v2dotinstall.com

前回の記事でスターをつけてくださった方のブログを眺めていたらChrome拡張機能を作っていて、Chrome拡張機能ってHTML/CSS/JSだけで作れるのか!ということを知りました。せっかくの機会なので入門して自分なりに簡単な拡張機能を作ってみました。

モチベーション

シンプルにChromeを使っていて不便だと思う部分を解決するために作りました。

私の考える問題点

例えば、Chromeブラウジングしていて、最初はあることについて調べていたんだけど、気づいたら全く違うテーマのページを開いていた、なんてことありませんか?特に自分は学校の課題で調べ事してたんだけど退屈すぎていつの間にかネットサーフィンしてた、みたいなのがよくあります。

そんな時、そのウィンドウには、もともと調べていたテーマに関するタブと、新しく調べ始めたテーマに関するタブが混在してしまっている状態です。こういう時、テーマによってウィンドウを分けたくなります。そんなときみなさんどうしますか?単純にやるとこう↓なりませんか。

(左側3つのタブと右側2つのタブを切り分ける様子)

f:id:bonhito:20160811231648g:plain

このようにブラウザって複数のタブに対してはあまり柔軟に操作できないなと感じます。とくにウィンドウをまたぐと辛い。そこでタブ(ウィンドウ)操作を柔軟にする拡張機能をつくりました。  

つくったもの

github.com

 そのような流れでChrome拡張機能の入門として↑を作りました。インポートすると右上にタブっぽいアイコンが出てきますので、これをクリックすると使うことができます。この拡張機能は、タブのかたまりに対して主に分割する機能(split)と、保存する機能(storebookmark)で合計3つの機能を備えています。

split: 現在開いているタブを含め右側のタブを新しいウィンドウで開く

f:id:bonhito:20160811231649g:plain

一つのウィンドウに存在する異なるテーマのタブ群を分割(split)します。splitボタンを押すと、今開いている(activeな)タブを含め、そこから右側にあるタブを新しいウィンドウで開きます。

store: 今開いているウィンドウをWebStorageに一時保存

f:id:bonhito:20160811231650g:plain

保存したいタブ群をまずsplitで切り出した後に、保存したいウィンドウでstoreボタンを押すとあなたのlocalStorageにウィンドウが保存されます。

他のデバイスで見たりするわけじゃないけど、少しの間しまっておきたい時に使います。取り出すときは、先ほどのstoreボタンがretrieveボタンになっているのでそれを押して下さい。

bookmark: 今開いているウィンドウのタブを全てブックマークする

f:id:bonhito:20160811231651g:plain

store機能は使っている端末のlocalStorageに保存するので、他の端末では開くことができません。もちろんスマホChromeでは拡張機能自体が使えないので共有できません。そんなとき今開いているウィンドウの全てのタブを一括ブックマークできるのがbookmarkボタンです。

bookmarkボタンを押すとパスの設定画面が現れます。新しいフォルダ名とそのフォルダをどこに置くかを決めてsaveボタンを押してください。もしフォルダ名が空であった場合、新しくフォルダは作らずそのまま展開してブックマークされます。

課題

  • store機能の改善

    保持したウィンドウの情報を見れる機能、もう要らないって場合に捨てられる機能があったらよいかも。

  • splitできるならjoinも?

    splitの逆で複数のwindowを1つにまとめられる機能があってもよいかも。

  • バグの修正

    • 初回のウィンドウに限ってsplitがうまく動かない時がある。
    • jsの非同期処理による弊害をあんまり考慮せず作ったのでそのあたりを見直したい。
  • popup.htmlを改良する

    最低限のデザインにしていきたいんだけど、レイアウトの仕方について要勉強。この手のページを作るとき、大体HTML/CSSを書くのにJavaScriptと同じくらい時間かかるのもどうにかしたい。  

  • 名前

    tabs_splitterなんかしっくりこない。英語的にもおかしい気がするしtabをキーワードとして残したい。

所感

  • ボタンの名前をどう表記するのがベスト?

    単に split?それとももっと詳しく open right tabs in a new window?あるいは日本語で ◯◯◯?どれがわかりやすいんだろう。

  • 機能をどの程度柔軟なものにするか

    現在のstore機能とbookmark機能は、今開いているウィンドウの全てのタブに適用するので固定になっている。なので、ユーザーは任意のタブにたいしてこれらの機能を適用したい時には、

    1. ユーザー自身が保存したいタブをかためて右に寄せる。
    2. 境界タブでsplitして保存したいタブを新しいウィンドウに切り出す。
    3. bookmarkを押してそのウィンドウを保存する。

    というステップを踏む必要がある。もしこれが今開いているタブの一覧から選択できるようになれば、より柔軟で良い気がするんだけど、今のsplitとの組み合わせで実現できるというのも結構シンプルで良いと思うので迷う。この方がsplit機能の良さを感じてもらえる気がする...。どうなんだろうか。

  • extensionに付与する権限って限定はできないのか?

    bookmarkを編集する権限ってかなり重いと思う。例えば「ためになる拡張機能作りました!」と公開してchrome.bookmark.remove(all)みたいなことしたとしたらかなり深刻だと思う。bookmarkがいきなり消えて「え、あ、あらら」と慌てている間にあらゆるデバイスで一斉に同期が始まって...という光景は想像すると面白いけど(最低)。

    なのでユーザーがtabは良いけどbookmarkはダメ、みたいに権限の委譲を部分的に制限することはできないのか?と思ったり。まぁ仮にできたとしても、今回であればbookmarkボタンを押して何も起こらなくなるだけなので万々歳だけど、世のextensionには複数の権限が必要な単一の機能ってのもいくらあるでしょうからね…。

  • 時間をかけすぎた

    やってることはとてもシンプルなのに、考え始めてからページをつくり、中身を実装するのに結局丸3日くらい使ったので残念。もっとスピードがほしい。

  • 普通に既出かな?

    特に新規性を求めたわけではないので良いけれど、既にこういう機能を提供するものはいくらでもあると思う。あるいはChromeに元々こういう機能があるかもしれない。もしご存知のかたいたらコメントで教えていただけるとありがたいです。結構使いたいです。笑

Google Maps APIを使った標高の可視化

Web

タイトルの通りGoogle Maps APIを使って、出発地点から目的地点までの高低差を可視化する簡単なサイトを作ってみました。

ルートに沿った標高の可視化

github.com

きっかけとしては、新生活に伴い、家から大学までのルートの高低差を知りたかったからです。

個人的な話ですが、今年から大学に進学しまして一人暮らしを始めました。一人暮らしにあたっては家賃はもちろんですが、家から学校までの距離が一つ重要な要素ですよね。近いに越したことはないとは思いますが、スーパーやコンビニのあるなしで利便性が大きく変わるので、少々遠くても自転車で通えればOKです。まぁ10km前後になると夏は汗だくで授業を受けるはめになりますが...。

そんなとき、加えて重要なのが、高低差じゃないでしょうか。アップダウンが激しいと辛いですよね。そんな具合で春頃に実際にそれを調べたいなと思った時、何故かそういうサービスがあまりなかったのでGoogle Maps APIを使って自分で作って可視化してみてました。

最近ではロードバイククロスバイクに乗る人が増えて、ランニングする人も多くなってきているので、結構使いたい人はいるんじゃないかと思っています。元々自分なりに春先には作っていたものを綺麗にしてWebサイト作りの練習として公開してみました。とはいってもHTML/CSS/JSだけの本当に簡単な試作品のレベルですが。

先ほど言ったとおり、このサイトではGoogle Maps APIを使っていて、出発地と目的地を入力すると自動でルート検索が行われて、ルートに沿った高低差が可視化されます。もともとそういう関数があるのでものすごく実装は簡単なんですが、ルートにそって高低差が出せるってとこが重要です。APIは無料で使う分にはup to 25,000 map loads per dayなのでサービスとしてはちゃんとしたものはできていませんが、今後ルートの候補を選べるようにしたり、ルートごとの高低差の違いを同時に見れたりしたら便利かなと思っています。

とまぁ、そんなこんなで最近はWeb系に興味がでてきたので、夏に集中的に勉強できたらなと思います。制作実績がないとインターンも厳しいので、コツコツ夏に勉強して冬のインターンを狙っていきたいと思います。それでは。


今よくよく探してみると、

と、機能や完成度・他サービスとの連携はまちまちですが既存のものも意外にありますね。(笑)

NAVITIMEは坂の少ない/多いルートを選べ、かつ所要時間も出ていて素晴らしいです。ただちょっと図が小さめ。ルートラボはパッと検索するというよりは、ユーザー同士が作ったルートをシェアできる機能があって独特なサービスです。Flattest Routeはなんか動かない。とはいえ、今回の題材はコンセプトとしては意外と悪くなかったかなと思います。

外部モニターで動画を見ると辛い

Mac

こんにちは。EURO2016盛り上がってますね。みなさん見ていますか。明後日からはトーナメントが始まりますが僕の予想はコレです。

f:id:bonhito:20160623154947p:plain:w500

フランス優勝とイタリアが勝ち上がるとこがミソです。山が違っていたら決勝はイタリアvsフランスにしてました。まぁぼく欧州サッカー全然知りませんけど笑

という感じで、最近はEURO2016の試合ハイライトをよく見るのですが、動画鑑賞においてはMacbook Airが思ったより非力で辛いです。

特に、外部モニタで視聴すると、うなる。

ちなみに自分のMBAは2013年モデルの11インチで、cpuはi7の方なのですが、普通にMacのモニタで見ている分には特にcpu(ファン)は暴走しません。反対に、外部接続しているモニタは23インチで、これで見ているとcpuファンがかなり回り始めます。でかいモニタを使うとやはりレンダリングとかの関係で重いんですかね?

ということで、ちょっと気になったので簡単に可視化してみました。

方法はMacモニタと外部モニタでそれぞれ動画を最大化して視聴し、cpu使用率を計測します。ちなみにGoogle Chromeニコニコ動画を見ました🍺。シンプル。

一応少し頑張ってスクリプトを…。cpu使用率を取得するのはshellscriptで、グラフ化はpythonでやりました。

んで結果、Macモニタの場合 f:id:bonhito:20160623165841p:plain:w500 外部モニタの場合 f:id:bonhito:20160623165839p:plain:w500

という感じでした。グラフの背景が白で汚い…。

とりあえず、外部モニタの場合,Macのモニタに比べて30%近くcpu使用率が高いという結果に。今回はMacを起動した後に、GoogleChromeだけを立ち上げて動画を視聴という流れで揃えたので、これでもcpu使用率は差が出てない方だと思います。普段からなんとなーくアクティビティモニタを開いて見たりしていますが、他のタブや他のアプリケーションを同時に開いていると、二倍近く差が出る時もあった気がします。やっぱりcpuが非力だと外部モニタって負荷でかいんですね…。

あと、MacIntelのcpuを積んでいるので、いい感じにオーバークロックして処理性能を上げる「Turbo Boost」という機能がついているみたい。ただ、排熱効率に優れないMacの場合これが原因でcpu温度がみるみる上昇していきます。cpu負荷が大きいプロセスを実行すると、このおせっかい機能によって熱暴走がおきてcpuファンの回転に拍車をかける─ これも原因の一つかなぁ。まぁそんな感じです。

あと今回書いたスクリプトの方は、シェルスクリプトでpsコマンドの出力をcutできなくてちょっと躓きました。結局awkで解決したので、もっとawkを使いこなしたい。あと、シェルスクリプトはスペースが入る文字列を扱うときにわけわからなくなったりするので"と'の違いとかをちゃんと覚えないとダメかも。日頃からもっと頻繁に書いていきたいです。

Pythonの方は去年一年間使ったのでわりとスラスラ書けた。最近はC/C++ばっかり使っているのであれだけど、やっぱりメソッドチェーンは慣れないと読みづらい気がする。matplotlibはとても使いやすいので好き。

grep,sed,awk

grep,sed,awk

コレ読みたい。それでは。

Macならできること ぱーと1

飯を食いながら記事が読みたい.でもご飯を口に入れながら上目遣いでディスプレイを見たり,片手にスマホを持ちながらみたいなのは嫌だという方.

  1. まず,必要に応じてイヤホンをしましょう.
  2. 読みたい記事のテキストを選択しクリップボードにコピーしましょう.
  3. ターミナルでpbpaste | sayとタイプしましょう.
  4. 以上です.高品質な音声合成技術に感謝しましょう.

[補足]

  • 読み上げ時の声質を変更したい方はそういったことも可能です.
  • ちょっと打つのがめんどくさいなという人はecho 'alias yomiage="pbpaste | say"' >> ~/.zshrcなどしましょう.
  • そうMacなら,ね.

Wordで上下の余白が消えてしまった時

f:id:bonhito:20160530102508p:plain

昨日Word (2016 for Mac)を開いたら画像のように余白が消えて見えなくなってしまっている。 一応余白自体は存在しているらしいが上にスクロールできず、切れてしまっている模様。

解決策はギリギリ見えている余白のところをダブルクリック(これだけ)! f:id:bonhito:20160530101932p:plain

一応ググると下記の記事がヒットする。ここではWordの設定を変更しているみたいだが、Word 2016 for Macにはないので注意。

Wordの上下の余白が消えてしまった場合の対処方法

これ何かの便利機能なのだとしたら意図的にそうする方法を知りたかったり。またWordのおせっかい機能だとしたら激おこ😡ですな。