html2jsを用いたサイトのコンテンツ充実化/社内の見える化

このエントリーをはてなブックマークに追加
投稿者:chikunai 投稿日時:2014-02-02(日) 01:46

html2jsを使った古典的テクニックと活用の仕方の紹介です。自分のリハビリと他コンピュータ言語の学習も兼ねてます。

そもそもhtml2jsとはなんぞや、という方の為にご説明すると、htmlをJavaScriptへ変換するプログラムの事を指します。html2jsの2は、英語読みのトゥーと発音します。toを2と置き換える記法です。ダジャレではなく、よく使われています。
これだけだと、ふーん。という感じだと思いますが、プラスαで組み合わせると、面白い使い方ができます。マッシュアップが流行した頃に使われ、いまでも使っているところもあるかも。

想定する要件のイメージ

  • 自社サイトにRSSから取って来たブログやランキング等のタイトル一覧をのせたい。
  • 他社サイト(ポイントサイト)に、自社のランキング情報を掲載してもらいたい。
  • 社内のグループウェアに、すぐに取りかからなければならないタスクや、ホットトピック。さらには売上情報などを出したい。

通常、自社サイトに色々な情報をブロック単位で追加するには、そのための開発が必要です。
また、他社サイトへの情報提供ともなると、APIの公開や、FTP等を使ったファイル連携などで、情報を提供して公開してもらう必要があります。そのための環境構築や開発がひつようになります。
社内のグループウェア、ポータル、ダッシュボードへの情報の追加も、開発が必要になります。利用しているパッケージ製品によっては追加出来ることに制限があり、融通のききにくい状況です。

そんな中この記事を見ているあなたが、エンジニアではなく、サイト運営担当者だったりしたら、時間のかかり、難しい課題をクリアしなければならない開発を避け、簡単な方法で実現できたら、うれしいはずです。JavaScriptのscriptタグが差し込めれば実現できます。関連スクリプトも社内にエンジニアがいれば、簡単に出来ます(ニヤリ

二つのURLを用意します。

  1. html2js(下でご紹介します)
  2. JavaScript化したいHTMLファイル(ご用意下さい)

html2jsは今回、お好みでPHPとRubyの二つご用意しています。
URLを指定する際、?url=のあとにJavaScript化したいURLを指定します。

PHP版(php.iniにallow_url_include = Onを入れて下さい)
http://chikunai.sakura.ne.jp/html2js.php

  1. <?php
  2. /*
  3.  * HTML to JavaScript
  4.  */
  5.  
  6. header('Content-type: application/x-javascript');
  7. $fp = fopen($_GET['url'],"r");
  8. while(!feof($fp)) {
  9.   $line = fgets($fp);
  10.   print 'document.write(\''.rtrim($line,"\n").'\');'."\n";
  11. }
  12. fclose($fp);
  13.  
  14. ?>

Ruby版
http://chikunai.sakura.ne.jp/html2js.rb

  1. #!/usr/local/bin/ruby
  2. #
  3. # HTML to JavaScript
  4. #
  5.  
  6. require 'open-uri'
  7. require 'cgi'
  8.  
  9. cgi = CGI.new
  10.  
  11. puts cgi.header('application/x-javascript');
  12. open(cgi['url']) {|f|
  13.   f.each_line{|line|
  14.     print "document.write('#{line.chomp}');\n"
  15.   }
  16. }

Python版
も用意したかったのですが、うまくデータが取れないので実験中です。

つぎに、JavaScriptに変えたいHTMLを用意します。楽をしたいため、単純にhallo php、hallo rubyと書かれたHTMLファイルです。

PHP用
http://chikunai.sakura.ne.jp/hellorphp.html

Ruby用
http://chikunai.sakura.ne.jp/helloruby.html

ではこれを元にscriptタグを書くと、こうなりますよね。

  1. <script type="text/javascript" src="http://chikunai.sakura.ne.jp/html2js.php?url=http://chikunai.sakura.ne.jp/hellophp.html"></script>
  2. <script type="text/javascript" src="http://chikunai.sakura.ne.jp/html2js.rb?url=http://chikunai.sakura.ne.jp/helloruby.html"></script>

このscriptタグを貼付けた結果は、以下のページで確認出来ます。ページのソースも開いて、直接HTMLに書いていない事を確認して下さい。

http://chikunai.sakura.ne.jp/html2js_test.html

わかったけど、ブログのタイトル一覧とか、ランキング一覧とかどうするの?

今回実験で用意したJavaScript化したいコンテンツをプログラムに差し替えて下さい。RSS又はデータベースから入手した結果と、デザイナーが用意したテンプレートを組み合わせた単純なプログラムになります。

それもサンプルで示して?

、、、では続く、とします。

ちなみに今回html2jsをソースを公開しましたが、極めて単純にしているので、以下を考慮した方がよいです。

  • サイト利用だと、url指定の場合は自社ドメインに限定。またはサーバの特定のファイル名を指定する方式に変える(ファイル名はハッシュ化したほうがいいと思いますが)。そうしないと、勝手に第三者に使われてしまいます。
  • 社内利用だと、プロキシを通す必要のある場合があります。



コメント(0)

新しいコメントの投稿

このフィールドの内容は非公開にされ、公表されることはありません。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <table> <tr> <th> <td>
  • 行と段落は自動的に折り返されます。
  • You can use BBCode tags in the text. URLs will automatically be converted to links.
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode> The supported tag styles are: <foo>, [foo].
  • You may insert videos with [video:URL]
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。

書式オプションに関するより詳しい情報...

CAPTCHA
この問題はユーザが人間であるかどうかをテストし、スパムによる自動投稿を防ぐためのものです。
Image CAPTCHA
Enter the characters shown in the image.
Drupal theme by Kiwi Themes.