WEB/システム/IT技術ブログ

iPhoneに対してlabel要素を設定していも、選択エリアが広がりません。今回はその対応策について考えてみました。

例えば、フォームのラジオボタンやチェックボックスなどは、デバイスや画面サイズによっては操作しづらい事があります。そのような場合は、label要素で囲む事で、その囲まれたエリアをイベント領域として確保します。

例えば、以下のようなコードを用意してみました。

<input type="checkbox" />labelなしです<br />
<label><input type="checkbox" />labelありです</label>

そうすると、以下のような表示になります。

labelなしです

labelありだと、要素囲んだ「labelありです」の文字列の部分で、チェックのオン/オフができるので、操作性が上がりますね。
このように、フォームを組む際にユーザビリティとしてlabelを導入するのは、ここ最近は常識になっていますね。

しかし、iPhoneだと、このlabel要素が効きません。

今やオンラインショップでは当たり前のようにアフェリエイトAPIが公開されています。

そこで、何か目新しいAPIなどはないかと、いろいろなサイトを徘徊していたときにたまたま見つけたのがDMMのwebサービスAPIです。
トップ – DMM Web APIサービス

ショッピングサイトのアフェリエイトAPIは、まあ普通ですが、レンタルサイトのアフェリエイトがあるとは思いませんでした。
もちろん「売る」のに比べて「借りる」ほうが単価は安いわけで、それでアフェリエイトが成り立つのかと考えていました。しかし、開発が進んでいるということは、それなりに利益が生まれているんでしょうね。

早速ですが、そのAPIを使ったサンプルページを作成してみました。
DMM Webサービス サンプル ver1.0 | helog lab

APIはREST形式で公開されていて、他社のAPIに比べて非常にシンプルな作りになっています。リクエストURLの仕様は基本1本のみで、パラメータでオプション指定するのみとなっています。

もちろんレンタル商品のみではなく、通販、ストリーミング動画の商品も扱っています。
さらには、DMM.R18のアダルトコンテンツも公開しています。アダルトコンテンツを作成したことがないので詳しくはないですが、こちらは普通のレンタルサーバでは不適切なコンテンツとして扱われるはずなので、注意が必要でしょう。

Web技術者の誰もが、一度はアフェリエイトのチャレンジした経験があるかと思います。私もその1人です。
当時はA8.net、リンクシェア、バリューコマースなどのサービスが主流でした。

ただその管理作業がすごくめんどくさかったです。
サービスから自分のサイトに合ったプログラムを探して、そのコードをコピペで貼る事の繰り返し。ある程度サイトボリュームがあると、利益が出る前に、作業量が多すぎて管理・運営を断念せざるを得ません。

自身で管理システムでも作ればよいかもしれませんが、どうせなら、アフェリエイトサービス側で利便性を向上してくれないかと、その頃は勝手にそのように思っていました。

久しぶりにリンクシェアのサイトをのぞいてみたら、APIが公開されているではないですか。(今更と言われるかもしれませんが。。。)しかも社名が「Rakuten LINKSHARE」になっている。
Rakuten LINKSHARE

さて、早速ですがアフェリエイトのAPIの使い勝手を試してみました。

PHPの関数「file_get_contents」でAPIを利用した情報を取得することがあります。
但し、対象が「https」で始まるurlの場合に、情報が取得できません。
何度もこの問題に直面し、その度に頭を悩ませてしまいます。記憶力が。。。
というわけで、ここでしっかりメモを残しておきます。

「file_get_contents」でhttpsから始まる情報にアクセスできない

例えばAPIなどを利用するにあたり、その情報にアクセスするために以下のようなソースを記述します。

if(($res = @file_get_contents($url)) === false){
	(略)
}

ここで、$urlの中身が「https」で始まるurlの場合に、情報の取得に失敗してエラーになってしまいます。

Notice (8): Undefined variable: http_response_header xxx, line 688]
Notice (8): Undefined offset: 2 [xxx, line 688]
Notice (8): Undefined offset: 1 [xxx, line 688]

このようなエラーです。「xxx」はファイルパスです。

MNP(携帯電話番号ポータビリティー)でSoftbankからauに乗り換えました。

初めて携帯を持ってから十数年、一度もキャリアを変更したことがなかったので、乗り換えは今回が初めてです。
正確には、ツーカーから、J-PHONE、vodafone、ソフトバンクと会社は何度も変わりましたが。

そんな中、意識せずとも契約内容はコロコロと変わり、10年前に説明を受けたものとはまったく異なった内容になっています。はっきりと思い出せませんが、確か10年前には使えば使うほど、年々基本料金が安くなるといった内容だったような。
得をしているのか、損をしているのか、複雑すぎて分からないですね。

今回の契約更新内容を残しておいて、10年後に見たらどう印象を受けるのか、そのためにメモを残してみようと思いました。
乗り換えを検討中の方にも参考にしていただければと思います。

今回はKineticJSで生成したオブジェクトにイベントを登録してみます。

KineticJSでは、シェイプオブジェクトに対して、マウスオーバー、クリックやドラッグなどのマウスイベントを検出することができます。

実装方法は以下のようにオブジェクトに対して、イベントを登録するだけです。

    var rect = new Kinetic.Rect({
        x:100, 
        y:25, 
        width:100, 
        height:50, 
        stroke:"red"
    });
	rect.on("mouseover", function(){ 
		alert("Mouse Over");
	});
	rect.on("mouseout", function(){
		alert("Mouse Out");
	});
	rect.on("click", function(){
		alert("Click");
	});

サンプルでは、赤枠の四角形に対して、マウスオーバー、マウスアウト、クリックでメッセージを出力するように作成してみました。
ベースとなるソースは前回までに取り上げたので割愛します。

jQueryでオブジェクトのアニメーションなどを実装する場合に「jquery.easie.js」を使って動きを滑らかに表現することができます。
jquery.easie.js

以前に、jQueryのイージングプラグインを紹介しましたが、「jquery.easie.js」の方がより直観的で、容易にカスタマイズが可能です。
「jQuery Easing Plugin」でjQueryのアニメーションにイージング効果をつける

CakePHP2系がリリースされてしばらく経つので、そろそろ安定してきたかなと思い、実際にCakePHP1.3.6からCakePHP2.1.3へ移行してみました。
以下は、アップグレードに伴い、実際に作業した内容をまとめたものです。

ちなみに、CakePHP2.1.3はインストール済みのものとします。

ファイル名のルールがキャメルケースへ

これまでスネークケースであったファイル名のルールが以下のようにキャメルケースになります。また複数形の「s」も排除されています。

/controllers/pages_controller.php ⇒ /Controller/PageController.php
/views/pages/display.ctp ⇒ /View/Pages/display.ctp

コンポーネントの継承が変わる

コンポーネントクラスはこれまで「Object」を継承していましたが、以下のように「Component」を継承するようになりました。

class TestComponent extends Component {

HTC Desireを使い始めてからもうすぐ2年ですが、使い勝手にも限界を感じるようになってきたので、乗り換えを検討しています。

当初、Androidスマートフォンのラインナップの中では、他社と比較しても「HTC Desire Softbank X06HTII」は間違いなく優秀だったと思います。
初代Android端末ということもあって、他の機種では
「Flashが再生されない」
「時期がきてもOSが1.6からアップデートできない」
「スペックが低く動きがカクカクして使い物にならない」
など、いろいろと不満を周りから聞かされましたが、HTC Desireは比較的そのような問題はありませんでした。

HTCは海外メーカー(台湾)であることから、おさいふケータイが利用できない、ワンセグが受信できないなどのデメリットも確かにありました。
しかし、日常からそれらを利用していない私のようなユーザーからみれば、何の問題にもなりませんでした。

以前にWindows環境下でフリーソフト「OpenVPN」を利用したルーティング方式のVPN環境の構築方法を解説しました。
OpenVPNを使ってVPN環境構築(ルーティング方式)
今回はその続編で、ブリッジ方式を解説します。

前回と同様にクライアントはWindows 7、サーバはWindows XPで、共にOpenVPN 2.2.2をインストール済みとします。
また、証明書と鍵の作成など各種設定も終え、ルーティング方式での接続が可能な状態とします。

サーバ設定

こちらでは、主にルーティング方式との設定項目の相違点をみていきます。

サーバの設定ファイル「OpenVPNconfigserver.ovpn」をテキストエディタで開きます。

Monthly Archives