迷言辞典 - ソースコード
説明
「迷言辞典」は、「Web AI」を使ったWebアプリです。このページでは、この「迷言辞典」を作るために書いたプログラムを掲載します。
「Web AI」は、クロノス・クラウンの柳井政和が開発しているJavaScirptのライブラリです。「Web AI」を使うと、Web上からデータを取得して構築するWebページを、とても簡単に構築することができます。
「Web AI」は、Webからの検索結果やフィードの取得、短縮URLへのURLの変換、日本語文章からのキーワードや文章抽出、日本語文章のマルコフ連鎖、クエリーの管理などの機能を備えています。
コアとなる「WebSrch」オブジェクトでは、非同期で行われる通信処理に対して、その結果を待ちながら順番に処理していくプログラムを簡単に書くことができます。また、本ライブラリでは「Google AJAX Search API」を抽象化して、検索データを手軽にプログラムに読み込んで利用できるようにしています。
「迷言辞典」は、この「Web AI」のサンプルとして作成しました。このWebアプリを作成したソースコードを見れば、その簡単さがよく分かると思います。それでは以下に、ソースコードを掲載します。
ソースコード
まずは、HTMLのヘッダー部分のソースコードです。
<!-- Google API -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<!-- Web AI API -->
<script src="crocro.webAi.min.js" type="text/javascript" charset="UTF-8"></script>
<!-- ScriptThis -->
<script src="app.js" type="text/javascript" charset="UTF-8"></script>
次に、Webアプリ本体部分になる「app.js」のソースコードを掲載します。
/**
* 【変数の初期化】
*/
// Googleからスクリプトをロード
google.load("search", "1");
google.load("feeds", "1");
google.load("jquery", "1.4.3");
// Web AIの初期化
var $WA = crocro.webAi; // 短縮表記
var cQ = new $WA.Query(); // クエリー
var cWSrch = new $WA.WebSrch(); // Web検索用
var cISrch = new $WA.WebSrch(); // 画像検索用
var cJpKw = new $WA.JpKw(); // キーワード
var cJpSntnc = new $WA.JpSntnc(); // センテンス
var qKeyQckSrch = "qckSrch"; // 急速検索
var loadAnmArr // ロード中アニメ配列
= [".(^o^).", "(^o^)..", "^o^)..(", "o^)..(^", "^)..(^o", ")..(^o^", "..(^o^)"];
var loadAnmCnt = 0; // ロード中アニメ・カウンター
var appNm = "迷言辞典";
/*
*--------------------------------------------------
*/
/**
* 【初期化処理】
*/
cWSrch.ready(function(){
// デフォルトの固定URLを作成
$("#fix_url_raw").val(getUrlBs());
$("#fix_url_min").val(getUrlBs());
setSclUrl(getUrlBs()); // ソーシャル系URL設定
setTimeout(loadDelay, 1000); // 遅延読み込み
// クエリーの初期化
cQ.prsFrmLocation({useH: true});
// 検索結果出力先の追加
var deco = function(r) {
if ("unescapedUrl" in r) return r.unescapedUrl + "\n";
return "";
}
cISrch.appndResTgt = "vwSrchRes";
cWSrch.appndResTgt = "vwSrchRes";
cISrch.appndResDeco = deco;
cWSrch.appndResDeco = deco;
// 画像検索用WebSrchを初期化
cISrch
.init({
type : "img",
opt : function(obj) {
obj.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,
google.search.ImageSearch.IMAGETYPE_PHOTO); // 写真
}
})
.start();
// Web検索用WebSrchを初期化
cWSrch
.brand("gglBrnd")
.init({
type : "web",
opt : function(obj) {
obj.setResultSetSize(google.search.Search.LARGE_RESULTSET); // 8件
}
})
.init({
type : "nws",
opt : function(obj) {
obj.setResultSetSize(google.search.Search.LARGE_RESULTSET); // 8件
}
})
.feed({
// 最新ニュースのキーワードリストを取得
url : "http://www.google.co.jp/trends/hottrends/atom/hourly",
res : function(res) {
// エラー確認
if (res.error) return; // エラーなので終了
// キーワードの取得
var contentStr = res.feed.entries[0].content;
var getArr = contentStr.match(/>[^\w\n]+?</g);
if (! getArr instanceof Array) return; // エラーなので終了
getArr = $.map(getArr, function(n, i){
return n.replace(/[<>]/g, "");
});
// HTMLの作成
for (var i = 0; i < getArr.length; i ++) {
// URL作成
var urlStr = ""
+ ($WA.Tools.isLocal() ? "#" : "?") // ローカルの場合は#
+ qKeyQckSrch + "=" + encodeURIComponent(getArr[i]);
// HTML作成
var htmlStr = '<span class="newItm">'
+ '<a href="' + urlStr + '">'
+ getArr[i]
+ '</a>'
+ '</span>';
getArr[i] = htmlStr
}
// HTMLの挿入
$("#newLst").html(getArr.join(" "));
}
});
if (cQ.get(qKeyQckSrch) != "") {
// 急速検索がある場合は、検索処理を追加
cWSrch
.add(function() {
$("#q").val(cQ.get(qKeyQckSrch)); // キーワードを設定
strtSrch(); // 検索開始
});
} else
if (cQ.get("kw") != ""
&& cQ.get("nms") != ""
&& cQ.get("bdy") != ""
) {
cWSrch
.add(function() {
// 復帰用のデータがあるので画面を復帰
$("#resVw").html(qry2Html(cQ)); // クエリーをHTMLに
kw2Img(); // 画像の挿入
// 固定URLを作成
var urlStr = getUrlBs(); // URL基本部分取得
urlStr += "?" + cQ.getCmprsQuery(); // 圧縮をかけたクエリーを取得
$("#fix_url_raw").val(urlStr);
setSclUrl(urlStr); // ソーシャル系URL設定
});
}
cWSrch
.setEachCall(function(){
// ステップごとに呼び出される処理を追加
drwLoadAnm(true); // ロードアニメ描画
})
.start();
});
/*
*--------------------------------------------------
*/
/**
* @title 【検索開始】
* @description
*
* 検索を実行する。ボタンから呼び出す。
*/
function strtSrchBtn() {
// 実行中回避処理
if (cWSrch.isExec) {
alert("現在、検索中です。\n\n少々お待ち下さい。");
return;
}
// 検索実行
cWSrch.reset();
strtSrch();
cWSrch.start();
}
function strtSrch() {
// 変数の初期化
var kwStrt = $("#q").val(); // 開始キーワード
var kwGetArr = []; // 収集キーワード配列
var nmGetArr = []; // 収集名前配列
var cQRes = new $WA.Query(); // 結果クエリー
// 開始キーワードのトリム
kwStrt = kwStrt.replace(/^[ ]+|[ ]$/g, "");
// オブジェクトの内容のリセット
cJpKw.reset(); // 日本語キーワードオブジェクトの内容をリセット
cJpSntnc.reset(); // 日本語文章オブジェクトの内容をリセット
// 検索処理
cWSrch
.srch({
// ニュースを検索して、キーワードと文章を収集
type : "nws",
page : 8,
key : kwStrt,
res : function(res, cursor) {
if (! res || res.length <= 0) return; // 結果なし
for (var i = 0; i < res.length; i ++) {
var r = res[i];
cJpKw.addSrc(r.titleNoFormatting); // キーワード用に文字列を追加
cJpSntnc.addSntnc(r.content); // 文章用に文字列を追加
}
}
})
.srch({
// Webを検索して、キーワードと文章を収集
type : "web",
key : kwStrt,
page : 8,
res : function(res, cursor) {
if (! res || res.length <= 0) return; // 結果なし
for (var i = 0; i < res.length; i ++) {
var r = res[i];
cJpKw.addSrc(r.titleNoFormatting); // キーワード用に文字列を追加
cJpSntnc.addSntnc(r.content); // 文章用に文字列を追加
}
}
})
.feed({
url : function() {
return "http://searchranking.yahoo.co.jp/rss/total_ranking-people-rss.xml";
},
res : function(res) {
if (! res.error) {
for (var i = 0; i < res.feed.entries.length; i++) {
var e = res.feed.entries[i];
nmGetArr.push(e.title);
}
}
}
})
.add(function() {
// 文章配列を取得
var sArr = cJpSntnc.getSntncArr();
var kwArr = cJpKw.getStrArr();
// マルコフ連鎖で文章を生成
var cJpMrkv = new $WA.JpMrkv();
cJpMrkv.setSntncArr(sArr);
var mrkvSArr = [];
for (var i = 0; i < 100; i ++) {
var str = cJpMrkv.getSntnc({strtStr: kwStrt});
if (str == "") continue;
if ($.inArray(str, sArr) != -1) continue;
mrkvSArr.push(str);
}
mrkvSArr = $WA.Tools.unq(mrkvSArr); // ユニークに
mrkvSArr = cJpSntnc.sortLen(mrkvSArr, 25); // 25文字位置でソート
nmGetArr = $WA.Tools.shffl(nmGetArr); // シャッフル
// 全て出力
var outArr = cJpSntnc.sortLong(mrkvSArr).reverse();
var outStr = "";
for (var i = 0; i < outArr.length; i ++) {
outStr += i + ". " + outArr[i] + "。<br><br>";
}
$("#mrkvLst").html(outStr);
// HTML用データをクエリーへ格納
cQRes.set("kw", kwStrt);
cQRes.set("nms", nmGetArr.slice(0, 6).join("\n"));
cQRes.set("bdy", mrkvSArr.slice(0, 6).join("\n"));
// 記事を出力
$("#resVw").html(qry2Html(cQRes)); // クエリーをHTMLに
cJpKw.avoidStr = kwStrt; // 無視文字列
cJpKw.bsUrl = ($WA.Tools.isLocal() ? "#" : "?") + qKeyQckSrch + "=";
cJpKw.outKw("kwLst", { // キーワードリスト挿入
clsNm : "kwItm",
wrpFnc : function(s) {return '<nobr>' + s + '</nobr>'}
});
kw2Img(); // 画像の挿入
})
.add(function() {
// 固定URLを作成
var urlStr = getUrlBs(); // URL基本部分取得
urlStr += "?" + cQRes.getCmprsQuery(); // 圧縮をかけたクエリーを取得
$("#fix_url_raw").val(urlStr);
setSclUrl(urlStr); // ソーシャル系URL設定
// 検索の終了
drwLoadAnm(false); // ロードアニメ描画
});
}
/*
*--------------------------------------------------
*/
/**
* @title 【URL基本部分取得】
* @description
*
* URLの本体を取得。
*
* @return URLの本体部分
*/
function getUrlBs() {
var urlStr = "http://www.google.com/"; // ダミー
if (! $WA.Tools.isLocal()) {
// ネット上なので、URLをそのまま利用
urlStr = location.href.replace(/\?.*$|#.*$/g, ""); // 本体部分のみ取得
}
return urlStr;
}
/**
* @title 【クエリーからHTML作成】
* @description
*
* クエリーを元にして、HTMLを作成する。
*
* @param q クエリー・オブジェクト
* @return HTML文字列
*/
function qry2Html(q) {
// エラー対策
if (q.get("kw") == "") return;
if (q.get("nms") == "") return;
if (q.get("bdy") == "") return;
// 変数の初期化
var resStr = "";
var nmArr = q.get("nms").split("\n");
var bdyArr = q.get("bdy").split("\n");
// HTMLの作成
resStr += wrpDiv("「" + q.get("kw") + "」についての有名人の迷言", "itm_hdr");
for (var i = 0; i < 4 && i < bdyArr.length; i ++) {
if (i > 0) resStr += "<hr>";
if (i < nmArr.length) { // 人間画像
resStr += wrpDiv(
wrpDiv(nmArr[i], "imgRep"),
"itm_img"
);
}
resStr += wrpDiv(bdyArr[i] + "。", "itm_bdy");
resStr += wrpDiv("by " + nmArr[i], "itm_nm");
var cQUnq = new $WA.Query(); // クエリ
cQUnq.prsFrmUrl({url: getUrlBs()});
cQUnq.set("kw", q.get("kw"));
cQUnq.set("nms", nmArr[i]);
cQUnq.set("bdy", bdyArr[i]);
var unqPgLnk = ''
+ '<a href="'
+ cQUnq.getCmprsUrl() + '" '
+ 'target="_blank">'
+ '個別ページを開く'
+ '</a>';
resStr += wrpDiv(unqPgLnk, "itm_lnk");
}
resStr = wrpDiv(resStr, "itm_out");
return resStr;
}
function wrpDiv(inSTr, cls) {
if (! cls) cls= "";
var resStr = "";
resStr += '<div class="' + cls + '">';
resStr += inSTr;
resStr += '</div>';
return resStr;
}
/**
* @title 【ロードアニメ描画】
* @description
*
* ロード中のアニメを描画する。
*
* @param loading ロード中か否か
* @return なし
*/
function drwLoadAnm(loading) {
var dwStr = ""
if (loading) {
dwStr = "Now Loading... " + loadAnmArr[loadAnmCnt ++ % loadAnmArr.length];
}
$("#loading").text(dwStr);
}
/**
* @title 【ソーシャル系URL設定】
* @description
*
* ソーシャル系のサービスのウィジットにURLを指定する。
*
* @param urlStr URL文字列
* @return なし
*/
function setSclUrl(urlStr) {
// ローカル時は無効
if ($WA.Tools.isLocal()) return;
// 引数を解析
var cQSrc = new $WA.Query();
cQSrc.prsFrmUrl({url: urlStr});
var kw = cQSrc.get("kw");
var bdyArr = cQSrc.get("bdy").split("\n");
var nmArr = cQSrc.get("nms").split("\n");
// 変数の初期化
var cQTmp;
var urlTmp;
// AddClip ブックマーク用URL
AddClipsUrl = urlStr;
// Twitter用URL
cQTmp = new $WA.Query(); // クエリ解析用
cQTmp.prsFrmUrl({url: $(".twitter-share-button").attr("src")});
cQTmp.set("url", urlStr);
if (bdyArr.length == 1) {
cQTmp.set("text", appNm + " - " + bdyArr[0] + " by " + nmArr[0]);
} else {
cQTmp.set("text", appNm + " - 「" + kw + "」についての迷言");
}
$(".twitter-share-button").attr("src", cQTmp.getUrl());
// Facebookシェア用URL
cQTmp = new $WA.Query(); // クエリ解析用
cQTmp.prsFrmUrl({url: $("#fcbkShare").attr("href")});
cQTmp.set("u", urlStr);
$("#fcbkShare").attr("href", cQTmp.getUrl());
// Facebookいいね用URL
cQTmp = new $WA.Query(); // クエリ解析用
cQTmp.prsFrmUrl({url: $("#fcbkLike").attr("src")});
cQTmp.set("href", urlStr);
$("#fcbkLike").attr("src", cQTmp.getUrl());
// はてブ用URL
var htbEntryAdd = "http://b.hatena.ne.jp/entry/add/" + urlStr;
var htbEntryUrl = "http://b.hatena.ne.jp/entry/" + urlStr;
var htbEntryImg = "http://b.hatena.ne.jp/entry/image/" + urlStr;
$("#htbEntryAdd").attr("href", htbEntryAdd);
$("#htbEntryUrl").attr("href", htbEntryUrl);
$("#htbEntryImg").attr("src", htbEntryImg);
}
/*
*--------------------------------------------------
*/
/**
* @title 【キーワードをイメージに置換】
* @description
*
* 画像置換クラスで囲われたキーワードを画像に置換する。
*
* @return なし
*/
function kw2Img() {
// 画像キーワードの取得
var imgRep = [];
$(".imgRep").each(function(){
imgRep.push($(this));
});
var imgRepSz = imgRep.length;
// 検索処理
cISrch
.reset()
.srch({
// 画像を検索して、キーワードを置換する
type : "img",
loop : imgRepSz,
key : function(){return imgRep[cISrch.loopCnt].text();},
res : function(res, cursor) {
if (res && res.length <= 0) return; // 結果なし
// 結果あり
var r = res[0];
// HTML文字列の作成
var htmlStr = "";
htmlStr += '<img src="' + r.tbUrl + '"'
+ ' width=' + (r.tbWidth * 1)
+ ' height=' + (r.tbHeight * 1)
+ ' border=0'
+ ' title="' + cISrch.srchKw + '"'
+ ' id="imgInsrtTb' + cISrch.loopCnt + '"'
+ '>';
htmlStr += '<img src="' + r.unescapedUrl + '"'
+ ' width=' + (r.tbWidth * 3)
+ ' height=' + (r.tbHeight * 3)
+ ' border=0'
+ ' title="' + cISrch.srchKw + '"'
+ ' id="imgInsrt' + cISrch.loopCnt + '"'
+ ' style="display: none;"'
+ ' onload="chngImg(' + cISrch.loopCnt + ');"'
+ '>';
htmlStr = '<a href="' + r.unescapedUrl + '"'
+ ' target="_blank"'
+ '>'
+ htmlStr
+ '</a>';
// HTMLの置換
imgRep[cISrch.loopCnt].html(htmlStr);
}
})
.start();
}
function chngImg(n) {
$("#imgInsrtTb" + n).hide();
$("#imgInsrt" + n).show();
}
/*
*--------------------------------------------------
*/
/**
* @title 【短縮URL取得】
* @description
*
* 短縮URLを取得する。
*
* @return なし
*/
function getShrtUrl() {
cWSrch
.reset()
.shrtUrl({
// 固定URLを作成して、短縮URLに変換
url : $("#fix_url_raw").val(),
res : function(res) {
$("#fix_url_min").val(res);
}
})
.start();
}
/**
* @title 【遅延読み込み】
* @description
*
* HTMLの一部を遅延読み込みする。
*
* 以下、遅延領域のサンプル。
*
* <span class="delay">
* <noscript>No JavaScript</noscript>
* <span class="delayBefore">Now Loading...</span>
* <span class="delayAfter"><!--
* hoge hoge
* --></span>
* </span>
*
* @return なし
*/
function loadDelay() {
$(".delay").each(function () {
// 遅延前の表示を消す
$(this).children(".delayBefore").html("");
// 遅延後の表示を出す
var repStr = $(this).children(".delayAfter").html();
repStr = repStr.replace(/^<!--|-->$/g, "");
$(this).children(".delayAfter").html(repStr);
});
}
/*
*--------------------------------------------------
*/
/**
* @title 【テスト用】
* @description
*
* テスト用コードを記述する。
*/
function test() {
}
『柳井政和』 の初心者向け講座
『柳井政和』 のサイト
PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。
クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。
『柳井政和』 執筆の本
文藝春秋より発売（2017年8月7日）。プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。
文藝春秋より発売（2016年8月27日）。2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。
「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。
「プログラマのためのコードパズル～JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。
「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。
Twitter：ruten
Facebook：Yanai
