ページ

2016年1月31日日曜日

ActiveSupport::Cacheを使う1 - 基本的な使い方 -



ActiveSupport::Cacheとは
railsを構成するライブラリの中でAutoloadなどなど、便利機能を提供している
ActiveSupportの中にあるキャッシュ便利ライブラリ

主なキャッシュの種類


  1. ファイルキャッシュ 
    指定したパス配下にキー単位でキャシュファイルが作成される
  2. メモリキャッシュ 
    メモリ上にキャシュされる。アプリ起動時のみ有効
  3. Memchched 
    Memcachedのキャッシュを扱う

基本的な使い方


↓単純にキャッシュして、読むサンプルになります。
# encoding: utf-8
require 'active_support'

cache = ActiveSupport::Cache::MemoryStore.new
cache.fetch("foo") do
  "bar"
end
puts cache.read("foo") # => barが返却される
cache.write("hoge", "fuga")
puts cache.fetch("hoge") # => fugaが返却される
上の例ではメモリキャッシュを使用していますが、 基本的には他のキャッシュも同じです。
  • fetch
    指定されたキーの値が存在しない場合 do 〜を実行し barをキーfooにキャッシュします
    戻りとしてキャッシュされた値が存在すれば値を返します
  • read
    指定されたキーの値を取り出します
    ※値が存在しない場合nilが返却されます
  • write
    指定されたキーに第二引数の値をキャッシュします

キャッシュの削除


削除はclearcleanupがあります。
  • clear
キャッシュの全てを削除します。
  • cleanup
キャッシュ作成時に有効期限を設定した場合
有効期限が切れたキャッシュ値を削除します
サンプル
cache = ActiveSupport::Cache::MemoryStore.new
cache.write("hoge", "fuga")
cache.clear
puts cache.read("hoge") # => nil

cache.write("yama", "kawa")
cache.cleanup
puts cache.read("yama") # => 有効期限を設定してないためkawaが返る
有効期限を設定した場合
cache.write("aaa", "bbb", {:expires_in => 1})
puts cache.read("aaa")
sleep(2)
cache.cleanup
puts cache.read("aaa") # => nilを返す
※ expires_inにキャッシュ作成日時からの経過秒数を指定

2016年1月28日木曜日

道の駅を巡ってみる 9 - 熊本 -


今回は「道の駅旭志(きょくし)」と「道の駅泗水(しすい)」です。


1. 道の駅「旭志」




国道325号線沿いにある道の駅で、新鮮野菜や旭志牛の特産品が置いてあります。
物産館の中はこんな感じです。



近くの広場には行った時は時期ではなかったので見れませんでしたが、
10月頃にはコスモスが咲きみだれるとのこと。

公式ページ




2. 道の駅「泗水」




道の駅の奥に建っているものが気になったので、行ってみました。



なぜ孔子?と思いましたが、どうやら孔子誕生の地「泗水県」と
同じ町名という事でシンボル的なものになっているらしいです。



奥に進んで行くと、本格的な中国の伝統建築でびっくりします。



ちゃんと孔子様の像があります。
孔子公園に時間かけすぎたせいで肝心の道の駅がじっくり見れませんでした(笑)

公式ページ




2016年1月24日日曜日

Android Tips3 - Android Design Support Library -


前回やったAndroid Design Support Library(ADSL)の
  • Floating Action Button
  • Snackbar
  • Tabs
をやってみます。

   Floating Action Button


画面上丸いボタンを表示させます。
マテリアルデザイン的には画面で重要なアクションをこのボタンに紐付けるようになっています。
  • シンプルなlayout.xml
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:src="@android:drawable/ic_media_play"/>
  • 表示結果


小さめなサイズを表示させる場合は
<LinearLayout
 xmlns:app="http://schemas.android.com/apk/res-auto"
 ・・・

 <android.support.design.widget.FloatingActionButton
     android:id="@+id/fab"
     app:fabSize="mini"
     ・・・

   Snackbar


下からニュッと出てくるやつです。
シンプルに先ほどのFloating Action Buttonを押したら出てくるようにします。
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(findViewById(android.R.id.content),
                "Snackbar Sample", Snackbar.LENGTH_LONG).show();
    }
});
実際に動かしてみると。
optimaize
Snackbarは下から出てきてますが、Floating Action Buttonが隠れています。
そこで便利なCoordinatorLayoutを使うと子Viewの位置やサイズを調整してくれます。
レイアウトを↓のように変更します。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        app:fabSize="mini"
        android:src="@android:drawable/ic_media_play"/>

</android.support.design.widget.CoordinatorLayout>
ボタン押下時の実装
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // android.R.content -> R.id.coordinator_layoutに変更
        Snackbar.make(findViewById(R.id.coordinator_layout),
                "Snackbar Sample", Snackbar.LENGTH_LONG).show();
    }
});
実際に動かしてみるとボタンの位置を調節してくれているのが分かります。
optimaize
またSnackbarの背景色やテキストの文字色も変更できます。
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar bar = Snackbar.make(findViewById(R.id.coordinator_layout),
                "Snackbar Sample", Snackbar.LENGTH_LONG);
        bar.setActionTextColor(Color.RED);
        bar.getView().setBackgroundColor(Color.GREEN);
        bar.show();
    }
});
表示結果


2016年1月21日木曜日

Android Tips2 - Android Design Support Library -


今回はAndroid Design Support Library(ADSL)を触ってみました
Android Design Support Library(ADSL)とは?
Googleが採用しているマテリアルデザインを便利に使えるようにしたもの
Android2.1以上から使える
主要なものとして
  • Navigation View
  • Floating labels for editing text
  • Floating Action Button
  • Snackbar
  • Tabs
などなど、今回はNavigation ViewFloating labels for editing textをやってみます

Navigation View


画面の端からスワイプさせたらメニューが表示されるアレ
Android Support LibraryにNavigationDrawerとして組み込まれてますが、
NavigationViewはさらに簡単に便利に使えるようにしたもの
LayoutファイルとしてはDrawerLayoutの子View要素として組み込む
※↓公式ページより抜粋
<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <!-- your content layout -->

    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
NavigationViewの中でapp:headerLayoutにはヘッダー部分に表示したいレイアウトを指定
app:menuにはリストメニューに表示したいメニューリソースを指定する
  • layout/drawer_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="178dp"
    android:background="@color/colorPrimaryDark">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="NavigationView Sample"
        android:id="@+id/textView_header"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginStart="26dp" />
</RelativeLayout>
  • menu/drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_item_1"
            android:icon="@android:drawable/ic_media_play"
            android:title="PLAY"/>
        <item
            android:id="@+id/drawer_item_2"
            android:icon="@android:drawable/ic_media_pause"
            android:title="PAUSE"/>
        <item
            android:id="@+id/drawer_item_3"
            android:icon="@android:drawable/ic_media_next"
            android:title="NEXT"/>
        <item
            android:id="@+id/drawer_item_4"
            android:icon="@android:drawable/ic_media_previous"
            android:title="PREVIOUS"/>
    </group>
</menu>
  • 動かした様子
optimaize

   Floating labels for editing text


EditTextにandroid.support.design.widget.TextInputLayoutをラップするだけですが、
効果としてはEditTextに設定していたhintがふわっと上部に浮き上がります。
百聞は一見に如かずなので、以下動作させている様子です。
  • リソース
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/first_text_input_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/first_edit_text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="hello_world1"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/first_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hello_world2"/>

</LinearLayout>
  • 動かした様子
optimaize

下のEditTextは通常のものを配置しています。
レイアウトファイルのみで使えて、便利です。