カテゴリー: Webノウハウ

ウェブサイトやブログの構築・運用に役立つ記事

  • 『Googleニュース用RSSジェネレータ』で収集したニュースをPHPで編集・成形してWebサイトに表示する

      このブログで以前に紹介した“『Googleニュース用RSSジェネレータ』と『単眼RSS』を使って労働関連に関る最新ニュースのコンテンツを作る”の続編です。 ニュースの表示方法をもう少しカスタマイズしたくなったので、単眼RSSを使わないやり方で編集する方法を模索しました。以下を紹介します。
     
    [概要]
    ・googleニュースをPHPのSimpleXML拡張モジュールを使ってXMLオブジェクトに変換、さらにarray型データに変換する
    ・array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

      
    1.googleニュースをPHPのSimpleXML拡張モジュールを使ってxmlオブジェクトに変換、さらにarray型データに変換する


     SimpleXML拡張モジュールは、php5.0.1以上から対応しているので、最近のレンタルサーバなら殆ど利用できると思います。まず、Googleニュース用RSSジェネレータ<http://g.1o4.jp/news-rss.html>でURIを生成します。そのURIで得たデータをSimpleXMLElement、SimpleXMLIteratorを使ってarray型に変換します。というような操作が、phpマニュアルサイトの「User Contributed Notes」のコーディング例 http://php.net/manual/ja/class.simplexmliterator.phpで紹介されていましたので、参考にしました。
      
    その例の中にあるxml2array()関数を使用した場合。

    [PHP コーディング例]  

    [crayon lang=”php”]
    // 例:uriは労働運動関連ニュースを10件取得する場合
    $uri = “https://news.google.com/news?ned=us&ie=UTF-8&oe=UTF-8&q=%E5%8A%B4%E5%83%8D%E3%80%80%E9%9B%87%E7%94%A8&output=atom&num=10&hl=ja”;
    // この関数は、コーディング例にあるユーザ関数です。詳細は、上記のphpマニュアルサイトのリンク先で確認してください。
    $rssAtomArray = xml2array($uri);
    [/crayon]

      
    2.array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

    [php コーディング例]

    [crayon lang=”php”]
    $aWork = array(); // Webサイト表示に必要な項目のみ、取り出して保持しておく領域
    $aSortKey = array();// ソート用

    // Webサイトの表示に必要な情報だけを取り出す
    foreach ($rssAtomArray[“entry”] as $row){
    $jpDate = new DateTime($row[“updated”][0]);
    $jpDate->setTimezone(new DateTimeZone(“Asia/Tokyo”));
    array_push($aWork, array(“updated” => $jpDate->format(“Y/m/d H:i:s”), “title” => $row[“title”], “id”=> $row[“id”]));
    array_push($aSortKey, $jpDate->format(“Y/m/d H:i:s”));
    }
    array_multisort($aSortKey, SORT_DESC, $aWork); // ニュースは、更新日時の降順でソート。

    // html成形
    $cHTML = “

    “;
    foreach($aWork as $row) {
    $cHTML .= “

    “;
    $cHTML .= “

    “;
    $cHTML .= “

    “;
    }
    $cHTML .= “

    “.$row[“updated”].”
    “.$row[“title”][0].”

    “;
    echo $cHTML; // ブラウザに表示
    [/crayon]

    [説明]
    googleニュースで得たarrayデータの要素(=xmlのタグ)

    ・"updated" :ニュースの更新日時。atom(RFC3339) 形式の世界標準時だったので日本時間に変換
    ・"title" :ニュースのタイトル
    ・"id" :ニュースのリンク先情報

    これらの要素は、1.の処理の$rssAtomArrayをprint_r()で出力して、確認しました。
    今回は、googleニュースの場合ですが、他のxmlオブジェクトは、違ってくるかもしれません。
    後は、Webサイトに合わせて、htmlドキュメントを成形して、表示すればOKです。

    余談:
    XMLオブジェクトをArray型に変換する方法は、ネットで検索すると、json_decode、json_encodeを利用すると簡単にarray型に変換できる、と出てきます。試してみると、googleニュースで取得したデータは、階層が深いのか?うまく変換できませんでした。今回、紹介したSimpleXML拡張モジュールには、イテレータが用意されているので、それを使えばXMLオブジェクトのハンドリングは容易になりますね。
    (結局、phpマニュアルサイトのコーディング例を参考にしちゃうんですが)

  • BlenderでモデリングしたワイヤーフレームをFlashで描画再生してみる。

    はじめに

      今回の思いつきは、『Webサイトのコンテンツで、多面体のワイヤーフレーム画像を動かしたい。』です。幾つか実現方法はあると思うのですが、Blenderでモデリングを行い、そこで作られた頂点座標情報を取り込んでflashで再生する、という方法を選びました。
     
    1.Blenderでモデリング
       Blenderは、オープンソースの3次元CG開発ソフトウエア(統合開発環境)ですね。だいぶ前に同様のCGソフトのMetasequoiaで何かやろうとチャレンジした事があったのですが、挫折しました。そこでBlenderです。使い方は、次のサイトを参考にさせて頂きました。
    「Blender入門」(http://www.blender3d.biz/)大変感謝しています。

     以下、何とかリンゴをモデリング。

    blender
     

     

     

     


    2.頂点座標情報の取り込み
      モデリングしたリンゴの頂点座標情報の取り込みは、BlenderのExport機能で情報をファイル出力して、そのファイルから読み込む事にしました。幾つかあるファイルフォーマットの中から、Wavefront(.obj)フォーマットを選択。 このフォーマットで出力された3Dモデルデータが一番扱い易いと判断しました。 Wavefrontフォーマットの説明は、次のサイトを参考にさせて頂きました。
    「OBJファイルフォーマット」(http://www.hiramine.com/programming/3dmodelfileformat/objfileformat.html)
    大変感謝しています。
     OBJファイルフォーマットは、頂点座標値(x,y,z)データ、多面体の面(メッシュ)を構成する頂点座標を指すインデックス情報や、モデリングした時の法線ベクトルの情報等が含まれています。今回は、頂点座標値(x,y,z)データ、多面体の面(メッシュ)を構成する頂点座標を指すインデックス情報を利用します。
      
    3.flashで再生する
      objファイルを読み込んで描画するプログラムをAS3.0でコーディング。AS3.0を選んだのは、ブラウザ上で画像を操作できるインターフェース(各種イベントを拾える)が用意されている点がいいと思ったから。 AS3.0のコーディングは、次の本を参考にさせて頂きました。
    「C++による簡単実習 3次元CG入門」(http://www.morikita.co.jp/books/book/2149)
    言語はC++ですが、AS3.0でプログラミングする際に大変役に立ちました。
     [ワイヤーフレーム]

     wire

     
     

     

     

     

     

     

     

     

    [面を塗りつぶし  ]

    apple apple2

     

     

     

     

     

     

     

     

     

    今回はここまでです。

     

  • 『Googleニュース用RSSジェネレータ』と『単眼RSS』を使って労働運動に関る最新ニュースのコンテンツを作る

     今回は自分が興味のあるニュースを拾って、Webサイトに時系列で一覧表示する方法の紹介です。

     特定のニュースを収集する方法は、例えばニュースを配信するサイトが提供するRSSフィード情報をRSS対応ブラウザの「RSSリーダー」とか、「フィード」と呼ばれる機能を使って自動収集しておく、なんてやり方がありますね。でもこの方法だと、ブラウザのRSSリーダーで読む事しかできないので、何とかWebサイトに表示してニュースタイトルをクリックするとリンク先に飛べるようにしたいと思います。。。まずは、

    1.『Googleニュース用RSSジェネレータ』で、気になるキーワードが含まれるニュースのRSSフィードを生成する
      例えば、[雇用]というキーワードでRSSフィードを生成します。パラメータを選択して最後に「RSS生成」ボタンを押します。

     [Googleニュース用RSSジェネレータ  例)]

    ブログ画像4

     

     

     

     

     

     

     

     

     

    次に、

    2.ブログパーツ『単眼RSS』で、1で生成したRSSフィードによって自動取得した「ニュースタイトル」をリスト化するブログパーツを作成する
      『単眼RSS』のサイトで、いろいろパラメータ(簡単なもの)を設定します。1で生成したRSSフィードURLを入力します。最後に「貼付けコード生成」ボタンを押します。
      今回は、[雇用][労働]の2つのキーワードでニュースを選別してリスト化できるようにしました。

      [RSSフィード登録画面 例]

    ブログ画像5

     

     

     

     

     

     

     

     

     

    そして、

    3.2で生成したブログパーツをWebサイトにはめ込んでみる
      こんな感じになります。 如何でしょうか。こんな風にニュースが選別されて表示されていると、世の中の動きも把握しやすくなるのではないでしょうか。

    労働運動関連ニュース

     

    (2017/1/31) 「単眼RSS」を利用するとad広告が出てしまうため、削除しました。代替案は、2017/1/31の投稿“「Googleニュース用RSSジェネレータ」で収集したニュースをPHPで編集・成形してWebサイトに表示する”を参照してください。

  • 『Xmedia Recode』を使ってスマフォやデジカメで撮った動画をmp4形式に変換する

     前回のブログで紹介したメディアプレイヤー(Strobe Media Playback)が再生できる動画ファイルの形式は、mp4かflvの2択になるのですが、スマフォやデジカメで撮った動画ファイルの形式が、3gpp、m2tsだったりしたら困ってしまいますね。こんな時は、変換ソフトを使って変換してしまいます。今回はいろいろある変換ソフトの中からフリーソフトの『Xmedia Recode』(※1)を紹介します。

     このソフトは多数の形式に対応していて、大概の機器で撮った動画は網羅しているのではないでしょうか。変換時のパラメータも豊富で、分からない設定も多々あるのですが、動画再生に専門的な知識が無くてもデフォルトの設定で大体うまくいきます。この辺の詳細についてはいろいろなブログで紹介されているのでここでは省略します。m(..)m

      さて、このソフトを選んだ外せない理由がひとつあります。それは変換時の設定で、「ストリーミング Fast-Start」という設定がある、ということです。

    [Xmedia Recode 画面抜粋]

     この設定をして変換した動画ファイルは、ダウンロードしながら動画を再生できるようになります。(※2) 数十分の動画ファイルを全部ダウンロードしてから再生が始まるようでは、待つのが面倒になりますからこの設定は必要でした。では実際にどうなるか試してみましょう。

     桜のある風景(再生 00:07) 「ストリーミング Fast-Start」設定無し

     桜のある風景(再生 00:07) 「ストリーミング Fast-Start」設定有り

     どうでしょうか。7秒と短い動画ですが、「ストリーミング Fast-Start」設定無しの動画は、スタートボタンを押してから少し待ってから再生が始まることが感じられますね。youtube等では当たり前のように感じている再生ですが、自分で用意する場合はこんな設定が必要になりました。

  • Webサイトに組み込むメディアプレイヤー(Strobe Media Playback)の見せ方を一工夫


     動画をWebサイトで再生する方法の一つにメディアプレイヤーを利用する方法があります。
    メディアプレイヤーにもいろいろありますが、今回はオープンソースの有名どころでFlashで再生するStrobe Media Playback(※1)を利用します。
    インストール、動作パラメータの設定等の細かい説明は、いろいろなブログ等で公開されているのでここでは省きます。m(..)m
      さて、”見せ方を一工夫”ですが、タイトルにまでして実は大したことではありません。
    (本当に) 普通は、そのまま貼り付けるとこんな感じです。

     一工夫は、タイトルをクリックすると展開するようにしました。こうすることで、動画の一覧から見たい動画を選択できるようにした際、ちょっとすっきりします。

    桜のある風景(再生 00:07)

     方法は、aタグをクリックしたしたら、aタグ要素の下にメディアプレイヤー用のオブジェクトを追加する、です。コーディング例は以下の通り。

    [aタグの例]

    <p><a onclick="fOpenMovie(this, '動画ファイル名');return false;" href="javascript:void(0);">桜のある風景(再生 00:07) </a></p>

    [メディアプレイヤー用のオブジェクトを追加するjavascript 関数の例  fOpenMovie()]

    function fOpenMovie(oPara,strURL){
        // aタグのテキストを取得
        var n=oPara.firstChild;
        var aTagText ="";
        while(n){
            if(n.nodeName=="#text") aTagText = n.nodeValue;
            n=n.nextSibling;
        }
        // objectタグの生成
        var strValue = "src=" + encodeURIComponent(strURL);
       
        var strObjectTag = String();
        strObjectTag = "<span>" + aTagText + "</span><br />";
        strObjectTag = strObjectTag
                     + "<object width='470' height='320'>"
                     + "<param name='movie' value='(swfのURL) StrobeMediaPlayback.swf'></param>"
                     + "<param name='flashvars' value='" + strValue + "'></param>"
                     + "<param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param>"
                     + "<param name='wmode' value='direct'></param>"
                     + "<embed src=~(swfのURL)StrobeMediaPlayback.swf' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='direct' width='470' height='320 flashvars="
                     + "'" + strValue + "'></embed>"
                     + "</object>";

        // オブジェクトを追加する。
        var oElements = oPara.parentNode;
        oElements.innerHTML = strObjectTag;
        return false;
    }

    ※1 Strobe Media Playback ダウンロードサイト
    http://sourceforge.net/projects/smp.adobe/files/
     

  • 問い合わせフォーム 「CreamForm 1.0 」を使用してみた。

     今やCMS(content management system)といえば、WordPressが代名詞的な存在になっていますね。けれども、個人的に管理しているサイトではMTOS(Movable Type Open Source)を使用しています。

     そのサイトでお問い合わせの機能を組み込みたくて、「CreamForm1.0」(※1)を見つけました。
    組み込んでみたところ、こんなエラーが!

     ”テンプレートファイルの読み込みが出来ませんでした: 許可されない場所からテンプレートファイルを読み込もうとしました。”
    ”plugins/CreamForm/tmpl/list.tmpl”

     原因は、Template.pm内、load_file()においてlist.tmplが見つからずにエラーになっていました。MTOSのバージョンアップに伴い、セキュリティ強化対策でプラグインのテンプレートをチェックする際、フルパスで一致しないとダメにしているようです。(ディレクトリートラバーサルに関係した対策か・・・・な?)
    対応として、CreamForm/View.pmのテンプレート定義パスをフルパスに変更して、アップロードしました。

    変更前
    sub _list_tmpl_path { 'plugins/CreamForm/tmpl/list.tmpl'; } # list template path
    sub _delete_tmpl_path { 'plugins/CreamForm/tmpl/delete.tmpl'; } # delete template path
    sub _detail_tmpl_path { 'plugins/CreamForm/tmpl/detail.tmpl'; } # detail template path

     

    変更後
    sub _list_tmpl_path { '(フルパス)/plugins/CreamForm/tmpl/list.tmpl'; } # list template path
    sub _delete_tmpl_path { '(フルパス)/plugins/CreamForm/tmpl/delete.tmpl'; } # delete template path
    sub _detail_tmpl_path { '(フルパス)/plugins/CreamForm/tmpl/detail.tmpl'; } # detail template path

    バージョンアップによって、他が動作しなくなることってよくあるんですよね。
    今はいい感じに収まっています。
    組合関係のサイトに構築に限らずいろんなところで活用できるプラグインだと思います。

    ※1 CreamForm1.0
        http://marooon.com/web/2011/10/movabletype-creamform.html

     

     

  • メモ書きツール:ライプ

    ちょっとしたメモ、を取る時のお役立ちアプリを紹介します。

    手帳感覚でツールにメモる。

    保存先がクラウドなので、PCで仕事中にメモしたものを出先でモバイルからチェック、なんてことができちゃう。

    なかなか便利そうです。

    wri.pe = ライプ って、write(書く)とtype(タイプ)の複合語でしょうか。

    記事紹介はこちら

     Webブラウザだけで利用できるシンプルで軽快なメモ帳アプリ

    ライプサイトはこちら  https://wri.pe/

  • ブログ機能で労働組合ウェブサイトを活性化しよう!

    労働組合の活動で重要なものはいくつかあります。

    定期的に機関紙などを発行して組合員間で情報を共有することはとても重要です。

    さらには、組合用のブログがあるといいでしょう。
    ブログであれば、機関紙のように印刷やコピーの手間も無く、比較的簡単に、そして早く情報発信できます。
    そして、コメントなどをもらうこともできる双方向の交流によって、親しみのある身近な存在の組合になります。

    ブログにも無料で使えるものから、有料のもの、更には業者に頼んで制作してもらう本格的なものまで様々あります。
    それぞれに利点・欠点があり、単に安ければいい、あるいはお金を使えば効果が出るというものではありません。

    また、ブログと言っても文字通り日記のようにブログ記事を載せるだけでなく、固定的なページを作ったり、掲示板など様々な機能追加が可能です。
    ツイッターやフェイスブックなどのソーシャルネットワークとうまく連携することも重要です。

    利点を欠点を正しく把握し、時に私たち企業組合コンピュータユニオンをうまく利用して効果的なウェブサイトを運用してください。

    そのためのノウハウをこのブログを使ってご説明していきます。