【info】有料サポート(ベータ)限定 承り中 /【JSサポート(仮称)】
【費用】 とりあえず、言い値で承ります。ただし、できる範囲での限定受付です。込み具合等によりお受けできない場合がありますのであらかじめご了承ください。サポートにご納得いただけなければ料金は不要です。 逆に感動したら多くても構いません(^^;;;。
【できること】 たとえば、かも日記で無料配布されているコードのカスタマイズや、あるいは、JavaScript/Ajax全般+Webサーバーとの連携などのアドバイス&サンプル作成等 。A:jQchartなどでWeb用グラフ設置(エクセル→CSVやデータベースからWebグラフ生成)などのアドバイスやカスタマイズサンプル作成。B:ツリーメニューなどのカスタマイズサンプル。C:Google Mapsのカスタマイズ。etc...
【できないこと】 腕立て伏せ200回
【ライセンス】 私が今まで「かも日記」等で提供してきたコードの大半は、商用利用、改造、自由、連絡不要で、今後もそれらは変わりません。そして、この有料サポートによりカスタマイズコードなどが提供される場合でも、同様に、それらを商用利用しても改造しても自由です。ただし、制限のきついライブラリなどを使う場合は、各ライブラリのライセンスに準拠せざるを得ない場合があります。
【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いですが、何卒、ご了承ください ( _ _ b
//MTのテンプレートタグからYUIのtree用JSONを自動出力テストみたいな、JavaScriptのコメントにしておきます(ここへあとでJSONを記述する予定です)。 次に、Main Indexや、Category Archive、Date-Based Archive 、Individual Entry Archive などのYUIツリーを出力する予定のページの各テンプレートのhead部分へ次のように書き、各ページのhead内でtreeJSONのスクリプトが自動展開されるように準備しておきます。
<script type="text/javascript"> <!-- <$MTInclude module="treeJSON"$> //--> </script>これで、試しにブログを再構築し、ページのソースを開いてみて、、、
<script type="text/javascript"> <!-- //MTのテンプレートタグからYUIのtree用JSONを自動出力テスト //--> </script>このように展開されていれば、ここまでは成功です。
//Tree Data(ここへTrreeメニューのデータをJSONで書きます)
// ["_open"] はメニュートグルを開きます。
var treeData=[
["<b>かも日記</b>" ,
[
["_open"],
["エントリー " ,
[
["_close"],
<MTArchiveList lastn="9">
["<$MTArchiveTitle$>" , "<$MTArchiveLink$>"],
</MTArchiveList><MTArchiveList offset="9" lastn="1">
// ["<$MTArchiveTitle$>" , "<$MTArchiveLink$>"]
</MTArchiveList>["about:","http://jsgt.org/mt/archives/01/001705.html"]
]
]
]
]
]
["エントリータイトル","エントリーのURL"],の形式でとりあえず最新の9件(lastn="9")出力しています。配列の最後は「,」があるといけないので、その行だけ別建てにします。 offset="9" lastn="1" で最後の10行目だけを取り出せるか?と思ったのですが、私の勘違いなのか、バグなのか、うまくいかないので、今日はあきらめて、["about","...."]というリンクでお茶お濁しました(^^;。
//Header Script
//Tree Data(ここへTrreeメニューのデータをJSONで書きます)
// ["_open"] はメニュートグルを開きます。
var treeData=[
["<b>かも日記</b>" ,
[
["_open"],
["エントリー " ,
[
["_close"],
["【MT】MTのテンプレートタグからYUIのtree用JSONを自動出力" , "http://jsgt.org/mt/archives/01/001706.html"],
["【Movable Type】Treeのテスト" , "http://jsgt.org/mt/archives/01/001705.html"],
["【Webサービス】ブログに求人情報を掲載する" , "http://jsgt.org/mt/archives/01/001704.html"],
["Allabout更新 YUIコネクション+ランチャーパネル" , "http://jsgt.org/mt/archives/01/001703.html"],
["【JavaScript】自動セミコロン挿入と改行エスケープ" , "http://jsgt.org/mt/archives/01/001702.html"],
["【JavaScript】自動セミコロン挿入とドット演算子など" , "http://jsgt.org/mt/archives/01/001701.html"],
["【雑談】お月見" , "http://jsgt.org/mt/archives/01/001699.html"],
["【雑談】薄い人?" , "http://jsgt.org/mt/archives/01/001698.html"],
["【Movable Type】MT(2x)改造計画" , "http://jsgt.org/mt/archives/01/001694.html"],
// ["【MT】MTのテンプレートタグからYUIのtree用JSONを自動出力" , "http://jsgt.org/mt/archives/01/001706.html"]
["Testです","http://jsgt.org/mt/archives/01/001705.html"]
]
]
]
]
]
このJSON配列が、treeData という名前の変数に代入されたことを覚えておいてください。Treeメニューを作る時にこの名前を使います。
<link rel="stylesheet" type="text/css" href="http://jsgt.org/yui/2.3.0/yui/examples/treeview/assets/css/folders/tree.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/treeview/treeview-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>でも、JSONとYUIだけではtreeメニューは自動生成されません。下記のコードを追加します。テスト後は、js外部ファイルにしておくと、キャッシュが効くので良いかもしれません。また、YUIの読み込みと下記コードも、エントリー毎に書くのではなくテンプレートにた方がコード量を減らせます。
//(namespaceは使わなくても動作します)
YAHOO.namespace('tato');//カスタマイズした関数など用に名前空間を用意しておきます
YAHOO.tato.tree = function(id) {
this.tree = new YAHOO.widget.TreeView(id); //treeDiv1は表示するDIVのID名です
//Tree描画 by Array
this.mkTreeByArray = function (treeData,treeNode){
if(!treeNode)treeNode = this.tree.getRoot();
for(var i in treeData){
if(!(treeData[i][0]=="_open"||treeData[i][0]=="_close")){
var tmpNode = new YAHOO.widget.TextNode("" + treeData[i][0],treeNode, false);
if(typeof treeData[i][1] == "string"){
tmpNode.target= "sampleFrame";
tmpNode.href= treeData[i][1];
}
if(typeof treeData[i][1] == "object"){
if(treeData[i][1][0]=="_open")tmpNode.expand();
this.mkTreeByArray(treeData[i][1],tmpNode);
}
}
}
this.tree.draw();
}
}
そして、最後に、このツリーを起動させるおまじないです。
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);でページ構築後に起動したYAHOO.tato.treeIni内の
test1706.mkTreeByArray(treeData)でJSONデータを渡して自動構築します。
var fswt=fd=true; //フェイド無し
//初期化
YAHOO.tato.treeIni = function(){
test1706 = new YAHOO.tato.tree("menudiv1706");
//test1706.tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN); //フェイド処理用
//test1706.tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT); //フェイド処理用
test1706.mkTreeByArray(treeData);//ここでTreeデータを渡します
}
//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);
というわけで、出来上がり。
Fedora7を入れたので、時々手の空いた時にいじってみているのですが、
今日試しに、「json」と名前の付いたファイルってあるのかな?と」思って、
ふと、「locate json」と打ち込んでみたらありました。
全く見落としてましたがf^^;PHP5.2.0からデフォルトで追加されているようです。
Itproの下記レポートによるとこのJSON拡張は、Cで書かれているので、今までのPHPものよりも圧倒的に早いとのことです。
ちなみに、cat /etc/php.d/json.ini の中身は下記の通り
【PHPウォッチ】第31回 パフォーマンス向上など,数々の新機能を搭載したPHP 5.2.0リリース
http://itpro.nikkeibp.co.jp/article/COLUMN/20061205/256101/?ST=ittrend&P=2
PHPからJSON作成を扱う
http://itpro.nikkeibp.co.jp/article/COLUMN/20070307/264116/
http://jp.php.net/results.php?q=json.so&l=ja&p=wholesite
http://www.aurore.net/projects/php-json/
GAFがあんまり便利なので、ついやってしまう ? といけないので、再度リンクしておきます。
【Webサービス】ブログツールや広告を貼るときの注意(テストサンプルあり)
http://jsgt.org/mt/archives/01/000688.html
要するに、
つまり、この場合、Googleは、APIの機能を無料で提供する代わりに、APIを張り込まれたページすべてを書き換えることも出来る権限を手に入れます。まぁ、Googleを信頼するとしても、パスワードなどをそのページで入力できるようにするのは、個人情報保護法的にもレッドカードではないかな〜?という気がします。もちろん、これはGAFに限らず、ブログツールや広告など他のものにも当てはまるという基礎的?なお話ですけど。
更に、このAPIの場合は、Googleの先のWebサービス(RSSなど)をJSONで出力するわけですから、そこのWebサービス管理者ともページの管理権限をマッシュアップする(笑)ことになります。
基本的には、信頼できるサイトの、既にパブリックなデータを利用するということになると思いますし、とても便利で有用なサービスですが、どこで、どのように使うかは、セキュリティについても考えつつ利用するのが良いかな?と思います。
feed
titlelinkdescriptionauthorentries[]titlelinkcontentelem.innerHTML = entry.content (as opposed to using document.createTextNode). Corresponds to the <content> or <summary> elements in Atom and the <description> element in RSS.contentSnippetcontent attribute. The snippet does not contain any HTML tags.publishedDatenew Date(entry.date). Corresponds to the <published> element in Atom and the <pubDate> element in RSS.categories[]Google AJAX Feed API Developer Guide
http://code.google.com/apis/ajaxfeeds/documentation/
#GoogleがRSS用のプロクシを用意してくれ、それから応答を引き出すためのAPIをリリースしました、ということ?
ちょっと試してみます(下記、AtomフィードリストはGoogle AJAX Feed API経由の読み込みです)。
>
おお。
=ざっくり和訳=
AJAX Feed APIによって、AtomやRSSフィードをJavaScriptだけで使うことができるようになります。あなたは、それらのフィードと、自分のコンテンツや、他のAPI(たとえば、Google Maps API)を簡単にマッシュアップすることができます。
APIを使うのには、APIキーの申し込みが必要です。
JavaScriptとXMLHttpRequestは、Same origin policyを使用します (訳注:要するに別ドメインとはアクセスできないというあのルール)。これによって、あるクラスのスクリプト用の攻撃からユーザを保護しますが、多くの開発者はAjaxベースのmashupsにそれらを書くことができません(訳注:ので不便です)。
Google AJAX Feed API はウェブで利用可能な内容の特定のタイプのために簡単な回避策をこれらの制限に提供します。
Google AJAX Feed API が、がどうユーザセキュリティを保持するかに関するその他の詳細に関して以下の security notes を見てください。
バイナリフォーマット"BISON" - 概念実証が発表に
http://journal.mycom.co.jp/articles/2007/02/20/bison/
Introducing BISON - Binary Interchange Standard and Object Notation
http://www.kaijaeger.com/articles/introducing-bison-binary-interchange-standard.html
計算機デモ
http://dl.kaijaeger.com/bison/examples/calculate/bisonclient.html
Serialization/deserialization デモ
http://dl.kaijaeger.com/bison/examples/echo/bisonclient.html
Version 1, Revision 0 (April 14, 2006)
BISON (Binary Interchange Standard and Object Notation)
specification (working draft)
http://dl.kaijaeger.com/bison/BISON_specification_1_0.pdf
#ちょっと気になる取り組みです。
GoogleがどんどんJSON/JSONP化を進めてますね。
JSON in GData
http://google-code-updates.blogspot.com/2006/11/json-in-gdata.html
Google Data APIs - JSON Samples
http://code.google.com/apis/gdata/samples.html
Using JSON with Google Data APIs
http://code.google.com/apis/gdata/json.html
[IBM]XML から JSON を生成し、Ajax で使う
http://www-06.ibm.com/jp/developerworks/web/library/x-xml2json/
#XSLT V2 を使い、XML で保存されたデータを JavaScript コードとしてエンコード
Serializing SPARQL Query Results in JSON
W3C Working Group Note 4 October 2006
http://www.w3.org/TR/2006/NOTE-rdf-sparql-json-res-20061004/
参考:
SPARQL Query Language for RDF
W3C Working Draft 4 October 2006
http://www.w3.org/TR/rdf-sparql-query/
第11回 JSONがRFCになり、どんどんこなれるAjaxサービス
http://www.atmarkit.co.jp/fwcr/rensai/ajaxwatch11/01.html
#おなじみの川俣 晶さんの連載ですが、、、
#>「RFCの主要部分を高橋登史朗さんがざっくり訳しています。」
#ぐぁっ、あの手抜きの和訳が@ITで広く告知されてる、、、。うう。。。でも、ま、知られてしまったらしょうがないか。<開き直り;;;。<ちゃんと訳せばいいじゃん<今は締め切り押しているので無理。<開き直るしか;;
追記2006.9.2 でも、やっぱり恥ずかしいので;;、ちょっとだけですが推敲して、整形して、訳注を足しておきました<でも訳はまだ途中のまま。
Remote JSON - JSONP
http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
Web 2.0で変わるWebプログラミングの常識:
実は、Ajaxのウラにこそ勝算がある (2/5)
http://www.itmedia.co.jp/enterprise/articles/0608/25/news010_2.html
Yahoo! Web Services の Using callback=function:
http://developer.yahoo.com/common/json.html#output
追記2006.8.27 JSON with Padding Test
http://www.geocities.jp/stormriders999/jsontest.html
追記2006.8.27 [json]ブラウザからJSONで呼び出せるサービス一覧
http://d.hatena.ne.jp/shinichitomita/20060825/1156504036
1.ドメイン超えをするためにXHR+プロクシではなくJavaScriptのロードを使う、
ということと、
2.着信コールバック名を、クライアント側からURLクエリとしてサーバーへ渡し/返してもらう、ことで着信後の動作を自動化する
という仕組みのようです。信頼のできる関係の中で、有益な方法かなと思います。
サーバーからJavaScriptデータの着信コールバックを渡す仕組み自体は、私の関係では、古くは、たとえば10年前のNewGameWeb 用ランキングなどもそうですけれど、普通に使われていた手法だと思いますが、この新しい所は、「XHRのクロスドメインを超えて最近普及してきたWebサービスをクライアントがコールバックを指定する形で利用したい」という歴史性?かもしれません。
まだ、ざっとみただけで断言はできないので、勘違いなど指摘いただけると有り難いのですけれど、この場合のリスクには要注意かなと思います。クライアントの指定するスクリプトをサーバーが通過させなければならないからです。まさに、XHRが禁止したクロスサイトの攻撃が解禁されるわけです。
信頼不能な不特定多数のクライアント入力を前提とした(たとえば、掲示板など)では、どんなコールバックを渡されるかわからないので、防御構築には、結構手間が掛かるかもしれません。
このJSONPのページにある事例では、(new Date()).getTime();をuidに使用することで、リクエストとレスポンスの整合をはかっているようですが、クライアントの時間はあまり信用できないことと、getTime()だけでは、経験的には、複数入力時に衝突する可能性も低くないような気がしますし、推測も簡単そうです。(ちなみに、程度の違いで気休めといわれてしまうかもしれませんが、Aja