05 | 2017/06 |  07

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

JSON形式データ取得テスト

MyFc2Blogファイルサーバーに送信済みのテキストファイル(callback関数の引数としてJSON形式データを格納)から、データを取得してみる

ここをクリックしてみてください。

すると、この下の行の文字列がサーバーから送られてくる文字列に入れ替わります。

ここがサーバーからの文字列に入れ替わります。

一体何をしたのか?

Fc2ブログのデータファイルサーバーに様々なデータを置いておいて、その中から随時データを呼び出してみたいのです。それが可能となれば、各エントリイの参照元一覧を随時更新していくコードを書くことが出来るのではないか、と推測しているためです。

そこでこのエントリイでは、初めて作成してみたJSON形式のデータをファイルサーバに置いて、そこからデータを取り出す実験を行ってみました。

ここでの実験は、IE7、FireFox2及びOpera9で作動を確認しましたが、Sleipnir2で閲覧する場合には、「ActiveXのダウンロードを許可」をOnにしたり、キャッシュや履歴を削除しないとうまく作動しないようです。自動的に当該エントリイのキャッシュを削除するコードを組みたいのですが、その方法が分かりませんので手の打ちようがありません。

▲ToTop

動的にファイルサーバーから取得するJSONデータの形式

取得する形式は或る目的をもって
  "a":{"a-1":"何やらかんやら"},・・・,"b":{"b-n":"hogehoge"}
としました。

aはMyFc2ブログのエントリイナンバーを、a-1等は参照元エントリイの重複数を、"何やらかんやら"は参照元URIを想定して、こうしたJSON構造にしてみました。

この形式のJSONデータを取得できない限り、当該ブログへの参照元一覧を作ることは出来ないので、こうした構造のJSONデータの取得を試してみたのです。

Javascriptコードについてはこのエントリイの末尾に記しておいて、後ですぐ見られるようにしたいと思います。

ここでの作業の性格

Ajaxなコードを利用した訳ではなく、単にスクリプトタグを動的に挿入しただけです。JavaScriptの外部ファイル読込みを利用してクロスドメインプログラミングを可能にする方法の1つを試してみたかったのです。

ここでは、一方で、動的にインクルードする外部スクリプト内で関数の実行を定義し、他方、呼び出し元HTML内に記述したコード(最終的にこのコードを利用する時には、headタグ内でインクルードするjsファイルの中に書くことになりますが、実験なので当該documentタグ内にスクリプトを記述)内で呼び出す関数を定義し解読させる、という逆転した方法を───この方法はコールバック関数においてはよく使われるようですが、良くは分かっていません。───初めて使ってみました。

JSONP(JavaScript Object Notation with Padding)なるものに一歩でも近づくことが出来るように、学習に方向性を持たせたつもりです。

JSONPなるもの

これについては、様々なサイトを閲覧させていただき、その一端を知ったつもりです。

───JSONP関連サイト───
  1. throw Life - 超シンプルなJSONP入門
  2. JSON | mg.to
  3. snippets from shinichitomita’s journal - ブラウザからJSONで呼び出せるサービス一覧

そもそもJSON形式のデータを提供しているサイトから、データを取得するためのコードはWebサイト上に沢山見つかるのですが、Fc2ブログ内の自分のファイルサーバー(ドメインは異なる)からデータを取得することを試みたいので、JSON形式データを提供するサーバーからのデータ取得は、当面関心外のことであって、JSONに言及した多くのサイトは直接そのままでは参考にならないのでした。

上記関連サイトリスト3を見て、沢山のJSONデータ提供サイトがあることを初めて知った程、これまでJSONとは無縁な世界でコードを書いていましたから、無理もないことなのですが、Ajaxの登場以来、否活用以来、Javascriptの世界は急速に拡大進展していることを改めて知らされました。

▲ToTop

JSONデータを取得するJavascriptコード

上記の1にリストアップしたサイトを大いに参考にさせていただき、また jQuery のextend()メソッドを参考にしてコードを作りました。

JSONデータファイル(ファイル名:jsonTest.js)
callback({
  "1":{
    "text1-1" : "これはサーバーから取得した文字列です。" ,
    "text1-2" : "これもサーバーから取得した文字列です。" ,
    "text1-3" : "更にこれもサーバーから取得した文字列です。" ,
    "text1-4" : "更に更にこれもサーバーから取得した文字列です。"
  },
  "2":{
    "text2-1" : "まだパイプの煙" ,
    "text2-2" : "まだまだパイプの煙" ,
    "text2-3" : "まだまだまだパイプの煙" ,
    "text2-4" : "まだまだまだまだパイプの煙"
  }
});

赤いボックスをドラグ&ドロップするとリサイズ出来ます。

このエントリイ内で記述したJavascriptコード
  //callback関数の引数であるオブジェクト内のプロパティを取り出す
function callback(){
  var x =0, txt ="", obj, obj2;
    //jQueryのObject取得方法を参考に上記のJSON形式の
    //オブジェクトからプロパティを取得した。
  while ( (obj=arguments[x++]) !=null ) {
    for (var key in obj){
      for (var key2 in obj[key])
      txt +="<div>" + key + " : " + key2 + " = "+obj[key][key2] + "</div>";
    }
  }
  document.getElementById("result").innerHTML = txt;
    //上の行でHTML内にcallback()関数の実行結果を挿入した直後に、
    //動的に挿入したscriptタグを削除する。
  var removeElem = document.getElementById("appendedScript");
  if (removeElem) document.body.removeChild(removeElem);
}

  //scriptタグを挿入する
function insertTest(url){
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  s.id = "appendedScript";
  document.body.appendChild(s);
}

赤いボックスをドラグ&ドロップするとリサイズ出来ます。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/551-a893bc43

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200709031933
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。