スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

前回まで、図やテキストを描いたりしていましたが、今回はもう少しだけ複雑な図を、機能を使って書いてみます。

線を描いてみる

関数Lineを使えば、自由にラインをひくことができます。

	var line= new Kinetic.Line({
		points: [10, 10, 50, 50, 140, 30, 220, 80], 
		x:10, 
		y:10, 
		stroke:"green"
	});

x軸、y軸をピクセル数でポイントを指定し、そのポイント間に線を引いてくれます。
つまり、この設定では(10, 10) (50, 50) (140, 30) (220, 80)の4点が線で結ばれ、一つのラインを描写しています。

今更ながら、VPN環境が整ったので、その手順をメモしておきます。

VPNには、接続先の端末と1対1でつながるルーティング方式と、接続先のLAN環境に参加するブリッジ方式があります。
今回はルーティング方式についてのお話です。

また、VPNはさまざまな環境で利用可能ですが、今回のOS環境はWindowsとします。接続元となるクライアント環境はWindows 7で、接続先のサーバ環境はWidows XPとします。
さらに、接続に利用するポート番号はデフォルトの1194と仮定します。

VPNソフトをインストールする

VPNソフトはいろいろありますが、有償のものが多いです。フリー版もありますが、ほとんどの場合が機能制限付です。
そんな中でも、コストパフォーマンスの高い「OpenVPN」を今回は利用します。
OpenVPN – Open Source VPN
こちらのサイトで迷子になることがあるのですが、クライアント、サーバいずれも、以下のページの「Installers and source packages」の「Windows Installer」からソフトをダウンロードします。
http://openvpn.net/index.php/download.html
ダウンロードした実行ファイルをクリックし、ナビゲーション通りに進めればインストールは完了します。
ちなみに、今回の例でのOpenVPNでのバージョンは「2.2.2」です。


インストール時に、ネットワークアダプタが追加されます。通常では「ローカル エリア接続2」などとして追加されますが、以後に扱いやすくするために名前を「Tap」などに変更しておきます。

過去にGoogleカスタム検索の検索窓をCSSなどを使って好きにデザインを変更した記憶があります。
しかし、最近、新規でカスタム検索のコードを取得したところ、Javascriptで記述されており、また、検索窓のフォームがiframeで読み込む形式になっているため、容易にデザインをカスタマイズというわけにはいきません。

iframeタイプの検索窓

現在、Googleカスタム検索で登録すると、以下のようなコードが取得できます。

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'ja', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '(検索エンジン ID)', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>

このコードをページに貼り付けると、以下のような検索窓が表示されます。

前回に引き続きテキストを描いてみます。
KineticJS入門 – 図形を描いてみる
Canvasエリアの用意や、ライブラリの読み込みなどは前回を参照してください。

テキストを描く

テキストの描写には関数Textをコールします。
以下、「sample text」という文字を、赤文字で描写するシンプルな例です。

window.onload = function() {
	var stage = new Kinetic.Stage({
		container:"canvas1", 
		width:300, 
		height:100
	});
	var layer = new Kinetic.Layer();
	var text = new Kinetic.Text({
		x:100, 
		y:50, 
		text:'sample text', 
		textFill:"red"
	});
	layer.add(text);
	stage.add(layer);
};

前回と同様に、Textオブジェクトをオブジェクトlayerに追加し、さらにそのオブジェクトlayerをオブジェクトstageに追加します。

iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。
リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。

しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。
長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。
例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。

HTML5+CSS3は将来、Flashに替わるものになり得るのかという議論があります。
個人的には基本、オープンかつシンプルな技術が富をもたらすと信じているので、環境を選ぶFlashに対しては、それに替わる技術が発展するとすれば、それは大いに期待したいところではあります。

その可能性を感じさせる技術のひとつに、JavaScriptのライブラリ「KineticJS」があります。
KineticJS – HTML5 Canvas JavaScript Library Framework
今回は「KineticJS」について少しお勉強してみたいと思います。

KineticJSを組み込む

上記の公式サイトの「Download」より「KinecticJS」の最新版をダウンロードします。現時点での最新版は3.9.8です。
ダウンロードしたライブラリを、通常のJSを読み込む要領で以下のようにします。

<script src="/js/kinetic-v3.9.8.min.js"></script>

準備はこれだけでOKです。

最近、このブログでもスパムコメントが多いです。
コメント欄はWordpressの機能で運用しており、WPプラグインでスパムフィルタなどを組み込むこともできるようですが、時代の流れにあやかってFacebookのプラグインを導入してみることにしました。

Facebookコメントプラグインの導入

Facebook公式ページのフッタ部分の「開発」リンクをクリックすると以下のページに飛びます。
Home – Facebook開発者
「ウェブサイト向けに開発」を選択し、サイドメニューから「Core Concepts」⇒「Social Plugins」と辿り、コンテンツメニューの「Comments」をクリックします。

そうすると、以下のようなインターフェースのあるページへと遷移します。

iPhoneサイトを構築する際のviewport設定について、以前に記事を書きました。
スマートフォンの画面サイズとフォントサイズ
今回、この設定で構築したサイトで1つ問題が発生しました。

iPhoneのブラウザでサイトを閲覧したときに、横にスクロールしてしまうという問題です。

言葉だけではうまく説明できないので、以下に図を示します。

※図はダミーです。Yahooさんのサイトで実際にはこうなりません。

Windowsの開発PCなどでApacheのバーチャルホストを活用する際に、hostsファイルを書き換えることがあります。

hostsファイルはWindows XP以前では、テキストエディタで開き、編集した後に上書き保存するだけでした。
しかし、Windows Vista以降では、新しく権限のしくみが組み込まれたため、編集するためにはファイルを管理者権限で開く、また、開く際に確認のアラートが鳴るという仕様になっています。

Webの仕事をしていると、とにかくhostsをよく書き換えます。
たいした事ではありませんが、深い階層にあるhostsファイルを管理者権限で開くという操作の繰り返しは若干のストレスになります。Webで探してみても、決定的な簡易的管理方法はみつかりません。。。
こんなことで悩んでいるのは私だけでしょうか。。。

そこで、どうにかスマートに管理できないものかと、私なりに考えてみました。

縦幅の長い、縦スクロールが発生するようなサイトを閲覧しているときにブラウザをリロードすると、画面はページのトップではなく、リロード前の位置で再読み込みされます。

未確認ですが、ここ1年の間での最新のブラウザに機能として追加されたようです。
とりあえず、現時点での最新のブラウザ、IE9、GoogleChrome18、Firefox11で、この動作を確認することができます。

スクロールした後にリロードした場合にも「読んでいたところを再表示する」という親切な機能かもしれませんが、逆に困ることもあります。
例えば最近ではパララックス効果など、意図的に縦長サイトをFlashのようなリッチコンテンツ風に構築されたサイトがあります。オープニングなどの演出で、初期表示は必ずトップを見てほしいという場合です。

Monthly Archives