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

過去に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」でも移行しましたが、同手順で問題ありませんでした。

例えばxamppなどを利用してローカルでメールフォームなどを開発する場合、その動作を確認できなくて困ることがあります。
原因は、単純にローカルマシン自身がSMTPサーバではないからです。

xamppにはその問題を解消するために「Mercury」というソフトが同胞されています。これまで、幾度となく何度もチャレンジしたのですが、うまくメールを送信できませんでした。
しかし、今回、設定に成功したのでメモとして残しておきます。

ローカル開発環境の詳細について

今回、ローカル開発環境におけるメール送信環境を実現したのは以下の環境です。

OS Windows7 64bit
XAMPP 1.7.7
Apache 2.0
PHP 5.3.8
Mercury 4.62

もちろんApache、PHP、Mercuryはxamppにデフォルトで同胞されているものを使用しますが、参考までに。

Windowsでファイルを共有する場合、Windows XP以前では「ファイル共有」というメニューから設定できました。
それがWindows Vistaになって、ネットワークセキュリティだか権限だか、そのしくみの詳しくは知りませんが、なかなかファイル共有ができずに、四苦八苦した経験があります。

今回、Windows 7同士でファイルを共有することになりました。
またVistaのような苦労を強いられるのかと思いながら少し調べていたら、Windows 7には「ホームグループ」という簡単にファイル共有が実現できる機能が用意されているようです。

早速ですが、その機能を試してみました。

例えば、同一LAN内に設置した2台のWidows 7マシン、ホームグループを作成するPC1と、ホームグループに参加するPC2でファイルを共有することを想定して、設定を進めてみます。

ホームグループが利用できる設定かどうか?

まず、ホームグループを利用するには、PC1とPC2共にネットワークの設定が「ホームグループ」である必要があります。
確認方法は「コントロールパネル」⇒「ネットワークとインターネット」⇒「ネットワークと共有センター」を開き、「アクティブなネットワークの表示」から使用しているネットワークが「ホームネットワーク」になっているか確認します。「ホームグループ」以外の場合、「ホームネットワーク」に変更します。

Monthly Archives

Search