ミズイロラボ

読み返して恥ずかしくないものを書きたい

AtomのpackageのJumpyの設定

web

atom-material-uiいままでのAtomのThemeの中で一番気に入ってます！

でも設定してみたら問題が…

JumpyというPackageも普段使ってるんですが文字が見えなくなった…バッティングしてるのかな…

とりあえず自分でCSSを書いて見えるように調整しました。

Atom > Open Your Stylesheet

からstyle.lessを開いて

atom-text-editor::shadow .jumpy {
    &.label {
        color: black;
    }
    &.jump {
    }
}

このコードを追記するだけで文字が黒になって見えるようになりますよ。

またバイオリンをはじめる

雑記

ちょっと前に友達の結婚式の余興で8人で久々にアンサンブルをした。 予想以上に楽しかったから、またバイオリンを始めようと思って今日は体験教室に行ってきた。

今まで大手の教室では習ったことあったけど、今日行ったのは割りと小さめの池袋の教室で、大手の教室に比べると始まりも終わりもすごくゆるい感じだった。

変に入会の強要もされなかったし、今日行ったとこで始めてみようかなぁと思います。

仕事以外で趣味とかコミュニティとかあることは結構大事かもと思った一日でした。

Photoshopのレイヤーの表示非表示をcommand+z(ctrl + z)で戻れるようにする方法

web

たまにPhotoshopの設定が吹っ飛んで毎回設定の方法忘れるから自分のためのメモ

ちなみに普段使うPhotoshopのバージョンははcs6

ウインドウ > ヒストリー > ヒストリーオプション　> レイヤーの表示/非表示の変更を取り消し可能にする

で設定できるよ。

Cordovaでハイブリッドアプリを作るver1.0（開発環境構築）

web

f:id:ne200152g:20150121015153j:plain

昨日からの続き。

Cordovaでハイブリッドアプリを作るver0.5（開発環境構築） - ミズイロラボ

cordovaを使ってアプリ制作の開発環境構築の続きを書く。

アプリ制作2日目

Android SDKのディレクトリにパスを通す

初日はAndroid SDKのディレクトリのパスがわからずに詰んで寝てしまった。 次の日AndroidStudioは普段仕事で使ってるwebstormというIDEの親戚だったことを思い出した。 webstormにはcmd + aを押すことで適当にやりたいことを打つと候補がでる神機能がある。 だめもとでAndroidStudioでcmd + aを打った。webstormと同じ機能があった！そこに適当に「sdk」と入力すると最初にAndroidSDKManagerとでたので実行。SDK Pathのところにパスが書いてあった、やった！

ターミナルを開く、ホームディレクトリで以下のコマンドを入力

vim .bash_profile

.bash_profileを入力できるようになるから以下を追記

export PATH=$HOME/Library/Android/sdk/tools:$PATH export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH

僕の場合はここにあったけどみんながそうとは限らないかもしれないからそれぞれのパスにしてみてください。

パスが通っていたらandroidコマンドが使えるようになる試しに入力してみる。

$ android -h

動いたらパス通ってる！環境構築でここに一番時間かかった…

プロジェクトを作成

$ cordova create hello com.example.hello HelloWorld -d

このコマンドでcordovaで必要なファイルが一気に生成される。helloというディレクトリができるはず。 -dオプションはコマンドの過程を見れるようにするものらしい、エラーとかでたときわかりやすい。

OS用のファイルを追加

次にOS（iOSとかAndroidとか）用の必要なファイルを追加する。 僕の場合はAndroid用のアプリを作りたかったからAndroidのファイルだけ追加した。 まず新しく作ったhelloディレクトリに移動。

$ cd hello

ファイル追加のコマンドを打つ

cordova platform add android

だがしかしここでエラーがでた。

Error:Please install ndroid target 19

とかそんな感じ。 でもこのエラーの解消方法は本に書いてあった。なんて親切。 まずはAndroid SDK Managerを立ち上げる。さっきAndroidStudoから起動したやつだ。 ターミナルに

$ android

と入力Android SDK Managerが立ち上がるのでAndroid SDKを追加する。 僕はとりあえずAndroid 4.2.2とAndroid5.0.1を追加した。

f:id:ne200152g:20150122014421p:plain

チェックをいれて[Install Packages]のボタンを押す。 ライセンスを確認して[Accept]にチェックを入れて[Install]ボタンを押す。 結構時間がかかったが無事に終わった。

Androidエミュレーターの起動

これでエミュレーターを起動する準備ができたから起動してみる。

$ cordova emulate android -d

ビクビクしながらコマンドを打ったけどやっぱりエラーがでた＼(^o^)／ まぁ一発ではいかないかー。

Failed to run "ant -version" cordova

エラーの一部はこんな感じだった早速ググるStackoverflowがヒットした、見てみるとすぐに解決できそうだったからコマンドを入力

$ brew install ant

ちなみにこれはHomebrewが入ってないと実行できないので入ってない人はHomebrew入れてみてください。

インストールが終わったとこで再度ためしたら無事に起動した。

実機でアプリを動かす

さていよいよ実機でアプリを動かす、スマホをUSBでつないでこのコマンドを打つと実機で動くらしい、どうせ一発じゃだめだろうとおもいながら入力

$ cordova run android

途中までいい感じだったけど最後のほうでエラーがでた。

WARNING : No target specified, deploying to emulator 'emulator-5554'.

ググってみるとまたStackoverflowがヒットほんとにありがたい。 でもエラーじゃないんじゃない？的なことが英語で書いてあった。

androidをUSBで開発できるモードになっていなかったのが問題らしい…

実機をUSBデバッグモードにする方法はNexus6であればこのブログが参考になった。本当にありがとうございます。

ここまで結構かかったけどなんとか実機でアプリが動いた！ 開発が進んだらまた書いてみようと思う。

Cordovaでハイブリッドアプリを作るver0.5（開発環境構築）

web

f:id:ne200152g:20150121015153j:plain

最近スマホをiPhoneからandroidのスマホに変えた。 機種はnexus6にして、初のandroidに感動してたんだけど致命的な問題に気づいた。「いい家計簿アプリがない…」iPhoneで使ってた家計簿アプリは100円の有料アプリだったけど、すごく使いやすかった。ないならそっくりなのを自分で使ってみるかーっと思いおとといあたりからandroidアプリを自分で作ってみること決めた！

なんでCordovaで作るのか

web屋さんだからhtml, css, jsは普段さわっている、とりあえずhtml5で開発したかった、ほかにもhtml5で開発できるフレームワークはいろいろあったCordovaはドキュメントがweb上に多そうだったからえらんでみた。

とりあえず開発環境構築

アプリ制作1日目

cordovaとphonegapは同じようなものらしいのでとりあえずこの2つをキーワードにして環境構築のやり方をググった。

頑張ってググってたけど30分で限界を感じたから本を買った。amazonで検索して上位だったやつ。

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

紙の本はかさばるし嫌だったからkindle本で購入。 実は以前kindle本の技術書をパソコンで読む気で買ってパソコンで読むことができずに悲しい思いをして記事を書いたことがあった。

kindle本がパソコンで読めない、、、 - ミズイロラボ

だけど今やkindle本はパソコンでも読める、Chromeにkindle本を読むためのエクステンションがでたからだ。 ダウンロードしてエクステンションで読もうとしたら

「この本はKindleCloudReaderでは開けません。」

とかいう絶望的なお知らせがきた。そういえば漫画はいけるけど小説とかは読めないって噂を聞いたな…この本はそれにあたるのか、マジかよ＼(^o^)／ とはいえ買ってしまったしスマホで読むことにしたnexus6画面でかくてよかった…それでも技術書読むのにはつらいけど...

Android SDK（AndroidStudio）ダウンロード

最初はAndroid SDKをダウンロードするらしい。 URLが書いてあったから早速ダウンロードページを開いた。 早速最初の落とし穴があった。本に書いてあるページと表示されるページが全然違う。

f:id:ne200152g:20150121021110j:plain

本だと上の画像の青いドロイドくんがいるページのキャプチャがあっがAndroidStudioとかいうツールのダウンロードページに飛ばされた。

こいつがググっても環境構築の仕方がよくわからなかった原因なんだよなー。 割りと最近でたものらしくてネットや買った本などの説明にはでてこない、とりあえず代わりになるだろうと思いダウンロードした。起動の途中で「JDKが必要ですよ」みたいなことを言われたからいれた。

Node.jsインストール

これは実はすでにやっていた、ググればでてくるので飛ばす。

cordovaコマンドラインツールをインストール

ターミナルを開いて

$ npm install cordova -g

でOK! 環境構築でターミナルでなんかするときは「どうせ一発じゃだめなんでしょ？まぁとりあえずコマンドいれてみるかー」くらいの気楽な気持ちでいかないと心折れると思う、とりあえずこれは一発でいった。コマンドの最初にsudoをつけないといけない場合もあるみたい。

$cordova -v

がとおればうまくいってるはず！

Android SDKのディレクトリにパスを通す

cordovaのコマンドはAndroid SDKのコマンドを内部で利用するためパスを通す必要があるらしい。 「パスを通す」って言葉にすごい恐怖心ある、なんか新しく環境を構築するとき毎回でてくるけどすんなりいった試しがない… 案の定今回もすんなりいかなかった。

本にも書いてあったしこちらのページとかにも書いてあるけどAndroid SDKのディレクトリがどこに格納されてるのかわからなかった。結構ググってみたけどわからなかったためこの日は寝た。

アプリ制作2日目に続く…

Cordovaでハイブリッドアプリを作るver1.0（開発環境構築） - ミズイロラボ

atomのemmetでコードを展開するショートカットを変更する方法

web

f:id:ne200152g:20150108014406p:plain

最近自宅で使うエディタをatomにしてみました。

Packageにemmetを早速導入したけどデフォルトのコードを展開するショートカットはctrl-e。

文末に移動するショートカットとバッティングしていて文末に移動するショートカットが上書きされてしまった… 困ったので変更してみました。

Settings > Keybindings > your keymap file > keymap.cson

このファイルに

'.editor:not(.mini)': 'ctrl-e': 'unset!'

'.editor:not(.mini)': 'ctrl-e': 'editor:move-to-end-of-line'

上記を追記すると解消されました！ コードの展開はcmd-shift-eで実行されます！

ほんとは展開するショートカットキーをtabにしたいけどまだ分からない…