開発ブログ

カレンダー

<< July 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

  • RPGツクール画像を使ってマップスクロール(CSS SPRITE)
  • CSS SPRITEというテクニックを使ってマップスクロールを作ってみました。

    通常、Webサイトには多数の画像を表示していますが、その画像を一枚の画像としてまとめたものを読み込み、CSSのbackground-imagebackground-positionを用いて画像の必要な箇所だけマスクのようにして画像を表示するというものです。
    DesignWalkerさんによると、YouTubeの背景もこの方法を用いているようです。

    これを見ていて、ふと思い出したのが、RPGツクールといわれるゲーム作成ソフトの背景画像。



    このような画像を活用するには、CSS SPRITEを活用するといいのではないだろうか?

    そう思って作ってみたのがこちら(IE限定。WIN+IE7で動作確認)。
    FireFoxでも動かないことはないのですが、非常に重いです。。
    まずは、IEだけでの公開です。

    単なるRPG系のマップスクロールロジックを作るだけであれば、IMGタグをマップチップの分だけ並べて、JavaScriptで主人公の周囲の情報を取得、その呼応する画像アドレスをSRC属性として書き換えればいいのですが、今回はCSS SPRITEを使っての実装です。

    人がテクテク歩く画像の切り替えと、地図背景の切り替えにCSS SPRITEを使用しています。
    ちょっと処理が入り組んでいるのでソースの解説は割愛しますが、これを基にゲームを作った人がいたら是非とも教えてください。

    参考URL
    • coliss:CSS SPRITEのサンプルが多数取り扱われていました。
    • エスカフラーチェLLC:体感速度が速くなったという報告がありました。
    • PHPプロ:オンラインでの結合ツールの紹介がされてます。

| 開発関連 | 20:38 | comments(2) | trackbacks(0) |

  • 特定のIDを取得するブックマークレット
  • ブログの新着やランキングなど、ユーザのブログへのリンクが沢山あるページから、ユーザのIDだけ抜き取るブックマークレットを作ってみました。

    ブックマークレットって何ですか、という方のために、簡単に説明。
    通常、ブラウザのブックマークには「http」から始まるアドレスが登録されているのですが、ここにJavascriptの処理を記載することでその処理を実行するという技術です。登録の仕方は、はてなブックマークレットのページが詳しいので、そちらを参照ください。

    さて、ページにあるアドレスから特定の語句を抜き取る方法ですが、以下のように実装します。尚、今回はアメーバブログを例に書いていますが、他のサービスでも同様に考えてよいと思います。
    var n=0;var t=new Array()
    for(var i=0;i<document.links.length;i++){
    u=document.links[i].href;
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    document.write(t.join("<br />"));
    void(0);
    ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

    document.links.lengthが本文にあるリンクの数で、損際する分をforループで繰り返し、そのリンクのアドレスであるdocument.links[i].hrefを「/」で分割します。分割した値は配列に格納されます。例えば、「http://ameba.jp/nakano-neko」というアドレスを分割した場合は、以下のようになります。

    配列0番目→http:
    配列1番目→
    配列2番目→ameba.jp
    配列3番目→nakano-neko

    3番目を取得すれば、ユーザーIDがわかるわけです。

    アドレスによっては「http://nakano-neko.ameba.jp/」
    というケースもあります。この場合は、まず「/」で分割して2番目を取得、さらに取得した値を「.」で分割して、0番目を取得すればOK。この処理を配列tn番目に入れておきます。ループが終わったら、配列tjoinを使って改行コードで結合して、「document.write」で画面に表示させます。

    但し、このままだと全てのリンクに対して処理しようとしてしまいますので、アメーバブログの場合だと、プロフィールページの「http://profile.ameba.jp/ユーザID」、もしくはブログページの「http://ameblo.jp/ユーザID」だけを対象にするために、更に以下の処理を記述します。

    アドレスを分割する前に、そのアドレスが上記の条件を満たすかどうかを確認します。つまり、アドレスに「http://profile.ameba.jp/」「http://ameblo.jp/」を含むかどうか、という条件を追加すればいいというわけです。いろいろな方法がありますが、今回はindexOfという関数を使っています。これは、文字列変数.indexOf("指定文字")と記述すると、「文字列変数」の中に指定文字が含まれてなければ「-1」を、含まれていた場合は最初に登場する位置を返す、というもの。なので、アドレスの中に「http://profile.ameba.jp/」を含んでいない、という条件なら、以下のように記述します。
    if(u.indexOf("http://profile.ameba.jp/")==-1)){
    処理
    }
    今回は「含んでいない」ではないので、条件式は「==」(等しい)ではなく「!=」(等しくない)とします。
    また、条件は2つあり、AかBかどちらかを満たしていればよいというOR条件なので、2つの条件を||で繋ぎます。因みに、両方を満たしていればというAND条件であれば&&となります。

    以上を踏まえて、先ほどの「/」で分割する処理の前に以下のように条件を追加してみます。ちょっと見辛いけどご容赦を。
    if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    配列tに入れて結合しなくても、文字列変数を用意してIDを連結し、最後に「document.write」で表示する手でもいいと思います。

    ところで、分割結果を配列にいれたのは、重複分を外す処理を入れたかったからです。上記の処理で、配列tに値を入れる前に関数cを実行し、その関数が「重複はない」という場合だけ、配列tに入れるような処理にします。
    t[n]=ar[3];n++
    の箇所が下記のようになります。
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    関数cは配列tをループさせ、配列tの中に渡された値と同一のものがあれば「false」、なければ「true」を返すようにしました。
    function c(s){
    rtn=true;
    for(var i=0;i<t.length;i++){
    if(s==t[i]){
    rtn=false;break
    }
    }
    return rtn;
    }
    配列tを用いず、文字列で結合して「indexOf」を使って確認する、というのもアリですね。

    最初に、戻り値用変数rtnを「true」に定義します。次にforループで、配列tの最大値である「t.length」までループさせます。ループ内では、渡された値である変数sと配列ti番目を比較して、同じであれば戻り値用変数rtnを「false」にしてループを抜けるように、break処理を記述します。重複がなければ、戻り値用変数rtnは最初に定義したように「true」のまま処理されます。

    以上をまとめて、もう一度ソースを掲載します。
    var t=new Array();var n=0;
    for(var i=0;i<document.links.length;i++){
    u=document.links[i].href;
    if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    }
    document.write(t.join("<br />"));
    void(0);
    function c(s){
    rtn=true;
    for(var i=0;i<t.length;i++){
    if(s==t[i]){
    rtn=false;break
    }
    }
    return rtn;
    }
    最後に、ブックマークレット化のために上記のソースを一行にまとめます。「秀丸エディタ」などの高機能テキストエディタで、改行コードの「¥n」を「」(何もない文字)で置換するという処理をすれば早いです。

    最終的なソースはこちら。
    var t=new Array();n=0;for(var i=0;i<document.links.length;i++){u=document.links[i].href;if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){ar=u.split("/");if(c(ar[3])){t[n]=ar[3];n++}}}document.write(t.join("<br />"));void(0);function c(s){rtn=true;for(var i=0;i<t.length;i++){if(s==t[i]){rtn=false;break}}return rtn;}
    配布するときは、HTMLの「a」タグのhref属性に、Javascript:上記のソースコード、のようにすればOK。以下に記述例を掲載しておきます。
    <a href="Javascript:var t=new Array();n=0;for(var i=0;i<document.links.length;i++){u=document.links[i].href;if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){ar=u.split("/");if(c(ar[3])){t[n]=ar[3];n++}}}document.write(t.join("<br />"));void(0);function c(s){rtn=true;for(var i=0;i<t.length;i++){if(s==t[i]){rtn=false;break}}return rtn;}">ブックマークレットを追加するにはこちら</a>

    できたブックマークレットはこちらから登録して使うことができます。

    長くなりましたが、アメーバブログに限らずいろいろなサイトで利用できるように、ソースの解説をしながら書いてみました。業者の行う自動化はやりすぎだと思いますが、必要な情報を効果的に収集するのは、作業の効率化をはかる上で必要なことだと思います。こういった技術の利用は個人の裁量にお任せしますが、自分だけが幸せになるような使い方は、絶対に避けてくださいね

| 開発関連 | 12:22 | comments(0) | trackbacks(0) |

  • グーグルマップストリートビュー(google maps street view)をいじってみる
  • グーグルマップストリートビューgoogle street view)をさっそくいじってみました。ここでは技術的な話に終始するので、それ以外の話はなかの人ブログで書いた話が参考になるかと思います。面白い風景を探してる方は、上記リンクか、こちらをご覧ください。

    さて、サービス自体がどんな感じか調査しようとgoogle map street view apiで検索すると、どこぞやのニュースにあった「…MappletはGoogle Gadget APIとGoogle Maps APIからなっているため、 これらのAPI利用者は簡単にMappletを作ることができるという…」という言葉をそのまま引用してるページが、じゃんじゃか出現。。引用はいいんだけど、おかげで肝心な情報にたどり着けないのは迷惑千万。

    こうなったら、いじってみれば何とかなるだろうということで、いろいろいじってみることにしました。先ずは初回なので簡単に。

    単純にiFrameの中に埋めこんでみます(単純にgoogle map street viewのリンクボタンで生成)

    大きな地図で見る


    ただ、iFrameだといろいろ制限があるしなぁ…と悩み、iFramesrcを直接開いてみるのはどうだろう、ということに。

    全画面になりました。

    でかい。これはこれで面白い。

    続いて、移動したストリートビューの座標値をとる作業。さすが日本版公開直後というのもあり、日本語の情報が非常に少ないです。仕方なく海外のAPIリファレンスをあちこち回って、ようやく下記アドレスにたどり着きました。
    Services - Google Maps API - Google Code(英語、外部リンク)

    ふむふむ…と、できたのが下記サンプル。
    グーグルストリートビュー(google maps street)の緯度・経度を取得する

    とりあえず、下記処理を実装してみました。

    1. ストリートビューを移動し、画面を切り替える都度、座標を取得

    2. 上の処理で取得した座標を地図の中心にする


    簡単なソースコードは以下。
    <script language="JavaScript"><!--
    function gmap_load(){
    //中心座標
    fenwayPark = new GLatLng(35.660992,139.701376);
    panoramaOptions = { latlng:fenwayPark };
    //オブジェクトの作成
    myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
    panoClient = new GStreetviewClient();
    //イベントの定義
    GEvent.addListener(myPano,"initialized",function(loc){
    //移動後の処理
    //alert("!"+loc.latlng)
    });
    }
    </script>
    <body onload="gmap_load">
    <div name="pano" id="pano" style="width: 500px; height: 300px"></div>
    いろいろできそうですから、面白いマッシュアップツールになるのではないでしょうか。

| 開発関連 | 08:24 | comments(0) | trackbacks(0) |

  • ドラクエ5のブログで使った主人公の名前を変更する処理
  • なかのひとブログで、ドラクエ5デボラと結婚した主人公の悲劇について書いています。このブログで、主人公の名前は「XXXX」と書いているのですが、これでは感情移入もできやしません。

    そこで、ひとつスクリプトを書いてみました。昔流行ったドリーム小説てヤツに近いです。

    ドリーム小説はPerlなどのCGIで書かれるのが主流でしたが、これに関してはJavaScriptも同様のことができます。本文の中から、任意の語句を取り出し、ユーザの指定した文字で置き換える、という処理をします。

    例えば、本文のうちの「XXXX」を「俺様」に変更するなら
    document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,"俺様");
    とするだけでOK。

    これだけじゃつまらないので、「俺様」じゃなくてユーザに名前を入力してもらうようにしてみました。
    name=prompt("名前を入れてください");
    if(name!=""){document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,name);}

    このままだと、ページを開いた瞬間に「名前を入れてください」と聞かれて、ユーザビリティ的によろしくないので、ボタン押下での処理に切り替えるように処理を追加。
    <form>
    <input type="button" onClick="setNames()" />
    </form>
    といったボタンをつくり、クリックイベントを
    setNames()
    として、先ほどの処理を関数化します。
    function setNames(){name=prompt("名前を入れてください");
    if(name!=""){document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,name);}}

    技術情報というにはおこがましいような情報ですが、たまにはこういう初心者的なスクリプトの解説もいいかな?と思って書いてみました。document.body.innerHTMLって何?とか、replace(/XXXX/g,name)ってトコはどうなってるの?って人は、innerHTMLreplaceといった語句をGoogle検索してみてください。

    尚、タグが有効でないブログや改行時に改行コードが入るブログでは利用が難しくなりますが、そのあたりは各ブログのカスタマイズ方法を参考にしてください。

| 開発関連 | 07:12 | comments(0) | trackbacks(0) |

  • fgetcsvで配列がズレた時〜5c問題
  • PHPにはfgetcsvという関数が用意されています。この関数を使うことにより、引用符の中の区切り文字について頭を悩ます必要がなくなったのですが、時々こっちの予想通りにデータを収納してくれません。

    例えば
    "1","新宿十中テニス部","2勝3敗",A
    というデータがあって、
    $data = fgetcsv($fh, 0, "," , "¥"")
    としていれば、
    • $data[0]="1";

    • $data[1]="新宿十中テニス部";

    • $data[2]="2勝3敗";

    • $data[3]="A";

    となってほしいのですが、そうなってくれないことがあります。
    同様の症状が突然お客様から電話があって、しばし思考が止まりました。電話を切って、
    「例のアレかも?」
    と思って調べてみたら案の定。
    いわゆる5c問題といわれるもので、昔、チャットなどを作っていた時に散々悩まされたもんです。

    これは、文字コードの2バイト目が0x5c(¥)となるもの。「¥」になってしまうと、正しく表示できなくなっちゃいますね。

    今回のケースだと「十」という文字でひっかかっていたわけです。有名なところだと「予、表、申、ソ、兎、曾、圭、欺、噂・・・」などがあります。

    参考サイト
    5c問題 - マイドキュメント - livedoor Wiki(ウィキ)

    上記サイトだと、下記のような回避方法が書かれていました。
    通常はこのように書くところを
    const char msg[] = "予定表"; 
    このようにします。
    const char msg[] = "予¥定表¥"; 
    これは、文字コードがShift_JISの時に起きる問題なので、一度読み込んだファイルはUTF-8mb_convert_encodingした上で読み直す、といった対処が有効であると思います。

    冷静になれば、気づく問題なのですが、休みの日の昼下がりに急にお客様に言われたりすると思い出せなかったりすることがあるので、メモとして残しておきます。

| 開発関連 | 18:35 | comments(0) | trackbacks(0) |

  • Amazon APIのサンプル〜『マニアンミュージック』
  • Amazon APIの利用

    メジャーじゃない曲を登録して紹介する、まねきねこプロジェクトのサービス『マニアンミュージック』に、AmazonのAPIとの連動を実施してみました。

    まず、AmazonでAPIキーを取得します。このページの『 Create your free Amazon Web Services account』という箇所でAPIキーを作ります。

    ZIPCodeを3桁にしないと『The address you provided appears to be invalid. Please check the required fields and try again』というエラーが出て登録ができない、という不具合があってしばしてこずりました。

    メール受信後に認証してから、このページYour Access Key IDshow。これでアクセスキーIDを取得します。

    PEAR
    の2つを用います。

    上記PEARの設置ですが、サーバによってはPEARのパスを通せないところもあるので、ルート直下に.htaccessをおいて、php_value include_path アドレスなどと、アドレスに追加するのもいいかもしれません(複数箇所を指定する場合は「:」で区切る)。include_pathについて詳しく知りたい方は、デジットさんのPHPが参考になります。

    ロリポップサーバの場合では、ルートのcommonフォルダ以下のファイルを参照する場合、
    php_value include_path "/home/sites/lolipop.jp/users/ユーザ/web/common:.:/usr/local/lib/php:/usr/local/lib/php/Smarty"
    とすればOK。記述順に優先されて読み込むので「.」であるワーキングディレクトリへの参照を先にしてしまうと、バージョンが異なる場合、古いファイルを参照しバージョン違いの為エラーを返すので注意です。

    上記の手順などを用いて、PEARへのパスがきちんと通っていれば、以下のような感じで、データを取得できます。データは10件までしか取得できないので、取得を繰り返すループ処理を入れてます。ただ、これだと何万件というデータがひっかかった時大変なので、ある一定度取得したらループを抜けるようにしてます。

    $subid = 'アマゾンAPIキー';
    $associd = 'アソシエイトキー';
    $objAmazon = new Services_AmazonECS4($subid, $associd);
    $objAmazon->setLocale('JP');
    $options = array();
    $options['Keywords'] = "浜崎あゆみ";//検索キーワード
    $options["Operation"]="ItemSearch";
    $options['ResponseGroup'] = "EditorialReview,ItemIds,ItemAttributes,Images";
    $SearchIndex="Music";//Books,Musicなど
    $pageCnt=1;
    $result=array();
    while($pageCnt<5){
    $options["ItemPage"]=$pageCnt;
    $re = $objAmazon->ItemSearch($SearchIndex, $options);
    if(count($re["Item"])==0){
    //これ以上結果が無い
    break;
    }
    array_push($result,$re);
    $pageCnt++;
    }
    print_r($result);
    print_r$resultの内容を表示してるので、以下のような内容が取得されるはずです。実行結果はこちらでご覧ください。print_rの出力結果にはHTMLタグが入ってないので改行はされません。内容をソースの表示で見ると随時改行されているはずです。

    プログラムに慣れた方ならわかると思いますが、例えばタイトルの「GUILTY(DVD付)」を取得するためには
    $result[0]["item"]["ItemAttributes"]["Title"]
    で、取得できます。アソシエイトURLであれば
    $result[0]["item"]["DetailPageURL"]
    となります。

    一方、小さな画像であれば
    $result[0]["item"]['SmallImage']['URL']
    で取得できますし、その画像の縦サイズであれば、
    $result[0]["item"]['Height']['_content']
    で取得できます。意味がわからない人は、Google『PHP 連想配列』と検索するといいかと思います。配列が分からない人は、まず配列を知ることからはじめましょう。

    尚、『マニアンミュージック』のアドレスにサブドメインを適用させ、以下のアドレスが使えるようになりました。

    http://lab.24th.jp/music/

    マニアンミュージックをご覧の際は、このアドレスにてご覧ください。

    参考サイト
    今回記事を書くにあたり参考にしたサイトおよび今後役立つと思われるサイトです。

| 開発関連 | 22:43 | comments(0) | trackbacks(0) |

  • YouTube出力タグIE7での不具合
  • マニアンミュージック - 非メジャー曲を紹介!というコンテンツを作っています。

    これは、現在知名度が低いミュージシャンや楽曲でも、こんないいのがあるぜ!というのをみんなで共有しよう、というコンセプトで作ったもの。

    Googleの検索結果をスクレイピングし、その件数をキーにマニア度を算出してるのが面白いんじゃないかな?と作っているものなのですが、一部IEでYoutubeの動画表示できない、という現象が発生していました。

    Firefoxでyoutubeを見て、埋め込みタグを取得すると、下記のようになります。
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/QtBPVBboj_o&hl=ja&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/QtBPVBboj_o&hl=ja&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

    一方、IE7から同じように埋め込みタグを取得すると下記のようになります。
    <EMBED src=http://www.youtube.com/v/U78nt2tcFWg&hl=ja width=325 height=255 type=application/x-shockwave-flash wmode="transparent"></EMBED> 

    これを、IE側の埋め込みタグで統一すると、IEでも見れるし、Firefoxでも閲覧が可能になります。

    Youtubeさん、埋め込みタグは同じにしてくださいm(_ _)m

    話はちょっと脱線しますが、調べているとIE7とFLASH playerの不具合が数多く報告されているようです。どうやら、アンインストールですらうまくいかないらしい。。
    アンインストールはAdobeさんの下記ページから別途ダウンロードが必要とのこと。
    http://www.adobe.com/jp/shockwave/download/alternates/

    また、Flashプレーヤーのインストールされたコンピュータの下記ローカルアドレスにあるヘルパソフトを実行するとうまくいった、という報告もあがっています。
    C:¥WINDOWS¥system32¥Macromed¥Flash¥Adobe Flash Player Helper 9.0 r28

    今回の件とは直接関係なかったですが、併せて備忘録として記載しておきます。

| 開発関連 | 06:07 | comments(1) | trackbacks(0) |

  • スクレイピング あまり知られてないけどこの曲どう?
  • あまり知られてないけど、この曲どう?
    という、コンテンツを作ってみました。

    これは、ユーザが、あまり知られて無いけどオススメ!という曲を、Youtubeのアドレスとともに投稿し、知られてないけどいい曲!てヤツをみんなで共有しよう、というサービスです。

    その中で『マニア度』というパラメータの取得に、ちょっとマッシュアップ的なことをしてみました。これは、ミュージシャン名と楽曲名でGoogle検索をかけて、その検索結果数をもとにマニア度を決める、というものです。

    開発の経緯は以下。

    まず、Google SOAP Search APIを使おうと思ったのですが、Google AJAX Search APIが出たことでサービス停止になってるみたいです。今回はAJAX関係ないし、利用回数に制限があるし、日本語通すのに難があるとのことなので、この使用を諦めました。

    次に、Yahoo! APIを試そうと思ったのですが、レスポンスを見てみると、結果件数は10件で、最大が50件、とのこと。これでは今回の目的にそぐいません。。

    というわけで、例のごとく、スクレイピングをすることにしました。

    まず、Googleにキーを投げ、その結果のinnerTextから

    …に一致する日本語のページ約 XXXXXX 件中

    という箇所を抜き出します。

    このあたりは、wikipediaで問題集を作るでもやってるので、もう慣れたものです。数字該当箇所『[0-9]+』を取得するといろいろと面倒なので、<b>タグに含まれているもので考えます。但し、1,000件以上の結果を返すとカンマが入るので、一度カンマをnullに置換します。以上を踏まえて組み上げたソースは大体こんな感じ。
    $htmlText = @file_get_contents( "http://www.google.co.jp/search?q=".urlencode("対象文字列") );
    $htmlText = str_replace(",","",$htmlText);
    $pattern = '/<strong>[0-9]+<¥/strong>/';
    preg_match($pattern, $htmlText , $matches, PREG_OFFSET_CAPTURE);
    $mania = $matches[0][0];
    これによって、変数$maniaの値が取得できたはずです。

| 開発関連 | 23:32 | comments(0) | trackbacks(0) |

  • phpCodeGenieで、テーブル編集のPHPを自動生成
  • サッカー選手APIってのを作ろう、と、データベースに2000件ほどデータを挿入してみました。現状は4-4-2のフォーメーション(固定)で、ランダムに選手を割り振るようになっています。現役の選手から往年の名選手まで、いろんな選手が集まったチームというのはなかなか壮観。

    さて、本データは、選手名、ポジション、国名しかもっていません。これに、現役か引退か、右利きか左利きか、キック力、スタミナ・・・といった項目値を追加するとなると、大変な作業に。誰かにお願いしたいところですが、お願いするにしても頭を悩ますことが。

    それは、直接データベースを編集できるユーザならいざ知らず、そうでないユーザに編集の協力を頼む場合、テーブルを直接編集するページを作る必要があると、いうこと。これが結構面倒臭い。新規追加、編集削除、一覧表示に検索…こういうのを毎度作らなくてはなりません。

    面倒を肩代わりしてくれるものはないのか調べてみると、このようなケースのテーブル編集のためのPHPを自動で生成してくれるツールが結構あるようです。実は以前からあるのは知っていたのですが、海外のもので文字コードの処理がうまくいかなかったり、データベースが特定されてたり、関連ファイルを作りすぎたり、と、いろいろ問題は少なくありませんでした。それで手を出さずにいたのですが、2008年にもなれば、だいぶ融通の利くソフトが出てきてるようです。今回は、phpCodeGenieというものを試してみたいと思います。

    まず、ダウンロード。解凍してサーバにアップします。アップ先は/usr/local/apache/htdocs/phpCodeGenie3.0とすれば、下記設定の1と2が不要になります。ファイルが500前後あるので、しばらく待ちます。

    サーバアップ後の詳しい設定は以下。

    1. rootにある.htaccess内のinclude_pathを自分の環境に合わせて修正。
      ※phpCodeGenieのrootパスと、app/setting/へのパスをいれないとダメぽい

      ファイル一式を/usr/local/apache/htdocs/phpCodeGenieにおいた場合、
      php_value include_path '.:/usr/local/apache/htdocs/phpCodeGenie:/usr/local/apache/htdocs/phpCodeGenie/app/settings/'
      を、指定。

    2. 次にapp/settings/genieConfiguration.inc.php
      define("SITE_PATH","/usr/local/apache/htdocs/phpCodeGenie3.0");
      の箇所を自分の環境に合わせて修正。
      ファイル一式を/usr/local/apache/htdocs/phpCodeGenieにおいた場合、
      define("SITE_PATH","/usr/local/apache/htdocs/phpCodeGenie");

    3. 次にapp/settings/genieConfiguration.inc.php
      define("URL_ADDRESS","http://localhost/phpCodeGenie3/web/");
      を環境に合わせて修正。


    設定終了画面

    このような画像が出ればOK。サーバ名、ユーザID、パスワードを入れたら、ランプ画像を押します(LAMPにかけたシャレ?)。対応データベースは、MySQLPostgreSQLODBCSQL LiteOracle 8 or aboveOracle (old versions)DB2MS SQL ServerMax MySQLVisual FoxProFrontBaseInterbase 6Borland Interbase 6.5 or aboveFirebirdInformixInformix 7.2LDAPNetezzaSap DBSybaseSybase SQL AnywhereDB2
    と、多岐にわたります。

    接続終了画面

    接続がうまくいけば、上記のような画面が出ます。左側のフレームにテーブル一覧が出ている対象となるテーブルを選ぶと、メインのフレームに
    Generate ALL Code for Entire Database Application and Save to Disk 
    Code Genie Form Maker
    Insert Query Builder
    Database Lister
    All in One CRUD Grid
    Edit/Update Form Builder
    Update Maker
    View Maker
    Delete Confirmation Maker
    Delete Script Maker
    Search Form Maker
    Search Script Maker
    というメニューが出てきます。

    ここでは、一番上の
    Generate ALL Code for Entire Database Application and Save to Disk 
    を選んでみます。

    Pathを決め、対象となるテーブルを絞り込み、Please choose the modules that you want to be generated.は、下記の項目全てを選んだ状態にします。
    Enter / Insert Code
    Edit / Update Code
    Lister Script
    View One Record
    Delete Script
    Search Code
    Copy Common

    Generate And Save All codeボタンをクリック。warningが出た場合は、パーミッションもしくはそのフォルダが無いということなので、先に該当フォルダを作るなりの作業をしておきます。

    設定完了画面

    が出れば、多分、完成。

    先にいれたPathとデータベースユーザ名にフォルダができているので、画面や機能を確認します。今回、出力パスをroot/test以下に生成しましたが、CSSや一部のコンテンツ(contact uscopyrightなど)のファイルが参照できません。例えばCSSについていえば、生成したファイルは以下の絶対パスを参照しています。

    http://phpCodeGenie3のパス/web/generatedCode/simple/データベースユーザ/common/style.css

    phpCodeGenie3のパス以下にあるwebフォルダに対して出力すれば、特に問題ないと思います。自動生成する元となるテンプレート先をちょこちょこっといじる、という手も考えられますね。皆さんの環境に応じて対処してください。

    トップページ
    トップページ

    リストページ
    リストページ

    リストページと編集欄
    リストページと編集欄の画像

    挿入ページ
    挿入ページの画像

    検索ページ
    検索ページの画像

    このまま利用すると日本語は文字化けしましたが、metaheadにきちんと文字コードを設定すると文字化けせずに動作しました。尚、当方の環境は、MySQL(バージョン4.0.24)。文字コードはutf-8で統一しています。

    もし、日本語処理でおかしな場合が発生した場合は、下記サイトが参考になると思います。

    堂園システムエンジニア覚書

    また、ぎじゅっやさんというサイトの情報を参考にさせていただきました。ありがとうございました。

    使ってみた感想といえば、最低限は満たしてる、というのが感想。日本語のドキュメントがほとんどなかったので、.htaccessの通すパスが厄介だった点を除けば、すんなりと作業できたと思います。一度試してみる価値はあるかもしれません。

| 開発関連 | 05:01 | comments(0) | trackbacks(0) |

  • 他人のふんどし率〜htmlparser
  • 他人のふんどしチェックを作りました。

    htmlparserというモジュールの習作です。
    これを使って指定ページの内容を取得し、その中にあるリンクタグの確認を行っています。Frameタグ及びiFrameタグがある場合は、その内容を再帰的に辿っています。

    該当モジュールをrequireした後、
    require_once("htmlparser.inc");
    ページの内容を取得します。
    $htmlText = @file_get_contents( "http://24th.jp" );
    取得した値がnullでなければparseクラスに取得内容を渡し、whileparseしつづけます。
    $parser = new HtmlParser ($htmlText);
    while ($parser->parse()) {
      $tag=$parser->iNodeName;
      //リンクタグなら…
      if($tag=="a"){
        //href属性を取得したければ…
        $href=$parser->iNodeAttributes[ 'href' ];
      }
    }

    にしても、広告と外部リンクだけでできてるようなページも多いんですね。

    他人のふんどし率が高いページは、外部リンクを消すブックマークレットを使うと楽しいです。

| 開発関連 | 15:13 | comments(1) | trackbacks(0) |