カテゴリー別アーカイブ: プログラミング

jQueryを使った気になるWebデザインテクニック

最近見つけたものと、前に見つけてたのにまったく忘れてたもの。

こういうのはやっぱり、phpspotだったりしますね。

リストがいっぱい並ぶやつとかに使えると思います。

というか、使いたいところがあるのですぐにメモしなくては、と思ったわけですが。

Webサービスのクローズドベータテストを行うには

個人でWebコンテンツとして役立つ(であろう)ツールを開発。

開発途中で自分だけでなくほかの人にもテストしてもらいたい。

ということで、URLをメールなどで教える。

単なるWebサイトならURLを教えればよいのだけど、念のため、ほかの人からは見えないようにしたい。URLが他人にばれてもアクセスできないようにするのに有用なのがパスワード。ということで、パスワード付きでURLを教えることになる。

で、そのサービスについて意見をもらいたい。メールだと以前の内容について追いかけるのが面倒(引用とかね)。ということで、これらもWebで行いたい。

cybozuliveみたいなクローズドな掲示板的サービスでもよいのだけど、固有名詞を使わないなら一般に公開されているURLでも行ってもいいだろう。大事なこと(ここではURLとか名称)だけ使わなければ、まったく関係ないドメインの話ならバレることもないだろうとか思い。

プログラミングに関する一般的な話題として、公開されてれば、どこかでだれかの役に立つかも、という感じも含めまして(前もやりましたね、こういうの)。

で、今回、意見交換をする場所がここです。コメントよろしくお願いします。

リンクシェア提携非承認の理由はページが真っ白になることだった

リンクシェアというアフィリエイトASPと提携しているのですが、一部のECサイトから何度も非承認という結果が来ていました。

アクセス数が少ないことが理由かと思っていたんですが、なんのことはない、とはいえ重大なことが理由でした。

リンクシェアはたくさんのECサイトと提携しており、その中から好きなECサイトを選んで提携を申請、承認されたら各種リンクが掲載できるという仕組みになっています。

また、提携の際には、リンクを掲載するサイトもあわせて申し込むようになっており、サイトAで承認されてもサイトBにはリンクを張れないので、別途新たに申し込む必要があります。

サイトAでOKだったので、サイトBにも張りたいと思い、あるECサイトに提携を申し込んだのですが、これがNG。半月ほどで再度申し込みが可能となるので、それまでにさらにサイトを充実させて、また申し込むという手順。何度やってもNG。

で、4回目を迎える直前、普段は使っていないパソコンでサイトを確認したところ、トップページが表示されていないことに気づきました。

そのパソコンで使用したブラウザはIE8。これまで、IE6、IE7で確認。もちろん、FirefoxやSafari、Chromeの最新版でも試していました。しかし、IE8では確認してなかったんですね。

IE8だけがNG。なぜ? となるわけですが。

調べたところ、エンコードの検出がうまくいっておらず、UTF-8のページなのに、Shift-JISと検出されており、ページが真っ白になる。つまり、内容が表示されていなかったのです。

ページはPHPで作成したものだったのですが、ここにUTF-8を明示してヘッダー出力したところ、IE8でも表示されるようになりました。

なんで、これまで気づかなかったんだろう!

ということで、その対処により、無事、某ECサイトと提携が完了しました。

リンクシェアでは、提携申請後すぐに提携完了となるECサイトも多いです。これらは、サイトの確認を行っていないわけです。即時提携OKってところですね。
とはいえ、承認後に提携が解消となることもあるようなので、サイトの確認は随時行われていると考えるのが妥当なところ。ECサイトからではなく、リンクシェア自体がNGを出してくる場合もあります。

では、審査に時間がかかったECサイトはどうなのか? という疑問も出てくるわけですが。
これまで審査をちゃんと行っていると思われる(審査完了まで時間がかかる)ECサイトでOKとなっていのは、これらがIE8以外のブラウザで確認を行っていたのだろう、という推測ができます。

これとは別の話になりますが、、1ヶ月以上たってから、NGの返事がきたところもあります。こういうのは、これまで審査をしてなかった、提携申請が多くて順番がまわってこなかった(?)、なんていう推測も立ちます。まあ、いろいろです。

まったくとりとめない話ですが、今後、読み返すことで確認になるかもということで、一応書き記しておいて、終わります。

Yahoo!ショッピングのコンテンツマッチを試す

Yahoo!ショッピングにはWebサービスというか、APIというか、まあ、そういうのが用意されていて、その中でも試そうと思ったのが、「コンテンツマッチ」というもの。

「Yahoo!デベロッパーネットワーク – ショッピング – コンテンツマッチアイテム」

指定したURLから文章を拾ってきて、その内容にあった商品をリストアップしてくるのだ。

個数は最大6個と少ないのがあれだけど、ブログパーツ的に利用するなら、まあこんなんでも大丈夫か。といった感じ。

ということで、WordPress用にプラグインを作成してみた。

これまで作ってきたプラグインとはちょっと作法が異なる。というのも、WordPress 2.8(だっけ?)で新設されたウィジェットという機能を使って作る。これを利用すると、少ないコード量でカンタンに作成できるのだ。

WordPressの管理画面でパラメーターの入力・保持ができる(データベースにちゃんとセーブ・ロードできる)ので、別途設定ファイルなどを作ったりする必要がないのはもちろんなんだけど、そのためのコードもたいへん少ない(これはプラグイン全般に言えるのかな。前に作ったときからはだいぶバージョンが進んでるので、ちょっとわからない)。

そんなこんなで、サイドバーに記事に関連した商品を表示するウィジェットをつけたのだけど、どのページを表示しても同じ結果になってしまう。

記事中に合ったものがないと、Yahoo!ショッピングの売れ筋商品を自動で表示してしまうからのようだ。

Yahoo!ショッピング内にこのブログに合った商品はあまりない、というか、コンテンツマッチのエンジンでうまいことしてくれるような内容になっていない、ということだろうか。

ほかのブログだとうまくいっているので、コードに間違いはないような気がするんだけど、どうだろう。

コーヒーでも飲んで、ちょっと気持ちを落ち着かせてから、続きをやろうと思う。コーヒーを入れるにはペーパードリップが手軽でおいしい、と思うのだけど、どうだろう。という感じでコーヒーを連呼すれば、コーヒー関連商品が出てきてくれないかなあ。テスト。

スクレイピング&正規表現でゴリゴリ

HTMLの解析。特定のタグを取り出すために使われる手法が正規表現。
PHPなので、「preg_match」とかを使う。

PHPには正規表現を扱う関数として、「ereg_」系と「preg_」系が用意されてて、校舎はperl互換。それだけでなく、後者のほうが機能的に満足いく結果が得られる場合が多い(というか、使いやすい)。

で、こんなやつ。

     $pattern = '|<a href=["\']([^"\']+)["\'][^>]*>([^<]+)<|i'; 
     preg_match_all( $pattern,      $contents, $out,     PREG_SET_ORDER);

もちろん、aタグをひっかける。「()」で囲まれている部分はあとで参照できる。URLと、アンカーが拾えるというわけだ。

しかし、これではひっかからないものもある。「href」属性の前に「class」属性だとか「id」属性が来たら、もうこれにはひっかからない。

で、別の方法を考えなくてならなくなるわけだ。まあ、そんな感じでいろいろあるわけです。

Android用アプリ開発ツールがすごい

このへんから。

Google、誰でもAndroidアプリを開発できるツール「App Inventor」 – ITmedia News
Google、コードを書かずにAndroidアプリが作れる App Inventorを公開
Google、Android向けWYSIWYG開発ツール、App Inventorを発表―その影響は?
Googleがケータイアプリ簡単作成ツール=だれでもプログラマー時代到来?【湯川】 : TechWave
App Inventor for Android
Android App InventorにはTwitterへのシームレスな連携機能あり―さらにサードパーティーが連携機能を開発するツール提供へ
Android プログラミングがスゴい « maclalala2

グラフィカルな開発環境といったところ。

ほとんどコード書かなくていい感じ。
とはいえ、往年のVisual Basicを思い出さないこともないです。

JavaScriptで改行を出力する際にエスケープではまる

JavaScriptのコーディングではまった話。

HTMLで改行を出力するなら<br>タグを使うのだが、フォーム内に出力する場合にはそうもいかない。input(インプット)とかtextarea(テキストエリア)とかの場合だ。

ということで、JavaScriptで改行コードを出力するためには「¥n」を使う。

HTML内にゴリゴリ書いていると、このままでは改行にならない。どうやら「¥」をエスケープしなくてはならない。

ということで、「¥¥n」とすると意図したとおりに動作するようになった。

続いて、HTML内にごりごり書いていたJavaScriptのコード部分を、jsファイルとして分離する。こうすれば、ほかのHTMLファイルでも使いまわしがきくようになる(別ファイル読み込み時もキャッシュされてるので、再読み込みが不要になる)というわけだ。

しかし、ここではまる。「&yen」がよぶんに出力されるのだ。どうやら、先のエスケープ部分が邪魔になっている模様。

ということで、あらためて「¥n」とする。

HTMLファイル内にいれる場合と、jsファイルで分離する場合では扱いが違うようだ。いまさらながらメモ。

SyntaxHighlighterプラグインを入れてみた

プログラムのコードをブログに書きたい場合、エスケープとか整形とかがいろいろ面倒、とか思ってたので、プラグインを導入。

「WordPress › SyntaxHighlighter Evolved « WordPress Plugins」

たとえば、こんな感じ。

  if(!$.browser.msie){
   $.each(alist,function(){
     if($('#li'+this).html()){
      switch ( br_on ){
       case "1": 
             lilist += $('#li'+this).html() + "<br />";
             break;
       case "2": 
             lilist += "<li>" + $('#li'+this).html() + "</li>";
             break;
       default:
             lilist += $('#li'+this).html();
             break;
      }
      if(cr_on === "1"){lilist += "\n";}
     }
   });
  }

とりあえず、先日作っていたJavaScriptのコードを入れてみた。
内容についてはとりあえず、無視してもらうとして。

「[」と「]」で「js」をHTMLタグと同様に囲む。開始はこれで、終わりは「[/」と「]」で「js」を囲むといった具合。「js」の部分を「php」にすれば当然PHPのコードを書ける。

見た目的にはぜんぜんOK。

コードを紹介してる記事でよく見るなあ、とは思っていたけど、調べたのはつい最近。なんで、これまで気づかなかったのかと自分のアホさ加減にぐったりするほど。なんて便利! WordPressのほかにも各種CMSに対応したプラグインがある模様。このテのものを「SyntaxHighlighter」という、ってことも最近知ったばかり。

これからはプログラミング時のメモとかも積極的に書いていこうかと思う。

あえて機能を増やさないこともウェブサービスにはいいかもしれないという話

「投稿が100件しかなくても、7つのうちどれを押しても、10件以上は記事がある状態なわけです。これであれば「記事がなかった」というがっかり感を感じさせません。」
「完璧を作ろうとするより、その段階で最善のものを出して、あとからどうするかを考える、というのがWebサービスを作る時に有効な手立てなのかもしれません」

なんて話が読めるのが「nanapiの初期バージョンに検索窓がなかった理由 : ロケスタ社長日記」

やじうまWatchの「■ Webサービスの成功には「あえて機能をつけない」ことが重要?」経由で。まずはこっちを読んだほうがいいかもしれない。

「Webサービスに求められる機能をあえてつけないという考え方について考察」してる記事なんかへのリンクもあって、こっちもおもしろい。なるほどなあ。

デザイン(見た目)とかプログラミングのほうばかり考えてると、こういう視線は持てないわけで。これからなんか作るときにこのへんをよく考えてみようと思った次第。

最初の記事へのはてブコメントもおもしろいです。「はてなブックマーク – nanapiの初期バージョンに検索窓がなかった理由 : ロケスタ社長日記」参照。

ウェブサービスで新規サイト立ち上げ

APIを提供しているサービスを利用して、新たにサイトを立ち上げてみた。

既存サイトの下位ディレクトリに新たに設置。
既存サイトはPHP4で作ってあったのだが、新規サイトはPHP5。

レンタルサーバーを2つ借りており、一方(サーバーA)はPHP4、もう一方(サーバーB)はPHP5。サーバーBは基本的にPHP5なのだけど、.htaccessを設定することで、ディレクトリごとにPHP4を使う設定も可能。
「PHPをCGIとして動かす方法について – CORESERVER.JP:コアサーバー」

ということで、サーバーBに既存サイト+新規サイトの両方を移動。まずは、うまくいくかを確認。なんとか稼動している模様。

問題は、PHP5メインのサーバーBでPHP4を動かすには、CGIモードにする必要があること。この場合、多少、負荷がかかるという。これは様子を見ながら対処を考えることにする。

というわけで、一部の人にデザインなどをチェックしてもらうことにするのです。感想などありましたら、ここにコメントでお願いします。

なお、既存サイトと新規サイトにはまだ相互のリンクは張っていない。テスト期間なので当然だ。では、よろしくお願いします。