作成者別アーカイブ: kiku

grepコマンドについて

タグ: , | 投稿日: 投稿者:

こんにちは。kikuです。

今日はLinuxのgrepコマンドについて書こうと思います。
何かを調べてる時はほぼ使いますよね。grep。

grep "hoge" aaa.txt

これは基本的な使い方です。
これでaaa.txtから”hoge”の文字列を探して引っかかった行を出力していきます。
 

grep -e "hoge" -e "fuga" aaa.txt

or的な使い方
これで”hoge”or”fuga”を探します。
 

grep -i "hoge" aaa.txt

大文字・小文字を区別しない使い方
これで大文字・小文字を区別せず”hoge”を探します。
 

grep -v "hoge" aaa.txt

not的な使い方
これで”hoge”が含まれていない行を探します。
 

grep "hoge" -A 3 aaa.txt

これで”hoge”が含まれていた行と次の3行を探します。
これはちょっと今までのとは違いますね。
 

grep "hoge" -B 3 aaa.txt

これで”hoge”が含まれていた行と前の3行を探します。
 

grep "hoge" -C 3 aaa.txt
grep -3 "hoge" aaa.txt

これで”hoge”が含まれていた行と前後の3行を探します。
 

grep -c "hoge" aaa.txt

これで”hoge”が含まれていた行の数を表示します。
 

grep -n "hoge" aaa.txt

これで行番号を先頭に付けます。
 

ls -l | grep "hoge"

こんな感じにすればコマンドの出力結果から”hoge”が含まれている行のみを表示します。
 
 
まとめ

grep -nie 'aaa' -e 'bbb' -B 2 aaa.txt | grep 'ccc'

これで行番号を先頭に付けて”aaa”と”bbb”を大文字・小文字を区別しないで探して、その行とその前の2行の中から”ccc”が含まれている行のみを表示します。
 
とても使えますね!エディタの検索機能を使っても探し出せないこともこれなら可能かもしれません!!


CSSの単位 vw, vh, vmin, vmax

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。

最近知ったCSSの単位について記載していきます。
vw, vh, vmin, vmax, この4つです。

よくレスポンシブデザインで使うのは%(パーセント)ですかね。

<style>
div {
  width: 50%;
}
img {
  width: 50%;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに対して50%のサイズで表示します。
つまりimgのサイズは画面の横幅の25%で表示されますね。

続いてwvはこんな感じです。

<style>
div {
  width: 50%;
}
img {
  width: 50wv;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに影響されません。
100wv=ビューポートのサイズ となってます。
つまりimgのサイズは50wvなのでビューポートの横幅の50%で表示されますね。

他のも同じようにビューポートに対する割合となっています。

wv ビューポートの幅に対する割合
wh ビューポートの高さに対する割合
vmin ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax ビューポートの幅と高さのうち、値が大きい方に対する割合

ちょうど使いたい場面があったのですが、ブラウザの対応バージョンの関係で断念しました。。。。
対応バージョンはこんな感じ。

  wv wh wmin wmax
chrome 20.0〜 20.0〜 20.0〜 26.0〜
FireFox 19.0〜 19.0〜 19.0〜 19.0〜
IE 9.0〜 9.0〜 9.0〜 11.0〜
Opera 15.0〜 15.0〜 15.0〜 15.0〜
Safari 6.0〜 6.0〜 6.0〜 6.1〜
Androidブラウザ 4.4〜 4.4〜 4.4〜 4.4〜
iOS Safari 6.0〜 6.0〜 6.1〜 7.0〜

Androidブラウザのところが敷居高いですね。
Android4.4未満のユーザを切り捨てるのはまだ早いかと思います。

というわけで、PCなら普通に使われるかもしれない、スマートフォン向けサイトでもそのうち普通に使われるかもしれない単位の紹介でした。


Android Lollipop での SDカードへ書き込み

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。

Lollipop になりアプリからSDカードへ書き込みできるようになりました。
でも書き込みが可能になっただけで、4.3までの様に自由に書けるわけではないんですね。

これが非常にめんどくさいわけです。。。

今日は Lollipop でのSDカードへの書き込み方についてです。

簡単に説明しますと、、
まずユーザにUI操作で明示的にアクセスを許可するディレクトリを指定してもらう必要があります。(←これが厄介です)
その上で Storage Access Framework を使えば出来るようになります。

具体的には ↓ のコードによって遷移する画面上でユーザに許可してもらいます。

Intent intent = new Intent(Intent.ACTION_OPEN_DOCUMENT_TREE);
startActivityForResult(intent, REQUEST_CODE);

UIで許可してもらったら、onActivityResult に戻ってくるので、そこでアクセスに必用なURIを取得します。
そのURIから DocumentFile を作成しこれでファイルにアクセスできます。
DocumentFile の作成は ↓ こんな感じです。

public void onActivityResult(int reqCode, int resCode, Intent resData) {
  if (reqCode == REQUEST_CODE && resCode == Activity.RESULT_OK) {
    Uri treeUri = resData.getData();
    DocumentFile pickedDir = DocumentFile.fromTreeUri(getActivity(), treeUri);
    // pickedDir でごにょごにょが可能に
  }
}

この取得した URI から作成した DocumentFile を使えばディレクトリ作成やファイル作成等の書き込みができます。
例えばディレクトリ作成なら ↓ こんな感じ

DocumentFile pickedDir = DocumentFile.fromTreeUri(getActivity(), treeUri);
pickedDir.createDirectory("dir_name");

書き込みを行う毎にURIが必用なのでアプリ側で保持しておきましょう。

一応こんな感じで書き込みできます。なかなか取っ付き難くて理解に苦労しました。。(Googleさん、前の仕様に戻して下さい)

もうGoogleさんはSDカードを使わせる気がないっぽいですよね。
今後のアプリはSDカードを使わないでも動くように作るのが良いのかもしれません。


コマンドの出力をファイルに保存する

タグ: | 投稿日: 投稿者:

どうも。kikuです。

あるコマンドの実行結果をファイルに保存したいと思うことありますよね。
でもたまにやる程度だとなかなか覚えられないので、今回は忘備録としてまとめようと思います。

# コマンド > ファイル名

※「コマンド」は 例えば ls とか スクリプトだったりいろいろ
※「ファイル名」は出力ファイルの名前

とりあえず上ので「コマンド」の標準出力は「ファイル名」に書かれます。
 
これだけじゃなんなので、今回はもうちょっと掘り下げていきます。
 

# コマンド 2> ファイル名

こうすると「コマンド」の標準エラー出力が「ファイル名」に書かれます。
 

# コマンド 2>> ファイル名

さらにこうすると、「コマンド」の標準エラー出力が「ファイル名」に追記されます。
ちなみに今までのは上書きでした。
 

# コマンド 1> ファイル名 2> エラーファイル名

標準出力と標準エラー出力の両方が欲しい時はこんな感じ。
 

# コマンド > ファイル名 2>&1

標準出力と標準エラー出力の両方を一つにしたい時はこう書きます。
これを解説すると、2>&1 は標準エラー出力(2)を標準出力(1)へリダイレクトすることを表しています。結果として標準エラー出力を標準出力へ出力し、さらに標準出力を「ファイル名」へ出力するので、両方が「ファイル名」へ出力されます。
 

# コマンド > /dev/null 2>&1

あとこれ。こんな感じのはよく見かけるかもしれませんが、これは標準出力と標準エラー出力を捨てていることを意味しています。
/dev/null は「ごみ箱」みたいなものなのでいらないものはここに吐き出しておきましょう。
 
 
cronやshellなどでも使うことがあると思うのでこれらは覚えておいてもいいかと思います。


Android 5.0 Lollipop でのSwitch

タグ: | 投稿日: 投稿者:

こんにちは。kikuです。

Android 5.0 が普及してきましたね。
既存のアプリが何も調整せず動いてくれるととても助かるんですけど、なかなかそううまくはいきません。

今回5.0用に対応したのがSwitch。
4.4までは普通に表示していたスイッチが、何故かテキストしか表示されなくなってしまいました。
現象としてはこんな感じ。
なんで消えてしまったのか不明なんですが、色々調べても他に同じ現象の方があまり居なかったので特別な条件があるのかも。。

とりあえず元々のxmlはこんな感じ

<Switch
    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center_vertical"
    android:textOff="OFF"
    android:textOn="ON"
    android:singleLine="true"/>

で今回対応したのがこれ。

<Switch
    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center_vertical"
    android:textOff="OFF"
    android:textOn="ON"
    android:thumb="@drawable/switch_bg"
    android:track="@drawable/switch_track"
    android:switchMinWidth="35dp"
    android:singleLine="true"/>
drawable/switch_bg.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/g_thumb" />
    <item android:state_pressed="true"  android:drawable="@drawable/c_thumb" />
    <item android:state_checked="true"  android:drawable="@drawable/c_thumb" />
    <item                               android:drawable="@drawable/g_thumb" />
</selector>
drawable/switch_track.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/c_thumb" />
    <item                              android:drawable="@drawable/g_track" />
</selector>
drawable/g_thumb.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="25dp" android:width="25dp" />
    <gradient android:height="25dp" android:width="25dp"
        android:startColor="#BBBBBBBB" android:endColor="#BBBBBBBB"/>
</shape>
drawable/c_thumb.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="25dp" android:width="25dp" />
    <gradient android:height="25dp" android:width="25dp"
        android:startColor="#FF5599DD" android:endColor="#FF5599DD"/>
</shape>
drawable/g_track.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="25dp" android:width="25dp" />
    <gradient android:height="25dp" android:width="25dp"
        android:startColor="#DDDDDDDD" android:endColor="#DDDDDDDD"/>
</shape>

これらを設定したら表示できました。
Switchにthumbとかtrackを設定しないと5.0だと消えてしまうみたいです、私の環境だと。(他は知らない)

※2015/12/4追記
AndroidManifest.xmlのテーマ設定を新しくすれば表示が可能とのコメントを頂きました!
ほげさん、ありがとうございます!

世間的には5.0からSwitchCompatというのが追加されたようで、ちょっと調べたらそれを使おうみたいな流れになっているように感じられましたが、実際はどうなんでしょうか。
時代は古い端末を切り捨てていくスタイルなんでしょうかね。

開発者としましては、できれば発売から2年したら新しい端末にするのが常識みたいな世の中になってほしいものです。


ajaxのキャッシュ

タグ: , | 投稿日: 投稿者:

こんにちは。kikuです。
先日ajaxでの通信で、期待通りの値が取れなくて困ったことがありました。
無事解決したので、備忘録として書き残したいと思います。

jQueryのajaxを使ってアクセスした場合、2回目以降のリクエストが実際には発行されずにキャッシュされた値が使われてしまう場合があります。
そんな時は cache に false を設定します。
※これはHEADとGETリクエスト時のみ正常動作します

$.ajax({
    url : "http://dev.blog.fairway.ne.jp",
    cache : false,
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

cacheはリクエストURLに “_={timestamp}” をGETパラメーターで追加しています。
上記では http://dev.blog.fairway.ne.jp?hoge=fuga&_=1253863496678  のようになってリクエストを投げます。

で、今回プチハマリしたのはPOST時です。
上で「HEADとGET時にしか正常動作する」という点を見逃していて、POST時に頑張ってcacheの設定をしていたので期待通りの動きをしなかったようです。

POST時にキャッシュされた値が使われてしまっていた場合は、XMLHttpRequest.setRequestHeader を使ってリクエストヘッダで If-Modified-Since を設定することによりキャッシュされた値が使用されなくなります。
ただXMLHttpRequest.setRequestHeader は XMLHttpRequest.open の後にしなければエラーになってしまいますので beforeSend でコールバック関数を指定します。

$.ajax({
    type : "POST",
    url : "http://dev.blog.fairway.ne.jp",
    beforeSend : function(xhr){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

このように設定することで、リクエストをキャッシュさせずに発行することができました。

うまく動かなかった時にキャッシュが原因と判断するまで結構時間がかかってしまわないように、キャッシュのことを頭の隅に置いておきたいところです。


gitの設定

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。 gitを便利に使っていこうと思います。 まず今の環境を確認しましょう。

これで見れます。

$ git config --list

 
名前とメールアドレスを登録していない人はこれをしましょう。

$ git config --global user.name "kiku"
$ git config --global user.email "kiku@example.com"

 
色の設定はこれでまとめてできます。これで結構見やすくなります。

$ git config --global color.ui auto

 
diffとかstatus等、各コマンド単位で色をつけたいと思ったらこれで設定可能です。

$ git config --global color.diff auto
$ git config --global color.status auto
$ git config --global color.branch auto

 
他にもコミットメッセージ等を入力する際に使用するエディタの指定ができます。

$ git config --global core.editor vim

 
diffツールの指定もできます。。。が、複数の設定が必要です。
extMergeというツールを使おうとした場合の例です。

$ git config --global merge.tool extMerge
$ git config --global mergetool.extMerge.cmd 'extMerge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"'
$ git config --global mergetool.trustExitCode false
$ git config --global diff.external extDiff

上の4つのコマンドは、こういうことをしています。
1.merge.tool で どんなツールを使うのかを Git に伝え
2.mergetool.*.cmd で そのコマンドを実行する方法を指定し
3.mergetool.trustExitCode で「そのコマンドの終了コードでマージが成功したかどうかを判断できるのか」を指定し、
4.diff.external で diff の際に実行するコマンドを指定します。

今回は基本的な設定を紹介しました。
他にも色々な設定があるので、是非探してみて下さい。


ajaxでクロスドメイン通信のやりかた

タグ: , | 投稿日: 投稿者:

こんにちは、kikuです。
今日はサーバー間で通信処理をjavascriptでしたいと思った時の実装例を記述していきます。

方法は色々あるかと思いますが、今回はajaxでやる方法について記述していきます。

ajaxでhoge.comにGETアクセスする処理例

クライアント側のコード例(hoge.comでないサーバーのコード)

    jQuery.ajax( {
        url: 'http://hoge.com',
        type: 'GET',
        success: function( data ) {
            console.log('通信に成功しました。');
        },
        error: function( data ) {
            console.log('通信に失敗しました。');
        }
    } );

サーバー側のコード例(hoge.comのコード)

header('Access-Control-Allow-Origin: *');
echo '成功です';

セキュリティの問題でサーバー側にも対応が必要なんです。
別のサーバーから無許可でアクセスが来て勝手にレスしていたら怖いですから当然ですね。

Access-Control-Allow-Origin:で許可するオリジンを決めます。

特定のオリジンのみ許可をする場合はこんな感じ

header('Access-Control-Allow-Origin: http://hoge.com');

クッキー情報を付けてアクセスしたい場合は

クライアント側のコード例(hoge.comでないサーバーのコード)

    jQuery.ajax( {
        url: 'http://hoge.com',
        type: 'GET',
        xhrFields: {
            withCredentials: true
        },
        success: function( data ) {
            console.log('通信に成功しました。');
        },
        error: function( data ) {
            console.log('通信に失敗しました。');
        }
    } );

サーバー側のコード例(hoge.comのコード)

header('Access-Control-Allow-Origin: ' . getenv('HTTP_ORIGIN'));
header('Access-Control-Allow-Credentials: true');
echo '成功です';

サーバー側にAccess-Control-Allow-Credentials: trueが必要になります。
更にAccess-Control-Allow-Origin:*が使えません。
ですが基本的にgetenv('HTTP_ORIGIN')で取得可能な場合が多いのでこれを付けておけば大体OKです。
※ダメだった場合は色々制限や工夫をすればいけますが省略します

今回はGETアクセスのみの紹介です。
POSTとかはまた色々やらなくてはいけませんので気をつけて下さい。。

 

参考
https://developer.mozilla.org/ja/docs/HTTP_access_control

 

 


cssで横幅計算

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。

今日はcssで横幅を決める時に楽になる方法を記述していこうと思います。

例えばtwitterのタイムラインのようなUIで、左にサイズ固定の画像があり右に残りのサイズで何かがあるような場合。
画像表示領域の横幅を60pxにしていた場合、残りは 100% – 60px ですよね。

これを実現するのにpaddingやらmarginやらを設定したりするのはとても面倒で馬鹿らしいです。

そこでこれ!calc()!!計算ができます。こんな風に使えます! 

width: calc(100% – 60px);

最初これを見た時は目から鱗が落ちました。
というか最初からこういうものがあっても良いと、いや、寧ろあるべきだと思いました。
しかし残念ながらAndroidでは使えないようです。

IE IE9〜
Chrome Chrome26〜 (Chrome19から25までは -webkit- をつける)
Firefox Firefox16〜(Firefox4から15までは -moz- をつける)
Safari Safari6.1,Safari7.0〜(Safari6.0は -webkit- をつける)
Opera Opera15〜
iOS iOS7〜
Android 未対応(Chromeなら対応している模様)

使い方はこんな感じにするのが基本でしょうか。

.hoge {
  width:96%;
  width:-webkit-calc(100% – 60px);
  width:calc(100% – 60px);
}

ではストレスのないcssライフを過ごしましょう。


Android 4.4以降のSDカード書き込みについて

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。

GoogleはAndroidの4.4からSDカードへの書き込みの仕様が変わって、大勢の開発者達を泣かせていますね。ひどい男です。

現状どのような状況になったのかまとめてみました。

まず今回の対象端末はプライマリストレージ本体のものでセカンダリストレージSDカードの端末、つまり大容量の内部ストレージを所持しつつSDカードにも対応している端末です。

しかし、全くSDカードに書き込めないというわけではありません。
全く書き込めなければSDカード対応という存在意義がなくなってしまいますよね。
下記パスにならアプリ側から書き込みが可能なようです。
[SDカードのroot]/Android/data/[パッケージ名]/[ここから書き込みできます]

しかし!アプリ側から上記階層の[パッケージ名]のフォルダを作成する事はできませんでした。
これは恐らく [SDカードのroot]/Android/data/ のディレクトリに書き込み権限がないからでしょう。
少なくとも私が色々試したところできませんでした。(何かできる方法があれば教えてください)

つまりこういうこと
[SDカードのroot]/Android/data/[ここへは書き込めません]
[SDカードのroot]/Android/data/[パッケージ名]/[ここに書き込めます]

開発者を泣かせすぎです。許しがたいです。よっぽどSDカードは使わせたくないんですね。

ちなみにアプリをアンインストールすると[パッケージ名]フォルダごと消されます。そこらへんも怖い仕様です。

端末にプリインストールされているファイルマネージャアプリは[パッケージ名]フォルダを作成することが出来るようですので、ユーザ側からすると色々と弄くれるみたいですね。

詳しくは、Android.comの「外部ストレージ技術情報」をご覧下さい。

2015/12/8 追記
APIレベル19以降(4.4)であれば、Context.getExternalFilesDirs()という便利なものが使えました!
これをアプリ内で呼べば下記フォルダを作成した上にパスの取得も可能です。
[SDカードのroot]/Android/data/[パッケージ名]