スマートフォンや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に追加します。

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で探してみても、決定的な簡易的管理方法はみつかりません。。。
こんなことで悩んでいるのは私だけでしょうか。。。

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

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

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

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

以前に以下のような記事を書きました。
CakePHPで「404 NOT FOUND」などのエラー画面を構築する
こちらで「cakeError」を使用する方法を紹介しましたが、実は欠点があります。
「cakeError」をコールすると、そのコントローラ内の処理が全てキャンセルされるという点です。

私の場合、コントローラ内の「beforeFilter」でレイアウトのヘッダやフッタを構成する処理を実装していたのですが、「cakeError」によりそれらが実行されず、結果的に作成したエラー画面で意図しないシステムエラーメッセージが表示される事態になってしまいました。

「beforeFilter」などに実装した処理を実行させるためには、AppErrorをオーバーライドしたり、コアファイルを修正して「beforeFilter」を実行するように改良する方法があるようです。
しかし、私の場合、エラーが発生する・しないに関わらず、コントローラ毎にベースとして実行する処理は「beforeFilter」にまとめてあるので、なるべくはコアファイルなどに変更をかけずに対策したいと考えてました。

旧PCから新PCへ作業環境を移すにあたり、FirefoxとThunderbirdを移行したので、その作業メモです。

FirefoxもThunderbirdもMozillaの製品であり、その移行方法は基本的に同じです。
何れも、プログラム部分と個人設定などを含むプロファイルのディレクトリが分かれているので、移行はそのプロファイルを移すことになります。

移行環境

今回、私が実施したのは「Windows7 32bit」から「Windows7 64bit」マシンへの移行です。新旧マシンの共に、Firefoxのバージョンは8.0.1、Thunderbirdのバージョンは9.0.1です。
これより古いバージョンについては未検証ですが、近いバージョンであれば、同じ手順での移行は問題ないと思います。

※後日、「Windows7 64bit」から「Windows8.1 64bit」でも移行しましたが、同手順で問題ありませんでした。

Monthly Archives

Search