Sun, Apr 19, 2015

insert-modeでvimのカーソルキー形状を変えて幸せになる(gnome-terminalの場合)

Command/Normalモードを間違う 問題はこれ。 頻繁にどちらのモードかを勘違いしてしまってタイプミスをしてしまう。 自分はgnome-terminal上でVimを使っている。tmuxなどターミナルマルチプレクサとの共存が必要だからだ。 gVimではカーソル形状が矩形と'｜'が切り替わるのだが、ターミナル上では制限があって、調べたところ簡単ではなかった。 暫定策 代替案として、 lightline.vimを使ってInsert/Normalモードの状態を色付きで 画面下部に表示し、視覚的に理解しやすいように試みた。 確かにわかりやすいが、画面の端の色なので、気づかずにミスタイプになることも多い。 また、横のラインを表示・非表示を( autocmd InsertEnter,InsertLeave * set cursorline! )で切り替える アプローチも試みたが、モード間違いは大きく改善はしなかった。 救世主 これまでかと思った矢先に、救世主が現れた(stackoverflowで記事を見つけた) To change the shape of the cursor in different modes, you can add the following into your vimrc. For the Gnome-Terminal (version 2.26)Edit if has("autocmd")au InsertEnter * silent execute "!gconftool-2 --type string --set /apps/gnome-terminal/profiles/Default/cursor_shape ibeam"au InsertLeave * silent execute "!gconftool-2 --type string --set /apps/gnome-terminal/profiles/Default/cursor_shape block"au VimLeave * silent execute "!
Mon, Apr 13, 2015

AngularでのDOMへのアクセス

AngularがDOMのdata-x属性の値を取得する必要があったのでメモ。 今回はdata-x属性内のハッシュ構造のデータを取り出す必要があった。 <SELECTOR data-x = '{"id":"123", "name":"hoge"}'...>というDOM要素が存在した時 str = angular.element('SELECTOR').attr('data-x')のような形式でデータを取得することができる。 しかしこの状態ではstrはただの文字列として取得した状態なので、ハッシュを取り出すにはパースしてあげる必要がある。 hashed_data = angular.fomJson(str) これでhashed_data = {"id":"123", "name":"hoge"}が取得できる。
Sat, Mar 21, 2015

ng-japan

Angualrjsの日本初のカンファレンスng-japan2015 が渋谷で2015/03/21にあったので行って来た。 場所はサイバーエージェント。以前参加した勉強会もここでやってた気がする。 毎度の通り、最初の1個目のセッションはあんまり聞けなかった。 結構人がいて定員500名の会場が普通に埋まってた こんなかんじ↓ すごい人！ ng-japan venue is packed! #ng_jp pic.twitter.com/Cb1Zfn9Q63 — Eiji Kitamura (@agektmr) 2015, 3月 21 今回アシアルの田中さんのセッションが個人的に面白かったのでそちらにフォーカスして書いています。 onsen-uiのはなし AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ HTML5ハイブリッドアプリとは ネイティブのアプリとは違って、View部分をHTMLで記述。 ネイティブ層、HTML5層があって内部はHTML5で作っている。 アプリ内ではWebviewを利用している。 ###メリット クロスプラットフォーム性 ネイティブ機能をJsから呼び出し ハイブリッド用のCordovaから呼び出し OSからのAPI呼び出しを一本化する ###色々メリットはあるがしかし… ハイブリッドアプリは作ってみたものの… Facebookでザッカーバーグの発言。“HTML5にかけたのは失敗” ###しかし状況は変わってきた モバイルの高速化 CrossWalkだったり、ChromiumがWebviewに使われたり。 DHH（Rails作者）によるハイブリッドアプリに関する好評 ###デメリット UIコンポーネントが標準で持っていない チューニングの方法が難しい ##チューニングの方法 インスペクタのTimelineタブで計測 AndroidではChrome・iOSではsafariのinspecter タイムラインタブのカテゴリの説明（図） 描画が始まって16ms以下に抑えると60fps以上出る 逆にそれ以上だしてもディスプレイが追いつかない チューニング対象となる5つのフェーズ Loading リソースの読み込みやパース 組み込みなのであんまやることない Scripting JavaScriptの実行時間。純粋な計算は基本的に問題なし。 リフロー、Canvasへの命令など時間はかかる ProfileTabで簡単にわかる Rendering レイアウト処理 再計算(Recaluculate Style) CSS OMを参照してDOM*CSSルールの数分マッチング処理が走る。 使ってないCSSのルールマッチングの文だけ遅くなる 重たいCSSのセレクタの書き方 子孫セレクタやめたほうがいい クラスで指定する書き方が速い 使ってないCSSのルールは消す。 Layout すべてのDOMのレイアウト情報を計算 計算された結果の視野的なオブジェクトのツリーがレンダリングツリー Painting 描画処理 DisplayListの生成 Rasterize ピクセル化 CompositeLayeers レイヤの合成 雑多なチューニングの小話 translate3d(0,0,0)が早いのはなぜ？ GPUで描画されるから?
Fri, Feb 13, 2015

ApacheCordova勉強会第4回

ApacheCordova勉強会第4回 AdobeからPhonegap開発チームの方々が来られていた。 以下雑なメモ。 セッション1：米Adobe PhoneGapチーム【逐次通訳】 Adobeの人(Adobeに買収された開発チームの方)のセッション。英語同時翻訳。(ありがとうございました) パフォーマンス問題としていいニュース Apple、GoogleともにWebViewの高速化が進む Appleもなんか出したらしい AndroidのはおなじみCrossWalk projectの事 Why Phonegap? CrossPlatforms ProjectSpeed UI Native functions Update from Web Appstoreを通さないアップデートができるとのこと ( てか、それいいの？　) Plugin support ShowCase ( PhonegapAppStoreで見れるよ ) BankOfAmerica Sabre - TripCase(HTML5/JSでゴリゴリ書いてるらしい) Untappd Sworkit Large Home Store Instagram・Evernoteなどはハイブリッドアプリ(割合とかは言ってなかった) BaseCampもHybrid ほとんどがHTML5ベース Rails作者、 DHHも情報が多いアプリだとHybridは向いているとのコメントを寄せていた PhoneGap Enterpriseについて Adobeのマネタイズのはなし ダッシュボードでメタデータ統計など利用可能 マーケの人が(コンテンツなどを)管理画面から簡単に更新可能 セッション2： Visual Studioを使用したCordova開発 MSの方の話。主にVisualStudioの話でしたので話半分にしか聞けていません。。。
Mon, Jan 26, 2015

Cordova勉強会第3回行ってきた

Codova勉強会行ってきた だがしかし… 参加時刻20:17 ほとんど遅刻してアレ (19:00-21:00 at IIJさん) ビールとポテチもらいながら最後のセッション聞く感じになりました。 デスクトップアプリマルチOS対応 with HTML5 対象の人は以下の人 デスクトップアプリ作りたい いろんなディスプレイサイズ辛い パフォーマンスそんな求めてない C#よりJSやりたい うん。多分そんなところかも。 Destkop用のネイティブ言語を扱えない人も結構多そう。 3つのやりかた 下記のやり方があるらしい。 Mozilla XULRunner Cordova NW.js(Node-Webkit) あと質疑応答でアシアルの人がAtom-shellっていうのが最近あるよと言ってた。 なんかMonacaのローカルもそれ使うとか何とか（よくわかってない） Mozilla XULRunner 一番シンプルで古株なやつ エンジンGecko GeckoはHTML5だけじゃなくてXULというマークアップを動かせる セガ版Xamarinのような存在（?） 名前はXULだけど中身GeckoなのでHTML5が使える これ知らなかった。 あとオワコン(HTML5に置き換えてる今から使うなとMozillaの中の人に言われたw)らしい Cordova 3つの中で一番発展してる エンジンがTrident(Win)らしい ビルドツール プラグインで機能を足しやすいらしい Win版の環境がだいぶ残念とのこと言っていたけど、よくわからなかった NW.js(Node-Webkit) What is NW.js 3種の中で若造らしい Node.js + Web標準でデスクトップを作ることができるよ XULRUNNERとCorovaのいいどこどり?らしい どうする デスクトップはNW.
Sat, Jan 3, 2015

今やっていること, 2014年と2015年

あけましておめでとうございます 久々更新過ぎて、書き方忘れてた。。。 octopressのテンプレートにマークダウンで書いて、それをpushするというフローでやっていたんだけど、 そのvimのプラグインのコマンドを忘れてなんだっけとしばらく考える程度に放置してた。ガンバロウ。 また、正月早々風邪を引いてしまって、これが中々治る気配がないという。。。 あまりイケてないスタートになってしまった。 2014年何をやったか。何を身につけたか 自身の棚卸をしていくことにする。 3月に前職を退職。 作れる技術をもったエンジニアになろうと思い、大手電機メーカーのSEを辞めた。 プログラミングには興味があったけれども、Webのコピー&ペーストでしか何かを動かしたことがないので自分で作るといったこととは あながち離れたところにいた。サンプルがないと死ぬみたいな感じ。 割と前職ではプログラミングわかる人とということになってたけど、本人の中での理想と現実のギャップは大きく、 何かを作っているはずが何も作ってないエンジニアとして嫌気が差していた。 自分が欲しい物は自分で作りたいという強い欲求はあったが、誰にも教えられるほどの知識・スキルがなかった。 どれから身に付けるかと考えた時に、 WEBは息が長い、きっと様々なモノのI/FとしてWEBが生きるはず。 しかしながら今皆使っているのはモバイル。 と思った。 Web技術 モバイルアプリ これらをひと通り作れるようになろうと決めた。 やったこと 2014年、とりあえず人並みにまでを目標に、自分で学んでみた。 下記の技術を中心に学習した。 Ruby on Rails AngularJS Android(Java) 1年前の自分だったらちょっと重いから1つずつやろうか。などと諭していそう気がする。 独学で勉強したり、勉強会におせわになったり、ベンチャー企業のお世話になったり。 逆に学んだことをシェアハウスの住人や知り合いに教えてみたり。 そんなこんなでいつの間にか、志して1年を迎えてしまった。 その結果、どれも不完全な感じで終わってしまった気がする。 まだまだどれも伸びしろ十分(笑) 一番身についたのはRailsかな。 AngularJS周りで少し色目を出して、秋ごろにionicをベースにWebRTCのP2PビデオチャットのAndroidアプリを作ってみたりした。 最後にAndroid Nativeで作らなかったのは本気でAndroid/Javをa学ぶ気力が足りていなかった説は大いにあり得る。。 結果どうあったにせよ、プログラミング言語的なコンプレックスは自分からは大いに取り除かれたので、それはそれで大いに良かった。 2015年やりたいこと プログラミング言語的コンプレックスは抜けた。しかしながら英語、貴様はまだだ！ という事で、プログラミング以外に英語の学習を重点的に行なっていくようにしたいと思う。 海外で1・2年は仕事しながら住んでみたいという憧れがあることがひとつ。 そして、エンジニアとして先端を走るときにドキュメントは必ず英語として立ちはだかる、 もしくは公式ドキュメントはStack Overflow!なんてことはザラ。 エンジニア目線としても英語はぜひコンプレックスをなくしていきたい所存。 やろうと思っていること フィリピン留学 ビデオチャットで英会話 つなぎのtoeicの学習 2014年の伸びしろを埋めていく作業を続けながら英語を学んでいく。 自作のビデオチャットアプリで英会話することが今年の密かな目標です (ブログの更新はハードル高そうなので一応含んでいませんw)
Fri, Sep 12, 2014

twitterbootstrapでnavbarがモバイル表示にならない

mobileデバイス用のViewが768pxの際に切り替えが行われない。 PCブラウザ上では、サイズ変更時にViewが変わったが、実機やDeveloper toolでのエミュレーションでは適用されなかった。 <meta name="viewport" content="width=device-width, initial-scale=1"> つまるところ、これをhtmlのヘッダに下記を書き込んで置かないと行けなかった。 小一時間使ってしまった。 ご参考(http://getbootstrap.com/css/#overview-mobile) Mobile first With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
Thu, Sep 11, 2014

Rspecでインスタンス変数が参照できない

Rspecの世界からController内メソッドでインスタンス変数@hogeを利用した場合は、 直接Rspecからインスタンス化された@hogeは別物である。 まず、この事実を理解すべきだった。 Controllerの中の値をテストする Rspec側からRailsのController側でインスタンス化された値を評価する場合はassigns(:hoge)で参照するとよい。 また、RspecからDBアクセスして取り出す方法もあるのでこちらも忘れずに。 expect(Model.last.name).to eq 'modelname'で評価する。 どちらもどのような値がアサインされていればよいのかを意識してテストを書く。 その他 itブロック・contextブロック・describeブロックの中で定義した変数のスコープはその中に限る。 そのため、スコープを飛び越えて同じ値を扱うためにはインスタンス変数を利用する必要がある。 はじめてのテストということでハマってしまった。 テストではRailsの世界の変数か、Rspecの世界の変数なのかを明確に意識する必要があった。 実行中のプログラム内なのか、その外なのかを常に意識する。 RequestヘッダをRspecで作ってそれをRailsに投げる。 Railsの中のController内で、どのような値がアサインされるかテストする。 どの世界の値を取得して何と比べるのか。 何をテストすべきかを意識していれば回避できる問題。
Tue, Sep 2, 2014

vim-surround

テキストオブジェクトを利用してその周りを囲ったり、周りについてるクォーテーション、括弧を一発でつけたり外したりできる すぐに忘れてしまうのでメモ よく使うコマンド コマンド 実行内容 cs({ (を{に置き換える csw" 単語の外側を"で囲む ci" "で囲われた部分を消去し、入力状態に ci" "で囲われた部分を消去し、入力状態に いつも忘れるコマンド コマンド 実行内容 dst tagで囲われた部分を消去 yss" "で行を囲む yss= <%=で行を囲む(vim-rails必須) yss- <%で行を囲む(vim-rails必須) dst tagで囲われた部分を消去 選択状態でS" "で選択範囲を囲む
Thu, Aug 14, 2014

Androidでのデータの保存

データの保存 SharedPreferenceの利用 Androidアプリでデータを保存する方法のひとつ データをキーと値の組み合わせで保存 ファイルなどに保存するよりも非常に簡単にデータを保存可能 ただし大規模なデータには向かず、設定項目向き。 使い方 SharedPreferences はgetSharedPreferences(String name, int mode); でを取得。 name は Preference 自体の名前指定 mode には Activity.MODE_PRIVATE Activity.MODE_WORLD_READABLE Activity.MODE_WORLD_WRITEABLE などを指定 モードについては後述。 SharedPreferences pref = getSharedPreferences(PREF_NAME, MODE_PRIVATE); SharedPreferencesのインスタンスをgetSharedPreferencesで取得し、 editメソッドでEditorクラスのインスタンスを呼び出す。 そのEditorクラスにputXxxxメソッドを使って値を対応させる 最後にcommitメソッドで格納する // プリファレンスに保存 Editor editor = pref.edit(); editor.putString(KEY_TEXT, s); // KEY, VALUEの組み合わせで保存 editor.commit(); 保存される場所 保存された Preference は data/data/パッケージ名/shared_prefs の中に xmlファイルとして保存される データの取得 getXxxx(String key, Xxxx defValue)のkey, value形式で取得する。 getString(String key, String defValue); getInt(String key, int defValue); getLong(String key, long defValue); データ型 下記のデータ型がXMLに保存される
Fri, Aug 1, 2014

ListView and http connection

雑多メモ Railsで作ったサーバとHttpでCRUDなおしゃべりをするアプリを作った時に調べたメモ達 レイアウトをJava側で生成する LinearLayout linearLayout = new LinearLayout(this); linearLayout.setOrientation(LinearLayout.VERTICAL); setContentView(linearLayout);` レイアウトに要素を追加する Button button1 = new Button(this); button1.setText("OK"); button1.setLayoutParams(new LinearLayout.LayoutParams( LinerLayout.LayoutParams.MATCH_PARENT, LinerLayout.LayoutParams.WRAP_CONTENT)); linearLayout.addView(button1);` AddViewメソッド 「LinearLayout」クラスの親クラスである「ViewGroup」クラスで用意されている「addView」メソッドを使います。 public void addView(View child, LayoutParams params) Adds a child view with the specified layout parameters. Parameters: child: the child view to add params: the layout parameters to set on the child LinearLayout.LayoutParamsクラス 「android.widget.LinearLayout.LayoutParams」クラスは「android.view.ViewGroup.LayoutParams」クラスのサブクラスです。コンストラクタの1つのは次のようになっています。 LayoutParams public LinearLayout.LayoutParams(int w, int h) 他のビューに対する相対位置の指定(addRule) このビュー自身のサイズに関する設定の他に、別に追加されたビューに対する位置関係を設定することが出来ます。「RelativeLayout.
Wed, Jul 23, 2014

send data on Intent to call activity

#Activityとは Androidの画面単位の概念 一つのアクティビティに対してクラス一つが割り当てされる –>1つのXML(Viewテンプレート)と1つのJavaクラス(Activity)が必要となる #Intentとは インテントというのは簡単に言えばアクティビティなどが他のアクティビティやアプリケーションなどと情報のやり取りを行うための箱のようなものです。インテントという箱には、相手先や届けたい情報などが含まれています。 アクティビティから他の指定したアクティビティへインテントを送ることがあります。例えば他の画面を表示したい場合などです。 (参考:　http://www.javadrive.jp/android/intent/index1.html) ##暗黙的インテントと明示的インテント どの機能を呼び出すかをあらかじめ指定して直接それを起動することを「明示的インテント」(explicit intent)、何をしたいかは明示せずに漠然とそのデータに対して実行できる機能の一覧を要求することを「暗黙的インテント」(implicit intent)という。 (参考: http://e-words.jp/w/E382A4E383B3E38386E383B3E38388.html) ##どうやって起動するのか インテントのアクションとは、あるオブジェクトが他のオブジェクトを起動する際に、何をしたいのかを指すための指定です。ここでいうオブジェクトはActivityやサービスのことを指します。 アクションを指定するには、Intentクラスのコンストラクタで指定するか、もしくはIntentクラスのsetActionメソッドを使って指定します。### また、指定するアクションはすべてIntentクラスの遷移元への値の渡し方と受け取り方定数として定義されていますので、該当な定数を使ってアクションを以下のように指定します。 // アクションを指定してインテントのインスタンス生成 Intent intent = new Intent(Intent.ACTION_MAIN); // 次画面のアクティビティ起動 startActivity(intent); インテントをnew Intentしてそれを**startActivity()**の引数に入れて起動するらしい。 StartActivityとは 同一アプリ内の画面を呼び出すときは明示的Intentを作成する。そして**startActivity()の引数として引き渡すことでそれを実現する。ただし、この挙動は一方通行のようなもの。呼び出し元の情報を返して欲しいときはstartActivityForResult()**を使う。 また、アクションには「アクティビティアクション」と「ブロードキャストアクション」があります。 ###アクティビティアクション アクティビティアクションとは、他のアクティビティを起動する際に、何をしたいのかを示すためのアクションです。具体的には以下のものがあります アクション 機能 ACTION_MAIN メインエントリーポイントとしてアクションを起動する。データを戻すことができない。 ACTION_VIEW データをユーザに表示するためにアクションを起動する。 ACTION_ATTACH_DATA 別の場所にデータが添付されていることを示す。 ACTION_EDIT データを編集するためにアクションを起動する。 ACTION_PICK データの中からアイテムを選択するためにアクションを起動する。選択されたアイテムを受け取る。 ACTION_CHOOSER 起動するActivityを選択するチューザーをユーザに示し、選択してもらう。 ACTION_GET_CONTENT 指定した種類のデータをユーザに選択、もしくは作成してもらう。 ACTION_DIAL データで指定した番号を電話番号として設定する。データを指定しなければ、ユーザがその場で設定する。電話をかける操作はユーザに任せる。 ACTION_CALL データで指定した人に電話をかける。データを指定しなければ、ユーザがその場で指定した番号に電話をかける。 ACTION_SEND 別の人にデータを送信する。データの宛先は指定しない。このIntentを受け取ったアクションが、ユーザに宛先を問う。 ACTION_SENDTO データによって指定された人にメッセージを送信する。 ACTION_ANSWER かかってきた電話に対処するアクションを起動する。 ACTION_INSERT データに含まれるURIが示すディレクトリに秋のデータを挿入する。 ACTION_DELETE データに含まれるURIが示すデータをコンテナから削除する。 ACTION_RUN データを起動する。その意味はデータの種類によって異なる。 ACTION_SYNC データの同期を実行する。 ACTION_PICK_ACTIVITY Intentが与えられるActivityを選択し、そのクラスを返す。 ACTION_SEARCH 検索を実行する。 ACTION_WEB_SEARCH WEB検索を実行する。 ACTION_FACTORY_TEST デバイスが工場検査モードで起動する際にだけ実行される工場検査のメインエントリポイントとして起動する。 ブロードキャストアクション ブロードキャストアクションとは、なんらかのイベントが発生したことを他のオブジェクトに知らせる際に指定するアクションです。
Mon, Mar 17, 2014

Head-First-Rails_5

Head First Rails第5章のメモ ※ rails3の書籍をrails4で読み替えてチュートリアルを進めています。 scaffoldで生成したアプリケーションのフォームに バリデーションを設定していく。 ##バリデーションの設定。 バリデーションの設定はモデル名.rbの中に設定する validates_xxxxxx_of と記述する。 エラー処理を自分で書く場合 scaffoldを利用していない場合にエラー処理を自分で記述する必要がある。 画面に処理内容を表示するためにはSaveメソッドでの失敗をコントローラに伝える必要がある。 そのため、 if文で@model.saveを実行した結果true or falseに応じて、リダイレクトを 行うか否かを決定する。 form内で、f.error_messagesメソッドを利用する。 updateも同様。if文で@model.update_attributes(:params[:model])の実行し、結果に応じて リダイレクトを行うか否かを決める。 不明点 バリデーターのメッセージを変更方法 書籍内のvalidates_presence_of :trainer, "What's your name?"がうまく動かない
Sat, Mar 15, 2014

Head-First-Rails_4

Head First Rails第4章のメモ ※ rails3の書籍をrails4で読み替えてチュートリアルを進めています。 Scaffoldで作成したページを改造していく。 検索窓の導入 どのページにも検索窓を用意するので、layoutsを利用する layoutfileは｛モデル名｝.html.erbとなる form_forとform_tagの違い ハマったところ 書籍では<% %>だったが、実際はform_tagは <%= %> で囲む必要があった (rails 3とrails 4の違い？　) routesの追記が必要。 formの追加に合わせて post 'client_workouts/find' => 'client_workouts#find' rails4だとFindで :conditionsが使えない 代わりにモデル名.whereを利用する モデル名.find(id) findはidの検索専用 モデル名.where(:カラム名 => 内容) なんか指定するときは大体where defaultで生成されるapplication.html.erbはいつ利用される？ いつも使われてて、マスタのテンプレートとして使われてる どのViewもコントローラのメソッド（アクション）と紐づくViewが中にサンドイッチされて出力されてる。