Help me！ということで、今回はちょっと前まで、仕事ではまってしまってたGoogleウェブサイトオプティマイザーのマルチバリエイトテストの設定の際のバグ（？）についてメモっておきます。

結論からいくとちゃんとした原因はよくわかってないので、もし分かる人がいれば教えてください。

どのような目に合ったかといいますとですね、マルチバリエイトテストのテストページに埋め込む、

“　<script>utmx_section(”セクション名をここに挿入します”)</script>　”

のタグのセクション名に日本語をいれると（下記例では“テスト”）

上記のように、ページセクションが『2つある』と検出されてしまいました。

以前まではそんなことはなかったのですが、何度か試しても、他のサイトで試しても同様の表示がされてしまってました。

これはこまったものです。

ページセクション名を英語にすると、（下記例では“test”）

同ページセクション名が2事例となってしまいます。

なんとか打開策はないものかと調べておりましたら、どうもテストしているサイトの文字コードがShift-JISで作られていたのがよくなかったようで、UTF-8に書き直したら上記エラーはなくなりました。

考えられる要因としては、そもそもGoogleはUTF-8でWEBサイトを制作することを押しているようなので、それ以外の文字コードで制作しているサイトは適切な動作を保障していないってところですかね。
まぁ無料ツールですし。
（ちなみにEUC-JPでも試しましたが、結果は同じ）

なので、おそらくページセクションを検出する際に、Googleウェブサイトプティマイザーのコントロールスクリプト内のUTF-8の文字コードで一度、（その際に“eXg”を検出）WEBサイト内のShift-JISの文字コードでもう一度、（その際に“テスト”を検出）ということになっているんじゃないかと思います。
（文字コードがUTF-8で作られたページの場合は上記の処理が一本化されてるのかも。）
わかりにくい説明＆推測ですません。。

でも2週間以上立っても返事がかえってきませんｗｗｗ

仕方がないので、ゴリ押しでページセクション名が英語のほうでテスト環境で実際に動作させ、テストを走らせていましたところ、特に問題なくCVも取れているようなので、単なるバグなのかなぁということで今のところはそれで進めています。

おそらくはそれで問題ないかと思いますので、同じ目に合った人はひとまずこれで逃げてみてください。

また、数日間をあけてサイドテストをしたところ今回のバグがなくなっているというケースもありましたので、報告までに。

調べていても同様の現象のブログや報告はないようなので、もし同じような目にあっている方がいらっしゃったら教えてください。
そして解決策を教えてくださいまし！

さて、私的に旬なネタがいくつかあった中で今を逃すと意味がなさそうなこのネタで参ります。

「まったりプレビュー　SoftBank Desire X06HT」

3月28日に孫さんが発表し4月27日に強硬発売されたアンドロイド2.1携帯です。
みなさん、興味はなんとなくあるけどまぁ、いいかぁーってなりがちなスマフォですｗ

前段階でのウリは下記のような感じです。

・3.7インチ有機ELディスプレイ
・HTC Senseと呼ばれるHOME画面のインターフェイス
・マルチタッチ
・Google 音声検索
・マルチタスク
・Flashlite搭載
・MMS非対応(これはデメリットですが)

ということで上記を抑えつつプレビューと参ります。

■Desireを使う前に。

使う前にやらなければならないことがいくつかあります。

・Gmail.comへのアドレス変更通知。
MMSが利用できないための措置です。
SB同志だった場合はSBのロングメールアドレスのレス依頼とドメイン許可設定の依頼も併せて行う必要あり。
ちなみに旧アドレスは存続されるのでSIMを差替えれば旧携帯で受信できます。
また冬くらいにはMMS対応予定だそうです。

・3G携帯からアドレス帳をエクスポート。
microSDにて該当ファイルをPCへ。その後、GmailにインポートすればOKです。

・付属のmicroSDが2Gなので交換したい場合は先に行うが吉。
microSDにアプリを退避させたり音楽や画像を置いておくので2Gでは心もとないかも。

・PCにHTCサイトよりHTCSyncをダウンロード・設定しておく。
HTCSncyとはPCとDesireを同期するツールです。

■Desireを使えるように。

まずオンラインショップから配送されてきた本機の梱包を解いた一枚。

次にバッテリカバーを外した一枚。

バッテリはパージされているので最低一度はカバーを外す必要があります。
背面上部に凹部があるのでさっくりあけて、SIMとmicroSDを差しましょう。
microSDは押し込むと外れますので無理に抜かないように。
その後、バッテリを装着して同梱されていたケーブルを差してまずは充電。

バッテリについては諸説ありますが”慣らし”をすると持ちがいいとのことです。
慣らしとはフル充電、フル放電を3回ほど行うことだそうです。
要するに最初2・3日は寝る前に音楽をエンドレスで再生させて寝ればいいのです。

通電しますと本体設定を適当に行って起動。
たしかネットワークの設定等々あった気がしますがあとから変更できる項目です。

このままだとメール設定が行われていないのでGmailの設定を行います。
全てのプログラムからGmailを選択して同期を行います。たしか同じくGmailの連絡帳の同期を行えたハズです。

以上で初期設定終了です。

■Desireを弄ぶ。

アンドロイドマーケットよりアプリをDLして便利していきます。

オススメアプリ

・TaskControl…（マルチタスク対策）
・MemoryForLemmings…（マルチタスク対策）
・QRコードスキャナー…（そのまま）
・乗換案内…（そのまま）

・shimeji（あいぽんのフリックに慣れた人はこれを）

・EverNote（月40Mまで無料なPCとの同期ツール）
・Foursquear（現在位置をTweeterに…あいぽんユーザーが使ってるのを見て密かに羨ましかった）
・UstreamBroadcast（Ustクライアント…アンドロイド2.1では動きませんでした。動作報告はあるようなのですが…）
・S2TweetNP…（今聞いている曲をTweeterに…これも動きませんでした。アプデに期待）

・GoogleEarth（おもちゃですが素晴らしい）
・Andjong（マージャン）
・Solitaire（ソリティア）
・Fishin’2Go（釣りゲー）

プログラムとして使うのはもちろん、ウジェットとして使えるツールもあります
。

Desire標準のカメラで夜景を撮影。

オートフォーカス・ズーム・露出の補正など携帯カメラにしてはよいかと思います。
ただ、手ぶれだけは…デジカメじゃないので仕方ない。

Desire標準のイヤマイク。

音はクセがない普通なカンジ。音楽聴いてる状態で着信が入るとちゃんとわかる仕様になっていました。
地味だけどピンがありがたい。

■Desireを評価する。

・3.7インチ有機ELディスプレイ
綺麗。ただし液晶に比べて日光に弱い。

・HTC Senseと呼ばれるHOME画面のインターフェイス
7シーン用意されててカスタマイズ可能。デフォルトでも中々に使いやすい。
【天気・Tweeter・メール・HOME・お気に入り・RSS・フリーエリア】（私はフリーエリアにウジェットを置いてます）

・マルチタッチ
あいぽんに引けを取らない感度です。
使用感はヌルヌル。拡大縮小はあいぽんと同じ。

・Google 音声検索
まったく期待してなかったですが、これは素晴らしい。
かなりの精度で音声を拾いブラウザの検索結果を開いてくれます。

・マルチタスク
正直、あまり実感はないですね。
逆に油断するとバックグランドでアプリが起動しっぱになるのでタスク管理アプは必須かな。
でも、いろんなアプリが立ち上がってるという事実はマルチタスク様々といったとこです。

・Flashlite搭載
標準ブラウザでパッチリ見れました。
が、重いのとかは辛いです。10.4へのアプデに期待します。

・MMS非対応(これはデメリットですが)
はっきり言ってこいつが最大のネックですね。

===================================================

・バッテリ…普通に使ってれば2日程度は持ちそう。microUSBあればPCで充電できます。
・発熱　　…ほんのり温かい。熱いまではいかないので低温やけどはしないかと。
・Gmail　 …きちんと設定すればプッシュ式で普通のメールとかわりはない。
・音声　　…マナーモードや個別の設定はきちんと切り分けができている。ただ、外国製の使い勝手に慣れるまでは…
・目ざまし…標準で搭載。まぁ、期待してなかったのでそこそこ使えるかな。
・wifi      …すんません、基本使ってないので評価の仕様がないです。

その他気になる点はアプリが1.6用のものが多くアプデ待ちってのがあります。

あと使用していて不便だったのはGmail。送信されてきたときに名前がでずにアドレスが表示される。
なにかの条件で名前が表示されているのもあるんですが…
これはなんとかしたい。全力をもってアプリなり設定なりを捜索中です。

■統括

エンタメを求めるならあいぽん。
スマフォにしたいだけならエクスペリ。
もの好きはDesire。

といってもどれも帯に短し襷に長しで、
あいぽんは林檎さんの戦略次第で浮沈がきまりますし、
エクスペリアは安定ですがならわざわざスマフォにする必要ある？ってとこで、
Desireは環境とマーケットが未熟なのとSBの見切り発車なのが不安要素でもあります。

ただ、私がDesireを選んだ理由としては開発環境の自由度とFlashが決めてでした。

■最後に

スマフォ初体験の私としてはスマフォってすごいって思いました。
とにかく携帯ではなく携帯型PCですね。PCとの同期を前提に設計されてる点や同期アプリ、アップデートアプリなどすごいです。

みなさんもスマフォ乗り換えるなら決め手を見極めてください。（SBのスマフォは秋以降MMS対応してからでもいいかもね…）
そして乗り換える必要性を感じないなら無理に乗り換えはしないように。
はっきり言って優しくはないですから。（特にDesireは）

そして、キテ荘にこんな記事書いてよかったのかしらと今更思ってますーｗ

もうすぐ連休だってのに、まだまだ寒いですね。
新入社員の方は会社に少しは慣れてきたでしょうか？

新入社員が入ってきて、そろそろ本格的に業務に入る頃なので、
こんな記事にしました。
「Webデザイナーのための」としたのは、営業なんかがオトナ語をよく使うので、
エイヤッと言葉に誤魔化されずにね、ということで。（無理やり？）

自分も昔は会議で飛び交う「オトナ語」に「？？？」状態でした。
それで糸井重里さんの「オトナ語の謎」を買い、おもしろおかしく勉強しました。

日常会話や会議でよく出てきそうなもの、今回はカタカナ語を中心にピックアップして紹介しますね。

一般的によく出てくるカタカナ語

コンセンサス

意見の一致。「客とコンセンサスとれてんのか？」と上司に言われて「？」となる前に覚えておきたい。

プライオリティ

優先順位のこと。いちいち使いたがる代表格の言葉。

ペンディング

凍結すること。「先方都合でペンディングになってしまいました。」と、なんとなくネガティブな印象を与えずに報告できる便利な言葉。

マター

「この案件、山田マターだから彼に聞いてくれる？」みたいな使い方をする。名前とセットで「誰仕切り」という意味。

バーター

交換条件のこと。お金の発生しない持ちつ持たれつ感なんかを「そこはバーターでいきましょ」なんて言う。初めて聞いたときに完全に意味不明だった言葉の一つ。

ネゴる

ネゴシエーション（交渉）するの略、「上とはすでにネゴっといたから」といった感じ。

アジェンダ

会議の議題。「明日の会議のアジェンダ作っといて」と言われて新人は「アジェンダ」をググるところからスタートしなければならない。

グロス

化粧品でなければ日本ハムにいた外国人選手でもない。「まとめて」って感じで見積もり出すときとかに都合の良い言葉。

アテンド

同行・立会いをわざわざカタカナ語にして仕事してる風に見せる言葉。「撮影アテンドいってきま〜す！」でもそこにいるだけでしょ？

ブレスト

ブレインストーミングの略。アイデア会議などで使う会議の手法のひとつ、でもその手法をきちんと理解せずに開催されているのがほとんどかも。

フィックス

決定すること。うまくフィックスできないと、「なんで今頃こーなるの、これはフィックスしてたんちゃうんか！」と怒られる。

ペイ

支払い、ではなく投資額を取り戻せるかどうか。「これ、いつになったらペイできるねん」とボヤキが聞こえる。

アサイン

当てはめること。「このタスク、鈴木くんにアサインしておきました」といちいち言ってみる。

オトナはアルファベットでよく略す

MTG（ミーティング）

「MT」とする場合もあるが、「Movable Type」と勘違いするので、Web業界では「MTG」が標準だろうか。

NR（ノーリターン）

忙しい大人はホワイトボードに「直帰」と書かず、「NR」と書きます。

FYI（フォーユアインフォメーション）

よくメールの件名などに書かれてます、「ご参考までに」を略すとこうなるのよ。

ASAP（アズスーンアズポッシブル）

可能な限り早く、「なるはやで」とも言う。

と、こんな感じ。

改めてまとめてても「なんだかな〜」と思いますよね、大人って面倒くさい。
こういう言葉をググる時間が勿体無いやんw

よければ「オトナ語の謎」読んでみて下さい。

ちょっと前にTwitterで話題になった内容なので
しってる人も多いかもしれませんが、書きます。

先日、AdobeよりCreative Suite 5の5月28日発売が発表されました。
中でも今回のバージョンアップでは
Photoshopの自動画像修正機能が恐ろしいレベルで強力になっており、しばしば動画で驚きの声とともに紹介されています。

で今、ちょうど今、

PhotoshopとIllustratorとFlashとDreamweaverとFireworksが格安で手に入れる方法があります。

もちろん全てCS5で。イチから揃える場合でも最安値で75,810円です。
なんと差額は16万円マイナス！

そもそも、今だけなぜ安く購入出来るのかといいますと
CS5では「Web Standard（Flash+Dreamweaver+Fireworks）」が廃止となり
「Web Premium（Photoshop+Illustrator+Flash+Dreamweaver+Fireworks）」に統一されるため、
今、Web Standard CS4を購入するとCS5発売以降は無償でWeb PremiumCS5（通常購入で236,250円）に
アップグレードできるためです。

そこでいくつかの安く購入する方法があります。※値段はMac版でみています。

1. 普通にWeb Standard CS4を購入する→Web Premium CS5に無償アップグレードする

   …amazonで￥151,908 で購入出来ます。差額は8万円です。

2. Dreamweaver CS4を購入→有料でWeb Standard CS4にアップグレード→Web Premium CS5に無償アップグレードする（※MACお宝鑑定団Blogで紹介されている方法です）

   …amazonでDreamweaver
   ￥41,580、Web Standard CS4にアップグレード版「C」をヨドバシで￥78,680（ポイント10%）で購入出来ます。差額は11万6000円でヨドバシのポイントが8000円近くつきます。

3. アドビストアでWeb Standard CS4（ダウンロード版）を購入→Web Premium CS5に無償アップグレードする

   …アドビで￥126,000です。今、急速にWeb Standard CS4のパッケージ版が売れているため、なかなか在庫が確保できない場合があります。その際にこの手段は有効です。差額は11万円です。

4. ウェブスクールに入学する→Web Standard CS4を購入する→Web Premium CS5に無償アップグレードする

   …ウェブスクールをオンライン受講することで、アカデミック版を購入することが可能です。たとえばWinオンライントレーニングさんのFlash講座もしくはDreamweaver講座（ともに3ヶ月）なら￥75,810（締め切り5月6日）。デジハリ オンラインスクールのFlashコースLiteなら￥78,000です（締め切り4月28日）。差額は16万円程度で、しかもソフトに対する講座つき！それぞれ締め切りがかなり迫ってますので、申込まれる方はお急ぎくださいな。※アカデミック版は卒業後も使用可能です。

5. （もしWeb Standard系をお持ちなら）→有料でWeb Standard CS4にアップグレード→Web Premium CS5に無償アップグレードする

   …もしWeb Standard CS3をお持ちなら、ぜひCS4にアップグレードすることをお勧めします。amazonで￥44,820で 購入出来ます（現在在庫切れ？無理ならアドビストアでDL版を）。差額は19万円です。またDreamweaverやFlashの単品ソフトをお持ちでもWeb Standard CS4に有料アップグレード可能です。（このへんの【対象製品】みておくれ）

俺はWeb Standard CS3（アカデミック版）を持っていたので思い切ってCS4にアップグレードすることにしました。現在amazonで注文していますが、さすがに在庫なし状況で未だ音沙汰なし…。ん~流石に気づくの遅かったか。
まぁその際はアドビのDL版で購入かな。ちょっとだけ高いけど。

あ、ちなみに上記全ての方法のデメリットは、
CS6以降にアップグレードする必要が出た場合、ソフト単品ごとのアップグレードが出来ず
スイート全体のアップグレードとなるため、一気にかなりお金とられます。
（参考までにCS4→CS5でWeb Premium ￥98,700）

あとCS5への無償アップグレードには手続きが必要です。DL版でも同じ。詳しくはここ参照のこと。

いずれにせよ、今はかなりお得な状況ですので、みなさんもこのチャンスを有効に利用してみてはいかがでしょうか？

『量なしの質はない』ということもあり、とりあえずたくさん更新していこうと思いました、はい。

以前の「第3回キテレツMTG」でえのこさんより「書け。」と言われた内容なので書きます。

あくまでも独断ですので、参考にできるところがあれば、拾っていただけたらと思います。

見出しをしっかり書きましょ

HTML5はAPIなどの拡張の方に結構目がいきがちですが、マークアップの方もより文章構造化がわかるようになっています。（section、articleとか）
以前にも書きましたが、このあたりも今後クローラがより中身を重視してみていくということが考えられるので、見出しありきで文章を考えていきましょう。
（たとえばこんなん）

キーワードは効果的なところに入れていきましょ

ちゃんと狙いたいキーワードがあるなら、見出しにはキーワードさりげなくいれましょ。
ページ内の出現率（現在5％位目安って言われてるようですが）はもうあんまり関係ないんじゃないかなというのがAnalyticsとかを見てて思った個人的な意見です。
出現率よりもそれこそどこにキーワードを置くかが重要っぽい。
（たとえばタイトル・見出し・ディスクリプションあたりは効果的だと思いますので、ぜひ）
そしてできれば1つの見出しに対して1・2個のキーワードを入れましょ。文章的におかしいとか無理やりな感じならやめてくださいｗ
Yahoo検索エンジンのSEO要因なんかを見てるとやっぱり見出しの要素が結構あるみたいです。（Googleもそんなに大きく変わんないと思います。Bingは知りませんｗ）

ボリュームがあるときは分割しましょ

ちょっと前にGoogle先生もページ表示速度が検索結果（SEPR）に影響するっていうのを公表してましたし（早いとプラスではなく遅いとマイナスという基準らしい）、あんまりページが重くならないように気をつけましょ。
じゃテキストは軽いから多くてもいいかというと、そうではないですよ。
これみたいなランディングページでもない限りは、長すぎるページはユーザーに嫌われますし、複合キーワードも分割されるし、ユーザービリティの観点からいってもページが長くなるようなら分割したほうがいいって言われてるので、適宜分割してください。

まとめ

ページタイトル（キーワード1・2個）

見出し（できたらキーワード1・2個）

文章

小見出し（できたらキーワード1・2個）

文章

以下繰り返し。

最後にまとめかオチを入れましょうｂ

長くなるようならページ分け。

みたいな感じを意識して更新していきましょ。

最後に

結局文章をうまくまとめる力が求められることが多いので、
参考になりそうな記事を何個かリンクしておきますので、
読んでみてもいいと思いますｂ

【ケーススタディー】～達人たちの文章術

一石三鳥、ワンランク上のブログの書き方

ま、なんだかんだ偉そうなこといっても自分ができてないんですけどねｗ

何か記事を書かねばと思いはや数日。
ここはやっぱりこれですかね。

ハッタリ企画解体新書。

リニューアルに併せてハッタリなコンテンツを作ろうとなったのが2月末。
3月末までにハッタリコンテンツと称して「キテレツWEB2.015」なる群れを用意しました。

・虚勢を張ってみよう。
・キテレツ忍者ハッタリくん
・おまけのキテレツボット
・さらにおまけのキテレツ時計

その中でも@tonka氏より解体依頼がありました”キテレツ忍者ハッタリくん”を解体してみようかしら。。。

まず、この記事はFlashの基本は抑えているものとしております旨、ご了承ください。
基本から抑えたい場合は下記のサイトをご参照ください。

Flashゲーム講座 & アクションスクリプトサンプル集（いろんな方もリスペクトしている神サイトです）
http://hakuhin.jp/as.html

ざっとしたパート構成案を考察

■タイトル
■名前等入力画面
■ゲーム部分
■結果
■ランキング

【前提】
ほぼすべての動きをAS化させて軽量にする。
シームレス感を持たす。

相撲鳥人間の際も軽量化はしていましたがどうしてもランキングやデータ登録周りでシームレス感がなかったことへの反省です。
ということで今回は登録まわりも含めた全編Flashでいくことにしました。

スクリプトバージョンはFlashプレーヤーバージョン9を鑑みてAS2を利用。
（AS3わからないのは内緒⇒この後、キテレツ時計のためにAS3に踏み込んだのも内緒）

大まかな流れを決めればパーツの作成へ移行

■タイトル
この時点でハイスコアとプレイNOを取得します。
プレイNOはデータ管理のために利用しているのと後述のランキング更新判定にも利用しています。
loadVariables()

■名前入力
名前・目標ちくわの設定画面で特に解説の必要はないかと。
名前の漢字NG設定とちくわ入力は最大999までに設定しているくらいです。
restrict

■ゲーム部分
ちくわを発生させてキャラクターとの当たり判定、ちくわ数等を取得する重要パートです。

①ちくわオブジェクトの動き
http://hakuhin.jp/as/move.html#MOVE_05
放物線を描く自由落下の動きにランダム要素を追加

②ちくわオブジェクトをランダムで鉄アレイ化

③キャラオブジェクトとの当たり判定
http://hakuhin.jp/as/hittest.html#HITTEST_04
当たり判定を取得して、ちくわ数と裏で実行している鉄アレイ指数を計算。
hitTest()
Key.○○○()

④ちくわオブジェクトの複製
http://hakuhin.jp/as/movieclip.html#MOVIECLIP_07
①で作ったちくわを複製します。複製回数の指定も含みます。
複製したちくわに個別のプロパティを持たす必要が発生するところで激しくツマリましたが・・・
attachMovie()関数内にてonEnterFrameで個別処理！他にもやり方はあるでしょうが・・・（eval関数が使えるなら他のやり方もありますが）
attachMovie()

■結果
ハッタリ指数という訳のわからない指数の計算と結果を登録する重要パートです。
ハッタリ指数とは目標ちくわ数に設定された基礎倍率と目標に対する取得ちくわの達成率を掛けたモノです。

①ハッタリ指数の計算式を導入

②ハッタリ指数に対するコメントとコメンテーターを決められた値に準じてランダムに表示。

③phpに取得ちくわ、ハッタリ指数、名前をシームレスに引き渡す。
sendAndLoad()

■ランキング
ゲーム後、すぐにランキングに反映しないといけないのでどのタイミングでデータを取得するのかがキモのパートでした。
結局、ランキングフェイズに行くたびにランクデータを取得するので都度ローディングしています。

①ハイハッタリ順にソートしておいた上位10件のデータをロード

②ハイスコア時のカラー変更のために現在のプレイNOとロードしたデータに記録しているNOのつき合せ処理。合致した場合、カラーが変更される。

■バックグランド
http://hakuhin.jp/as/sound.html#SOUND_00
全セクションでサウンドの外部読み込みとI/Oの切り替え実装。
sound_obj.setVolume();

細かいパート解説とかいるようならflaファイル公開してもいいか、質問あればブロック単位で回答してもいいかとか、
とも考えてますが、みなさんの要望次第でどうするかまた考えます。

ということで、ハッタリくんFlashパート解体新書でした。（phpパートはまったく別ものなので要望あれば解体します。）

感想としては・・・やってる処理に対してできあがりの印象が本当にしょぼいのがステキ。クソゲー作ろうの趣旨にはバッチリだと思います！

以上、長々となりましたが解体新書でした。

P.S　Flashは161KBに抑えました！

やたらと忙しく最終回の5回目をなかなか更新できなかった、かしこです。

【５、条件による検索結果の表示（完成）】

・検索結果の表示。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を表示。前回の検索数で作った変数$banbanを利用してチャラット完成させましょう。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

さて、前述の通り$banbanを利用します。

？・・・$banbanってなにって？

ふむ、$banbanは前回の検索数表示ルーチンの中に、仕組んだ変数ですが、この変数の中には表示されるべき内容のみが値のみが配列として格納されています。

これはですね、data.phpの全データを$listとして読み出して、これを元に条件に該当するものを絞って、結果その件数＝検索数というルーチンを用意しました。

その際に、該当する時点の変数だけを$banbanに格納するということなのです。

わかりにくれば検索数のfor文の手前で「print_r($list)」とすると全件表示されますが、for文後に「print_r($banban)」とすると該当するデータのみの表示となります。

これこそが本日、表示すべきデータそのものということなのです。

ではデータを書き出してみましょう。

for($i= ０;$i<検索数;$i++){

print $banban[i]["id"];

print $banban[i]["price"];

print $banban[i]["comment"];

}

こうすると該当i番目の連想配列のkeyを呼び出しめでたく表示されます。

あとは表示させたい形にphpを書き出すようにしてあげればOKです。

htmlの形成は完成ファイルを参照してください。

ポイントは前回の検索数を表示するルーチンに$banban（変数はなんでもいい）を仕組んでおく。あとはそれを表示するという”よい意味での手抜き”です。

今日のデータはこちらからダウンロードできます。

さてさて、検索シリーズは今回で完成ということで、終了です。

ただし、ページングの解説は飛ばしてますし、実際は並べ替えも必要になるでしょうが・・・今回のシリーズはあくまでも検索ルーチンの構築なのでまた違う機会にでも紹介・解説できればなーっと。

というわけで無駄に記事の更新を続けた検索システムをつくってみようぜ！はいかがでしたでしょうか。

難易度は☆☆★★★・・・こんなもんでしょうか。

初見でわかるアナタはステキです。わかないアナタも完成形のソースからきっかけをつかんでもらえばOKです。

ということでバイババーイ！

韓国の友人に荷物を送ったら韓国の税関で検疫をうけたと連絡を受けたかしこです。

【４、条件による検索結果数の表示】

・検索条件に何件ヒットとしたか。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を精査して何件該当するのか。ここをクリアすれば検索は余裕です。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

では、ルーチンを考えてみます。

Getで受信した変数とdata.phpに連想配列として格納されている商品データをif文で選別する。

？なのことだ・・・とお思いのアナタ。

このシリーズの一回目にやった”print_r($list);”でデータを確認してみてください。

[cat]=>”1″ とかという表記があったはず。それとGetで受信した変数（$cat）を付きあわせて該当するファイルをカウントする。

それを条件の数だけチェックしていけば残った配列数が該当件数、しいては該当ファイルということになります。

あとはそのルーチンをプログラムしてやればOK！

ということで下をご覧ください。
=========================================

<?
include ‘data.php’;

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}
if($_GET["catd"]){
$catd = $_GET["catd"];
}else{
$catd = “” ;
}
if($_GET["new"]){
$new = $_GET["new"];
}else{
$new = “” ;
}
$snum = $cat.”-”.$catd.”-”.$new;
?>

<?

$num = count($list);
$searchnum = 0;
if($list){
for($i= 0;$i<$num;$i++){
if($cat){
$a = $list[$i]["cat"];
}
if($catd){
$b = $list[$i]["cat_detail"];
}
if($new){
$c = $list[$i]["new"];
}
$dnum = $a.”-”.$b.”-”.$c;
if($snum == $dnum){
$searchnum++;
$banban[] = $list[$i];
}
}
}

?>

<?=$searchnum?>
=========================================

前半ブロックでGetで受信した変数を付きあわせしやすくするために”$snum”という変数にまとめています。

さてさて、本日のメイン解説となる後半ブロックです。

まずdata.phpから読み込んだデータをcount関数で何件（何個の配列数が）あるかどうかを調べて$numに格納します。

これはその下のfor文を何回まわすのかという数を調べているわけです。そう、$numの数だけまわします。

$searchnumは検索該当数をカウントするために用意。forでまわる度にカウントが１つずつ増えていきます。これが「○○ヒット」の数になるわけです。

ただし、このままですと$listが全部表示されてしまいますのでfor文の中で精査していきます。

$a=$list[$i]["cat"]・・・＄listの中のforのi番目の連想配列キーcat　を変数$aに格納

$b = $list[$i]["cat_detail"]・・・＄listの中のforのi番目の連想配列キーcat_detail　を変数$bに格納

$ｃ = $list[$i]["new"]・・・＄listの中のforのi番目の連想配列キーnew　を変数$cに格納

これを変数$dnumにまとめて格納・・・そう、これが所謂、精査の条件になります。

あとはGetした$snumとforの中の$dnumのイコールのときだけ$searchnumにプラス１してやります。

これで検索数がはじき出されます。

ここからは補足ですが・・・

$banban[] = $list[$i];は次回、実際のデータを吐き出す際に使用する項目です。これは該当したi番目の配列を$banbanに配列として格納してゆけよ！という命令です。

ここは次回に使うのでまた改めて解説しますが、要はヒットした配列だけを$banbanに入れるということなのです。

ということで本日はここまでです。（どんどん複雑になっていくなぁ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は最終回です。実際にデータを吐き出すルーチンをやりますが、ポイントは$banbanですｗ

【予定】

・５、条件による検索結果の表示（完成）

さてさて、そろそろ脱力し始めそうな気配がプンプンしているかしこです。

【３、Getによるform内のphp化】

・Getで受信するルーチン

・Getで受信した内容をフォームに反映させる

この2つで参ります。が、えー、恐らくこのシリーズのキーポイント１です。

そのため、ボリュームもヤバイかも。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

まずはGet、Postや書き方などをこちらで予習することをオススメします。

■Getで受信するルーチン

フォームのメゾットをGetとして送信するとURLが「index.php?cat=1」のような形になります。

これを受信するには「$_GET["cat"];」と書いてあげれば受信できます。

ではでは、今回のシステムもcatを受信するので次のようにします。

=========================================

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}

=========================================

なにをしているのかといえば『$_GET["cat"]』があれば変数$catに代入。

なければNull（空に）という処理をしています。

今回のシステムではcat、catd、price、new、typeの5つを受信しますが、type以外は上のルーチンで対応可能です。

typeについてはﾁｪｯｸボックスを利用しているので扱いが少し異なります。

=========================================

if($_GET["type"]){
$type = $_GET['type'];
}else{
$type = array(1,2,3,4,5,6);
}

=========================================

$_GETがあれば変数$typeへ、なければ$typeに配列として1,2,3,4,5,6を代入しています。

何故、ここだけ処理が違うのか・・・といいますと、

受信した際のURLが「index.php?type[]=1&type[]=2&type[]=3」というように受信して変数typeに配列として格納しています。

で、チェックボックスが全て空で検索するという矛盾対策のために空で受信した場合は全てにチェックを入れて受信するという処理を行っています。

ま、このあたりの処理はあまり深く追求しなくてもよいと思います。配列の受信はこんなものだ！的でよいでしょう。

■Getで受信した内容をフォームに反映させる

なんのことかといいますと、form内のselectbox等で検索をしますわね。

結果が呼びだされた時にこの処理をしないとイチイチselectbox達が初期状態に戻ります。

そうなると自分が何を検索したのかがわからなくなるという事態が発生します。またその状態で再度検索をすると先の条件がどこかにいってしまいます。これはユーザービリティ云々の前に検索システムとしては致命的な欠陥といってもいいでしょう。

ここからはそうならない処理を行ってみたいと思います。

では、具体的にどうするのか？

要はselectの中身に”checked”をつけてやれればよいのです。

下は新着か否かという項目をいじってみた例です。

=========================================
<select name=”new” style=”width:160px;”>
<option value=”0″
<?
if($new == 0){
print “selected”;
}
?>
>こだわらない</option>
<option value=”1″
<?
if($new == 1){
print “selected”;
}
?>
>新着で探す</option>
</select>
=========================================
この例でいくとGetで$newを取得していれば０か１の値が入っているのでselectの間にphpをねじ込んでいます。で、 もし０（null）なら「こだわらない」に”checked”が、１なら「新着で探す」に”checked”が入るので、めでたく選択項目がキープされるわけです。

他の項目もこれと同じルーチンでOKですがやはりチェックボックスの項目だけは別になります。
=========================================

<input type=”checkbox” id=”type1″ name=”type[]” value=”1″
<?
if($type[0]==1){
print “checked”;
}
?>
/>

<input type=”checkbox” id=”type2″ name=”type[]” value=”2″
<?
if($type[0]==2||$type[1]==2){
print “checked”;
}
?>
/>

<input type=”checkbox” id=”type3″ name=”type[]” value=”3″
<?
if($type[0]==3||$type[1]==3||$type[2]==3){
print “checked”;
}
?>
/>

=========================================
これも理屈は同じで”checked”をつけるかつけないかっていう処理なのですがif文の条件が少し複雑で$typeの配列の何番目に格納されているかが送信時のチェックボックスのチェック数によってことなるので想定される配列の順番だけ条件を用意しておるわけです。

このあたりは少し複雑で、基礎的な知識がないと苦しいです。勉強会があるようなので、解説してもいいかと思っています。

詳しくは今日の完成データを参照してくだることを期待しています。

ということで本日はここまでです。（だいぶ長くなりましたよ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は実際の検索ルーチンが絡んでくる検索結果数の表示にチャンレンジしましょう。

【予定】

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）

superflyの「恋する瞳は美しい」をやたらリピートしているかしこです。

さてさて、テンションが続く内に連投しときます。
【２、初期解説とデータ読み込み】

・ｈｔｍｌの補助的解説

・htmlのｐｈｐ化

・データの読み込みと確認方法

この2つで参ります。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

・ｈｔｍｌの補助的解説

カテゴリーとカテゴリー詳細の連動はJavaScriptでおこなっております。

元ネタはこちら。

ポイントはｈｔｍｌの94行目、「 new Option(newOptions[i],newValues[i],false,false); 」

ここに第3引数をflaseです。

これはphp化した際にtrueを設定するためにあえて宣言しています。詳細はその時に解説します。

あとは皆さんチャラっと流せますよｗ

・htmlのｐｈｐ化

大層な事をいっていますが新規でphpファイルを作成して便宜上index.phpとします。

さて、sakuraサーバーのPHPのデフォルトcharsetはEUC-JPということなので、エンコードEUC-JPとしてペーストしてください。

以上

・データの読み込みと確認方法

今回の本題、スターターキットに同梱されているdata.phpを読み込んで検索するアイテムを読み込めるようにします。

data.phpにはあらかじめ商品データを$listという変数に連想配列で格納してあります。興味があれば覗いてみてください。

では、1行目にｐｈｐの宣言をしてdata.phpをincludeします。

======================================

<?

include ‘data.php’;

?>

======================================

はい、これで読み込み完了です。

？、実感がない。

はい、そうですか・・・ではではinclude’data.php’;の一行下に次のコードを。

======================================

print_r($list);

======================================

これは予めdata.phpで設定してある変数$listを確認するための一行です。

これで、配列の中身が一目瞭然となります。

ということで本日はここまでです。

今日のデータはこちらからダウンロードできます。

さてさて、次回は検索をGetで送信するようにしていきましょう。

【予定】

・３、Getによるform内のphp化

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）