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

Googleカスタム検索の検索窓を好きなようにデザインしたい

過去に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>

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

「Googleカスタム検索の検索窓を好きなようにデザインしたい」のつづきを読む

KineticJS入門 – テキストを描いてみる

前回に引き続きテキストを描いてみます。
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に追加します。

「KineticJS入門 – テキストを描いてみる」のつづきを読む

スマートフォンサイトで電話番号やメールの自動リンクを解除したい

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

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

「スマートフォンサイトで電話番号やメールの自動リンクを解除したい」のつづきを読む

KineticJS入門 – 図形を描いてみる

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です。

「KineticJS入門 – 図形を描いてみる」のつづきを読む

WordPressのコメントからFacebookのコメントに移行

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

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

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

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

「WordPressのコメントからFacebookのコメントに移行」のつづきを読む

iPhoneサイトで拡大率を固定するべくviewport設定を見直す

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

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

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

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

「iPhoneサイトで拡大率を固定するべくviewport設定を見直す」のつづきを読む

hostsファイルを簡単に編集したい

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

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

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

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

「hostsファイルを簡単に編集したい」のつづきを読む

ブラウザリロード時にスクロールをページトップにもってくる方法

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

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

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

「ブラウザリロード時にスクロールをページトップにもってくる方法」のつづきを読む

iPhone4用に高解像度対応の画像でスマフォサイトを作る

一般的に、スマートフォンサイトでは横幅を320pxとしてデザインし、後にviewportでデバイス毎に横幅をフィットするように調整してサイトを構築します。

さて、iPhone4からディスプレイの解像度が2倍になったようです。
ここで何が問題かというと、これまで通り320pxでデザイン、構築した場合、解像度が倍になったiPhone4で閲覧してみると、画像が荒れて、または、ぼやけて表示されるという事です。つまり、iPhone4にとっては640pxが最適という事ですね。

iPhone4で画像があれるイメージ

解像度が倍になったことで画像があれるということは、

「iPhone4用に高解像度対応の画像でスマフォサイトを作る」のつづきを読む

エラービューをcakeErrorではなくrenderで読み込む利点

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

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

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

「エラービューをcakeErrorではなくrenderで読み込む利点」のつづきを読む

Monthly Archives