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

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」をテキストエディタで開きます。

Windows7でWebdavやVPNを用いてネットワークドライブを使用する場合、ファイル表示速度やファイル転送速度が異常に遅い場合があります。

いろいろと試していたのですが、解決策が見つかったのでここに残しておきます。

まずIEを起動して、「インターネットオプション」を開きます。
次にタブ「接続」を選択し、「ローカルエリアネットワーク(LAN)の設定」の「LANの設定」をクリックします。
そして下図のように、「自動構成」の「設定を自動的に検出する」のチェックを外します。

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

線を描いてみる

関数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に追加します。

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」をクリックします。

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

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

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

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

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

Monthly Archives

Search