Hatena::ブログ(Diary)

pocket album on Hatena

2014-04-08

JavaScriptでGoogleサジェストを使ったサイト作ってみたった。

23:16

スマホのソフトキーボードで打ち間違い連発に嫌気がさしたので、Googleトレンドはてなキーワードから検索ワードを取得し、Googleサジェストで次々候補を表示できるサイトを作ってみた。

Touch Search

今まで無かった要素はゴミ箱ボタン。ゴミ箱をタップで、検索文字列のうち一番前の単語が消去される。これを使って、今まで検索したことの無い言葉の組み合わせでサジェスト結果が得られる。

思いついた時は「これは新しい!」と個人的に喜んだが、実装してみるとそこまでは面白くなかったw

よっぽど現在地を利用したサジェストのが面白いなーと。

仕組みとしては、ほとんどはJavaScriptで、外部ドメインXMLを取りに行くときだけRubyで書いたCGI使ってる。

外部APIとしては、Google Suggest APIHeartRails GeoAPI使わせてもらっています。ありがとうございます。

追記(2014.04.18)

一応、Googleサジェスト取得の手順を書いときます。

JQueryを使ってるので、先に読み込んでおいてください。

まず、CGIとして使っているRubyスクリプト

#! /usr/local/bin/ruby
print "Content-type: text/xml charset=utf-8\n\n"
# -*- coding: utf-8 -*-
#
# usage : google_suggest.rb <投入クエリ>
#
#$KCODE="u"
# regquire
require 'net/http'
require 'cgi'
require 'kconv'
require 'rexml/document'

# 検索クエリ
cgi_data = CGI.new
word = cgi_data["q"]

#Googleに候補を取りに行く
http = Net::HTTP.new('www.google.co.jp', 80)
query = "/complete/search?output=toolbar&q=#{CGI::escape(word)}&hl=ja"
req = Net::HTTP::Get.new(query)
res = http.request(req)

#XMLを得る
doc = REXML::Document.new res.body.toutf8

#XMLツリー全体を出力
print '<?xml version="1.0"?>'
print doc.root

最後に標準出力に出すときにXMLのヘッダを出力してやらないとダメだったので本文出力前に追加している。

これを呼び出すJavaScriptは、普通のAjaxによるHTTPアクセスでよい。

setTimeoutで500ミリ秒ごとにフォームを監視し、書き換えが発生していたら

サジェストを取得しに行くようにしている。

//global paramater
var myValue;

//------------------------
// ページ読み込み時の処理
//------------------------

$(document).ready(function(){

	myValue = "";

	//フォーム監視開始
	setTimeout("Check_form()",500);

});

//------------------------
// 一定期間ごとにフォームを監視
//------------------------

function Check_form(){

	//formのidから値を取得
	SrcValue = document.getElementById("input").value;

	// もしform内に変化があるならば
	if (SrcValue != "") {
		if (myValue != SrcValue) {
			$("#answer").empty();	// #answer内を空に
			myValue = SrcValue;		// グローバル変数にform内を格納
			get_suggest(myValue);	// google suggest check
		}
	}
	setTimeout("Check_form()",500);
}
//------------------------
//Google suggestを得る CGI呼び出し
//------------------------

function get_suggest(str){

url_str = "cgi/google_suggest.cgi?q=" + str;

$.ajax({
	    url: url_str,	// http://から始まるURLを指定
    	type: 'GET',
	    success: parse_xml //取得したXMLの処理
});	//end of $.ajax

}	//end of get_suggest

//------------------------
// XMLを表示
//------------------------
function parse_xml(xml,status){  
	//通信できなかったらreturn
    if(status!='success')return;  

	$("#loading").hide();	//loadingアイコン非表示
    //通信できたら
    $(xml).find('suggestion').each(function(){
		//Suggestで得た単語をSuggest要素で追加
		$('#answer').append('<div class="suggest">'+$(this).attr("data")+'</div>'); 
		//Suggest要素にOnClickイベントを追加
		$('div.suggest').click(function() {
			document.getElementById("input").value = $(this).text();
		});
	});  
}  

最後のparse_xmlでは、取得したXMLからサジェストの単語を抜き出して#answer要素内に追加している。

ただ追加するだけだとクリッカブルにならないので、要素追加後にイベントをclickメソッドで追加。

最初悩んだのが、clickイベントで追加するfunction内のthisってなんだ?ってこと。

この場合はクリックされた要素を指すんだね。

知ってる人には簡単なんだろうけど、自分でやってみようと思ったときにjsからCGI呼び出すとか悩んだことが多かったので、ここで書いてみました。今回RubyJQueryに初めて手を出してみたんだけど、Web上の先人たちのブログリソースでほとんどのことは解決できた。一番わからなかったのが、簡単なはずのjsからのajaxでのCGI呼び出しだったというのが…。1冊は本を買えと言うことなんでしょうか。

次は何を作ってみようか。

制作物の置き場

tbcafe.sakura.ne.jp

2014-04-05

新しいGoogleマップで地図を印刷する方法

11:11

f:id:theblackcoffee:20140405110949j:image

新しいGoogleマップになってしばらくたつが、地図を印刷しようとすると印刷のアイコンが見つからない。右下の設定アイコン(歯車)にも無い。

結論としては、

『Ctrl + P を押す』

わかるかーー!!!

しかも今は対応済だけど、一時はfirefox未対応だったらしい。

そんなのやめてください。思わず以前のGoogleマップに戻っちゃったじゃないか。

2014-03-21

Windows XP SP3→Windows 7(またはWindows 8)に移行するときの注意

21:11

一般的なことはいろんなところで述べられているので、他で書かれていない特殊なケースについて。

会社でハマったのは以下の2点。どちらもマイクロソフトが配布している公式の移行ツールを使っている。

1)Outlookのメールと連絡先が移行されない

転送元がOutlook 2007以前で、転送先がOutlook 2013だと起こる現象。

これは結構酷くて、正確には転送されているのだが、Outlook 2013からメールや連絡先のフォルダパスが変わっているのが原因らしい。

転送が終了してからPC内を「*.pst」で検索すれば転送された場所がわかるので、Outlook 2013を起動し「ファイル」→「開く/エクスポート」からメールのデータをインポートすればよい。(インポートが連想できないメニューに入れられているのが理解不能)

Outlook 2013でのインポート作業は以下のURLが詳しい。

121ware.com > サービス&サポート > Q&A > Q&A番号 014744

2)移行ツールで移行後、新PCでWindows updateが通らない

これは上よりも酷い。

うちの会社は以前proxyを通して外部に行ってた。で、XP SP1のころWindows updateを通すためにproxycfgコマンドでWindows update用のプロキシ設定をしておいた。

その後SP2やSP3になるとproxycfgコマンドでの設定は無視されるようになり、インターネットオプションでのプロキシ設定が自動的に反映されるようになってた(はず)。その後、1年ぐらい前に会社ではproxy使用を廃止してた。

それが移行ツールでこの影に隠れていたproxycfgの設定が転送され、かつWindows7ではそれが反映されてしまう。

で、1週間ぐらいするとupdate内容が確認できないため、セキュリティセンターから赤盾通知が来るのである。

しかも前述のproxycfgコマンドがWindows7からは削除されてしまっており、全く違うコマンド(使い方も違う)に変更されている。

以下にWindows 7以降でのWindows update用のproxyの設定変更については、以下のURLが詳しい。

Windows設定関連/プロキシ経由のWindows Updateができない場合の対処 - Windowsと暮らす

この中の「コマンドプロンプトを管理者として実行」→「プロキシ設定のリセット」→「IEプロキシ設定をインポートする」とやってから再起動すればOK。

でもねー。ホント移行ツールは酷いと思ったよ。確かにいろいろ自動で転送はしてくれるんだけど、Office 2013発売後なのに対応してなかったり、裏のプロキシ設定まで転送されちゃったり(ネットワークの設定が済んだ後なので余計にハマる)するのは困る。マイクロソフト謹製だから信用しちゃってるのがさらにハマりに拍車をかける。

特にWindows updateできねーってのは怖いので、会社でproxy使ってる人(かつ途中でproxy設定の変更があった人)は要確認です。

2014-02-13

Logicool F710 ワイヤレスゲームパッドがWindows8 x64環境で認識されなくなった時

23:22

結構出来がいいWindows用のワイヤレスゲームパッドF710。

始めは一発で認識されてゲームしまくってたのに、3日ぐらい触らなかったら突然LEDが緑点滅して認識されなくなった。

LED点滅はバッテリー切れかペアリング切れでロストしたか、らしい。

電池を入れ替えても回復せず…。以下の方法で再ペアリング出来た。

(1)以下のアドレスから「ソフトウェアダウンロード」を選ぶ。

http://www.logicool.co.jp/ja-jp/support/wireless-gamepad-f710?crid=411&osid=14&bit=64

(2)OSを「Windows7」、「64-bit」を選択。(Win8ではないことに注意)

f:id:theblackcoffee:20140213230826p:image

(3)「Wireless Gamepad F710 Connect Utility」を選択しダウンロード

f:id:theblackcoffee:20140213231250p:image

(4)実行すると英語表示だが、新しい電池を用意してから「Continue」を選択。

f:id:theblackcoffee:20140213231251p:image

(5)まずレシーバーUSBコネクタから抜く。

(6)次にゲームパッドから電池を抜く。

(7)USBコネクタレシーバーをセット。

(8)30秒以内にゲームパッド電池をセット。

 (エラー終了するときがあるが気にしない)

これでLEDの緑点滅が点灯に変化し、再ペアリングできるはず。

ちなみにWindows8 x64ドライバインストールがうまく行かない場合は、Xbox360コントローラドライバを入れると警告(黄色の「!」)が出なくなる。

やり方としてはこれ。英語だが、画面ありの説明動画なので分かりやすい。

2013-11-12

iTunesのAppライブラリからiPhoneに入ってるアプリ以外を削除する方法

23:17

iPod 4G時代からiOS Appをダウンロード・購入してきたら、かなりPCのHDD容量を圧迫してきた。

そろそろAppを大掃除…と思ったが、現行で使っているAppはiPhoneiTunesどちらにも残したい。

しばらく前にも同じことをやったんだけど、完全に忘れていたのでメモ。

まず最初に、わかりやすいようにiTunes 10のころのようにサイドバーを表示する。

(1)iTunes左上角の四角のアイコン上で左クリック。

f:id:theblackcoffee:20131112230257j:image


(2)表示されたメニューから「メニューバーを表示」を選択。

f:id:theblackcoffee:20131112230256j:image


(3)メインウインドウ上部にメニューバーが表示されるので、そこから「表示」→「サイドバーを表示」を選択。

f:id:theblackcoffee:20131112230255j:image


(4)メインウィンドウの左側に懐かしのサイドバーが出現。

f:id:theblackcoffee:20131112230253j:image



次に、iTunes上のAppライブラリを削除し、iPhoneから書き戻す。

(5)iPhoneをPCに接続し、念のため一度バックアップをとる。


(6)iTunesの、iPhoneの「概要」画面の下の方の「オプション」欄にある「このiPhoneを接続しているときに自動的に同期」をオフにする。

f:id:theblackcoffee:20131112231503j:image


(7)一度iPhoneをPCから取り外し、iTunesのAppライブラリから適当にAppを削除。いきなり全消ししてもいいが、ちょっと怖いならiPhoneに入っているAppを試しに1つ消してやってみるとよい。


(8)再度iPhoneをPCに接続。サイドバーの自分のiPhoneを右クリックし、「購入した項目を転送」を選択。

f:id:theblackcoffee:20131112230252j:image


(9)iPhoneインストール済みのAppでiTunes内に無いものだけがPCに転送される。