Atomのlinter-jshintを使っていてエラーが下に出るのがつらかったので解消したメモ
AtomでJSHintを使うのにlinter-jshintを使っていた。 ただこれをそのまま使うとエディタの下にエラーが表示されて表示される度にかなり気になったけど設定で簡単に消せたのでメモ。
linterの設定を変更する
JSHintの表示の変更には依存するPackageのlinterから設定を変更する必要がある。
Settings > Packages
linterのSettingsを選択。
チェックボックスが並んでいるので
'Show Error Panel at the bottom'のチェックを外す
AtomのpackageのJumpyの設定
atom-material-uiいままでのAtomのThemeの中で一番気に入ってます!
でも設定してみたら問題が…
JumpyというPackageも普段使ってるんですが文字が見えなくなった…バッティングしてるのかな…
とりあえず自分でCSSを書いて見えるように調整しました。
Atom > Open Your Stylesheet
からstyle.lessを開いて
atom-text-editor::shadow .jumpy { &.label { color: black; } &.jump { } }
このコードを追記するだけで文字が黒になって見えるようになりますよ。
またバイオリンをはじめる
ちょっと前に友達の結婚式の余興で8人で久々にアンサンブルをした。 予想以上に楽しかったから、またバイオリンを始めようと思って今日は体験教室に行ってきた。
今まで大手の教室では習ったことあったけど、今日行ったのは割りと小さめの池袋の教室で、大手の教室に比べると始まりも終わりもすごくゆるい感じだった。
変に入会の強要もされなかったし、今日行ったとこで始めてみようかなぁと思います。
仕事以外で趣味とかコミュニティとかあることは結構大事かもと思った一日でした。
よく使うWebStormのショートカットメモ
個人で設定したり忘れそうだからメモ
cmd + F4
タブを閉じる
cmd + k
コミット
cmd + alt + ↓, cmd + ctrl + n
下にスクロール
cmd + alt + ↑, cmd + ctrl + p
上にスクロール
cmd + alt + →、ctrl + 1、ctrl + 2
2ペインの時隣のペインに移動
Cordovaでハイブリッドアプリを作るver1.0(開発環境構築)
昨日からの続き。
Cordovaでハイブリッドアプリを作るver0.5(開発環境構築) - ミズイロラボ
cordovaを使ってアプリ制作の開発環境構築の続きを書く。
アプリ制作2日目
Android SDKのディレクトリにパスを通す
初日はAndroid SDKのディレクトリのパスがわからずに詰んで寝てしまった。 次の日AndroidStudioは普段仕事で使ってるwebstormというIDEの親戚だったことを思い出した。 webstormにはcmd + aを押すことで適当にやりたいことを打つと候補がでる神機能がある。 だめもとでAndroidStudioでcmd + aを打った。webstormと同じ機能があった!そこに適当に「sdk」と入力すると最初にAndroidSDKManagerとでたので実行。SDK Pathのところにパスが書いてあった、やった!
ターミナルを開く、ホームディレクトリで以下のコマンドを入力
.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を追加した。
チェックをいれて[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(開発環境構築)
最近スマホを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)
- 作者: 久保田光則,アシアル株式会社
- 出版社/メーカー: 技術評論社
- 発売日: 2013/12/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
紙の本はかさばるし嫌だったからkindle本で購入。 実は以前kindle本の技術書をパソコンで読む気で買ってパソコンで読むことができずに悲しい思いをして記事を書いたことがあった。
だけど今やkindle本はパソコンでも読める、Chromeにkindle本を読むためのエクステンションがでたからだ。 ダウンロードしてエクステンションで読もうとしたら
「この本はKindleCloudReaderでは開けません。」
とかいう絶望的なお知らせがきた。そういえば漫画はいけるけど小説とかは読めないって噂を聞いたな…この本はそれにあたるのか、マジかよ\(^o^)/ とはいえ買ってしまったしスマホで読むことにしたnexus6画面でかくてよかった…それでも技術書読むのにはつらいけど...
Android SDK(AndroidStudio)ダウンロード
最初はAndroid SDKをダウンロードするらしい。 URLが書いてあったから早速ダウンロードページを開いた。 早速最初の落とし穴があった。本に書いてあるページと表示されるページが全然違う。
本だと上の画像の青いドロイドくんがいるページのキャプチャがあっがAndroidStudioとかいうツールのダウンロードページに飛ばされた。
こいつがググっても環境構築の仕方がよくわからなかった原因なんだよなー。 割りと最近でたものらしくてネットや買った本などの説明にはでてこない、とりあえず代わりになるだろうと思いダウンロードした。起動の途中で「JDKが必要ですよ」みたいなことを言われたからいれた。
Node.jsインストール
これは実はすでにやっていた、ググればでてくるので飛ばす。
cordovaコマンドラインツールをインストール
ターミナルを開いて
$ npm install cordova -g
でOK! 環境構築でターミナルでなんかするときは「どうせ一発じゃだめなんでしょ?まぁとりあえずコマンドいれてみるかー」くらいの気楽な気持ちでいかないと心折れると思う、とりあえずこれは一発でいった。コマンドの最初にsudoをつけないといけない場合もあるみたい。
$cordova -v
がとおればうまくいってるはず!
Android SDKのディレクトリにパスを通す
cordovaのコマンドはAndroid SDKのコマンドを内部で利用するためパスを通す必要があるらしい。 「パスを通す」って言葉にすごい恐怖心ある、なんか新しく環境を構築するとき毎回でてくるけどすんなりいった試しがない… 案の定今回もすんなりいかなかった。
本にも書いてあったしこちらのページとかにも書いてあるけどAndroid SDKのディレクトリがどこに格納されてるのかわからなかった。結構ググってみたけどわからなかったためこの日は寝た。
アプリ制作2日目に続く…