クライアントのブラウザにCookieを保存・削除する手順の練習をしてみました。 Cookieはサーバからクライアントへレスポンスを送信する際にヘッダに含まれる情報で、Cookie受信以降のクライアントのリクエストにはCookieの情報が含まれます。これによって、クライアントの識別や状態を管理することが出来ます。 Cookieをクライアントに送信する際は有効期限を設定し、削除する際はその有効期限を過去のものとして期限オーバーを装い、ブラウザに削除させます。 具体的に以下の例では、setcookie(＜cookie名＞[, ＜値＞[, ＜有効期限＞[, ＜送信パス＞[, ＜送信ドメイン＞[, ＜httpsのときのみの送信?＞]]]]])でCookieを設定、削除します。cookie名には変数の他に配列も使用することが出来ます。

ソースコード​

Cookieを用いたクライアントへの情報の保存とアクセスのカウント例です。クライアントブラウザ側からのリクエストに含まれるCookieへのアクセスには配列$_COOKIEを用います。

  クッキーの利用と削除 \n"; //echo $_COOKIE['login_info']['user_name'];などでアクセスしてもよい foreach ($_COOKIE['login_info'] as $key => $value) { echo $key . " → " . $value . "  
\n"; } } else { echo "ユーザ情報のクッキーが保存されていません（初回読み込み時) or 削除されました）。  
\n"; } echo $count . "回目のアクセスです。  
\n"; ?> 

実行結果​

1回目のアクセス​

ユーザ情報のクッキーが保存されていません（初回読み込み時) or 削除されました）。
1回目のアクセスです。

2回目以降のアクセス(偶数回)​

ユーザ情報のクッキーがセットされています。
user_id → 59816
user_name → yukun
2回目のアクセスです。

3回目以降のアクセス(奇数回)​

ユーザ情報のクッキーが保存されていません（初回読み込み時) or 削除されました）。
3回目のアクセスです。

このときのCookieの保持状況をブラウザで確認してみると、 確かに保存されていますね。次のアクセスの際、これを読み込み以下の項目を表示しますが、

user_id → 59816
user_name → yukun

直後に削除されます。 Cookieはクライアントを識別するのに便利な機能ですが、これは改ざんされる恐れもありセキュリティに注意して扱わなければなりません。なので、上の例のような分かりやすい配列名で重要なデータ（例えばパスワードなども）を扱うのも好ましくないようです。

クッキーを扱う際の注意点​

• ブラウザの設定によってはCookieをうけつけない。
• 1つのCookieのサイズは最大4KBまで
• 1つのドメインでは最大20個まで
• Cookieの有効期限の判定はクライアントの時計に従う

ローカルのホスト名とIPアドレスの取得方法です。 InetAddress.getLocalHost()メソッドでInetAddressクラスの唯一のインスタンスを取得し、getHostName()でホスト名を、getHostAddress()メソッドでIPアドレスをそれぞれ取得します。 これらの情報はコンピュータ一台に対して通常一つしかないので（LANカードが二枚以上さされている場合を除いて）InetAddressクラスはSingletonパターンを採っているようです。あー、アドレスを二つ以上持っている場合の手順忘れてしまいました。後でさらっておこう。

ソースコード​

import java.net.InetAddress;
import java.net.UnknownHostException;
public class ShowInetAddress {
  public static void main(String[] args) {
    // ローカルホスト名とIPアドレスを取得
    try {
      InetAddress addr = InetAddress.getLocalHost();
      InetAddress addr2 = InetAddress.getLocalHost();
      if (addr.equals(addr2)) System.out.println("addrとaddr2は同じインスタンス");
      System.out.println("Local Host Name: " + addr.getHostName());
      System.out.println("IP Address     : " + addr.getHostAddress());
    } catch (UnknownHostException e) {
      e.printStackTrace();
    }
  }
}

実行結果の一例​

addrとaddr2は同じインスタンス
Local Host Name: Yukun-PC
IP Address     : 192.168.1.10

試しに下図のような簡素な10進2進変換アプリを作ってみました。 以下は書いてみたコード。

ソースコード​

res/values/strings.xml​

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Integer to Binary Calculator</string>
    <string name="label_description">10進数を2進数に変換表示</string>
    <string name="label_integer">10進数：</string>
    <string name="label_binary">2進数：</string>
    <string name="button_convert">変換</string>
</resources>

res/layout/main.xml​

<?xml version="1.0" encoding="utf-8"?>
<linearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<textView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/label_description"
    />
<linearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
<textView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/label_integer"
    />
<editText android:id="@+id/text_integer"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:numeric="integer"
    android:maxLength="9"
    android:text=""
    />
</linearLayout>
<button android:id="@+id/button_convert"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/button_convert"
	/>
<textView android:id="@+id/label_result"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text=""
    />
</linearLayout>

ITBCalculatorActivity.java​

package info.yukun.android.itbcalc;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class ITBCalculatorActivity extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) { // アクティビティが生成される際に必ず呼び出される
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); // UIのレイアウトを設定
    // 指定したリソース(R.java)インデックスからビュー(res/layout/main.xml)内のidのコンポーネント(ここではButton)インスタンスを取得
    Button button = (Button) findViewById(R.id.button_convert);
    button.setOnClickListener(convertToBinary); // ボタンが押された際のイベントを登録
  }
  // 登録するイベントリスナーはView.OnClickListenerを実装
  private View.OnClickListener convertToBinary = new View.OnClickListener() {
    public void onClick(View view) { // ボタンが押されたときに呼び出されるメソッド
      EditText textInteger = (EditText) findViewById(R.id.text_integer); // 入力値が入っているコンポーネントを取得
      String input = textInteger.getText().toString();
      if (input.equals("")) return;
      int intValue = Integer.parseInt(input);
      String binValue = Integer.toBinaryString(intValue); // 10進数整数を2進数文字列に変換
      TextView labelResult = (TextView) findViewById(R.id.label_result); // 結果を表示するTextViewを取得
      labelResult.setText("2進数：" + binValue);
    }
  };
}

Androidアプリを書いてみて​

EditText android:id="@+id/text_integer"の属性android:maxLengthを"9"としたのは、変換メソッドInteger.toBinaryString(int value)の引数が32bit整数の為です。本当は属性値を10としてonClickメソッド内で32bitの範囲内(-2 147 483 647 ～ 2 147 483 647 = (2^31) - 1)か否かを判定したほうが良いと思うのですが、今回は端折りました。 ビジュアルエディタやXMLでUIのレイアウトを作っていくというのはFlexのmxmlに似てて取っ掛かり易い感じです。

以前、Boostライブラリを用いたスレッドの同期と排他制御を取り上げましたが、今記事はそれのpthreadバージョンです（似せただけです）。pthreadライブラリ自体はC言語から扱えますが、今回はstaticなメンバ関数を別スレッドで動かす練習も兼ねてC++で書いてみました。

今記事で4回目ですねー。デモは以下のページに用意しました。

今回の主な追加機能は、前回の改善点にも含まれていた (1)長方形と楕円描画ツールへの「塗りつぶし」機能 (2)各描画図形間のレイヤー（重なり具合）移動機能 です。あと少しインスタンスの生成を押さえた処理に変更したので若干パフォーマンスが上がっているかと思います（約1割弱）。 まず、(2)のオブジェクト間の階層（レイヤー）移動機能ですが、これは描画した図形上で右クリックを押すことで呼び出せるコンテキストメニューから使えます（下図）。 この機能で図形の重なり順序を調節することが出来ます。また、「配置」ツールで図形を選択するとその図形は自動的に最前面レイヤーに移動されます。これによって、マウスイベントの発生源を図形毎に持たせても、重なり具合によるイベントの取りこぼしか無くなる利点があります。結果、OOPにある程度沿ったプログラミングを行うことを可能にします。 ちなみにこのレイヤー移動アクションは履歴には記録せずundo、redoの対象にはしませんでした（このレベルのアプリに対しては必要ないかと思ったので）。もし貼り絵のように絵を描きたく、またundoを利用していきたい場合はPhotoshopやGIMP等の明確なレイヤー機構を実装したほうがすっきりすると思います。内部機能の実装の手間はさほど掛かりませんが、ツールボックスのようなUIを作らなくてはいけないのが今の私にとってメンドイところです。しかしFlexコンポーネントを学ぶ良い機会でもあるのでさわりだけでもやってみようかな。 こう機能が増えてくるとユーザインターフェース(UI)にもしっかり取り組まなければならないんですが、UIはリリースするプラットフォーム（PCデスクトップ上、PCブラウザ上、モバイル、スマートフォン）に依存する部分が大きいのでまだ取り掛かるのはいいかなと思ったり（ぉぃ）。 さて、今回で基本的なブラシツール（ベクター以外）は揃ったかと思いますので、そろそろテキスト系の機能を実装していきたいと思います。初回に「頭の中のアイディアを楽しくまとめられるツールを作ってみたい」とのたまっていたので、ちょっとチャレンジしてみます。合わせてベクターツールも追加してみます。

作り込んでいく内に、Flashのレイアウトとファイルサイズが大きくなったので、下記のページに用意しました。

今回追加した機能は大きく分けてタイトルに書かれている2つです。 描画できる図形の種類を直線、長方形、楕円に増やしました。また、描いた図形を任意の場所に移動することが出来ます（「配置」ボタンをクリック後、図形をドラッグ＆ドロップ）。そして、配置移動も履歴に残しているのでUndo、Redoの対象になります。 以下は作成後の反省点の一部の走り書き。

問題点や改善点​

• 図形の描画やオブジェクトのD&Dの際に、線分上に薄い青のエフェクトをかけると爽快感＋視認性が上がるかなぁと試してみたんですが、実装したら煩わしい感じになってしまいました。エフェクトのON/OFFのチェックボックスをつけておこう。
• 図形オブジェクトがD&Dでキャンバスのサイズ外に出てしまう。Flexコンポーネントの親子関係や背景色の設定し忘れ等からくる問題だと推測。
• 描画ツールのボタンは押し込み式にして、選択しているツールを分かりやすくしよう。レイアウトいじるのは後回しになりがちだなぁ。
• 長方形と楕円ツールは塗りつぶし設定の追加やShift+ドラッグ描画で正方形と円を作成できるようにしておこうかな。
• 複数の図形が重なった際のドロップ処理の再考。

undo、redoのボタンをFlexコンポーネントのButtonクラスを用いて作成してみました。

先日、

こんなPluginどうですか？といったアドバイスも大歓迎です。 引用先

を拝見しましたので、それを受けて「Popular Posts(Author: Rob Marsh, SJ)」を推薦したいと思いますが、いかがでしょうか。 Popular Postsはその名の通り「人気の記事」を表示するプラグインです。サイドバーのウィジェットも付いており、手軽に設置できます。 案外、投稿者にとっては意外な記事がランクインすることもあり面白いですよ。 追記： 記事にするのでなく普通にコメントすればよかったf--;前の記事のノリでついポストしてしまった／(-.-)＼

投稿した記事に関連する記事を自動で選択し、サイドバーを含む任意の位置に表示できる WordPress のプラグインであるSimilar Posts(Author: Rob Marsh, SJ) の設定の一例を紹介します。

お絵かきと銘打っていますが絵がかけるのはあくまで一機能で、最終的には頭の中のアイディアを楽しくまとめられるツールを作ってみたいと今は考えています。 まぁ最初は単なるペイントツールの機能を実装していきます。 さて、1回目は定番というか基本というかUndo（元に戻す）とRedo（やり直し）機能を実装してみました。 以下のFlash上でドラッグ＆ドロップすると青い線を引けると思います。