ひろぽっぽれす » JavaScript http://hiropo.co.uk Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。 Sun, 25 Jul 2010 17:09:15 +0000 ja hourly 1 http://wordpress.org/?v=3.0 美人時計で画像を収集する際に使った計算式 http://hiropo.co.uk/archives/360 http://hiropo.co.uk/archives/360#comments Wed, 27 Jan 2010 09:31:48 +0000 admin http://hiropo.co.uk/?p=360 美人時計の画像を収集する際に、時間で画像名が吐き出されているので、その吐き出しの計算式をおこしてみた。
画像収集バッチはRubyなんですが、今回ちょっとJavaScriptを使う機会があったので、JavaScriptで起こしてみました。

PLAIN TEXT
HTML:
  1. <div id="debug"></div>

PLAIN TEXT
JavaScript:
  1. (function(){
  2.   var getid = function(id){
  3.     return document.getElementById(id);
  4.   }
  5.   var debug = getid( 'debug' );
  6.   var dateCount = function(arg){
  7.     return arg;
  8.   }
  9.   for( var i = 0; i <24; i++ ){
  10.     for( var j = 0; j <60; j++ ){
  11.       if( i <10 ){
  12.         if( j <10 ){
  13.           debug.innerHTML += '0' + i.toString() + '0' + j.toString() + '.jpg' + '<br />';
  14.         }
  15.         else{
  16.           debug.innerHTML += '0' + i.toString() + j.toString() + '.jpg' + '<br />';
  17.         }
  18.       }
  19.       else{
  20.         if( j <10 ){
  21.           debug.innerHTML += i.toString() + '0' + j.toString() + '.jpg' + '<br />';
  22.         }
  23.         else{
  24.           debug.innerHTML += i.toString() + j.toString() + '.jpg' + '<br />';
  25.         }
  26.       }
  27.     }
  28.   }
  29. })();

0000.jpg
0001.jpg
～略～
2358.jpg
2359.jpg

まで表示されます。

]]> http://hiropo.co.uk/archives/360/feed 0 flashplayerの有無判別 http://hiropo.co.uk/archives/356 http://hiropo.co.uk/archives/356#comments Thu, 07 Jan 2010 07:46:07 +0000 admin http://hiropo.co.uk/?p=356 flashplayerの有無判別は非常にややこしい・・・。どこかのサイトにあったものをコピペではっておく。

PLAIN TEXT
JavaScript:
  1. function FlashPlayerVer(){
  2.     //初期設定
  3.     var flashplayer_ver = 0;
  4.     //IE以外の場合
  5.     if(navigator.plugins && navigator.mimeTypes['application/x-shockwave-flash']){
  6.         var plugin = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin;
  7.         //Flash Playerがインストールされている場合
  8.         if(plugin){flashplayer_ver = parseInt(plugin.description.match(/\d+\.\d+/));}
  9.     }
  10.     //IEの場合、もしくはFlash Playerがインストールされていない場合
  11.     else{
  12.     //IEでFlash Playerがインストールされている場合
  13.     try{
  14.         var flashOCX = new ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version").match(/([0-9]+)/);
  15.         if(flashOCX){flashplayer_ver = parseInt(flashOCX[0]);}
  16.     }catch(e){}
  17.     }
  18.     //Flash Playerがインストールされていない、もしくはバージョンが6以下の場合
  19.     if(flashplayer_ver <= 6){flashplayer_ver = 0;}
  20.     return flashplayer_ver;
  21. }

FlashPlayerVer() を実行したときに 0 が返ってきたら入っていないということに。
他にもいろいろJSあるけど、これシンプルで結構好き。

]]> http://hiropo.co.uk/archives/356/feed 0 クリックでくるくるコンテンツが変わるJavaScript http://hiropo.co.uk/archives/339 http://hiropo.co.uk/archives/339#comments Tue, 01 Dec 2009 02:25:19 +0000 admin http://hiropo.co.uk/?p=339 久しぶりにJavaScript書いた。最近はもっぱらRubyばかり。
けっこうよく使ったりするので、メモっとく。いつもソースを残しておかないからゼロから作り直すのめんどくさい。

▽完成イメージ（ソースコピペで動作確認してください。）
kurukuru

HTMLはこんな感じ。displayの、noneとblockを切り替えるだけ。

PLAIN TEXT
HTML:
  1. <div id="col_1" class="colDes">コンテンツ1だよー</div>
  2. <div id="col_2" class="colDes" style="display:none;">コンテンツ2だよー</div>
  3. <div id="col_3" class="colDes" style="display:none;">コンテンツ3だよー</div>
  4. <div id="col_4" class="colDes" style="display:none;">コンテンツ4だよー</div>
  5. <div id="col_5" class="colDes" style="display:none;">コンテンツ5だよー</div>
  6. <div id="col_6" class="colDes" style="display:none;">コンテンツ6だよー</div>
  7.  
  9. <span id="to_back">戻る</span>
  10. <span id="to_next">次へ</span>
  11. </div>

CSSは、とりあえず動きがわかりやすいようにやっつけ。

PLAIN TEXT
CSS:
  1. #to_next,#to_back {
  2.     cursor: pointer;
  3.     font-size: 200%;
  4. }
  5. #to_next {
  6.     margin-left: 20px;
  7. }
  8. .colDes {
  9.     background: #eee;
  10.     width: 400px;
  11.     height: 300px;
  12. }

JSもシンプルだね。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     var col = [];
  3.     for( var i = 0; i <6; i++ )
  4.     {
  5.         col[i] = document.getElementById( 'col_' + (i+1) );
  6.     }
  7.     var to_next = document.getElementById('to_next');
  8.     var to_back = document.getElementById('to_back');
  9.  
  10.     var elm = function(arg)
  11.     {
  12.         for( var i = 0; i <col.length; i++ ){
  13.             col[i].style.display = 'none';
  14.         }
  15.         return col[arg].style.display = 'block';
  16.     }
  17.  
  18.     var i = 0;
  19.     to_next.onclick = function()
  20.     {
  21.         if( col.length> 0 ){
  22.             if( i <col.length - 1 ){
  23.                 i++;
  24.                 elm(i);
  25.             }
  26.         }
  27.     }
  28.     to_back.onclick = function()
  29.     {
  30.         if( col.length> 0 ){
  31.             if( i == 0 ){
  32.                 i = 0;
  33.                 elm(i);
  34.             }
  35.             else{
  36.                 i--;
  37.                 elm(i);
  38.             }
  39.         }
  40.     }
  41. })();

応用すればAjaxで本とか作れるね！

]]> http://hiropo.co.uk/archives/339/feed 0 JavaScriptのDateオブジェクトについて http://hiropo.co.uk/archives/329 http://hiropo.co.uk/archives/329#comments Fri, 13 Nov 2009 02:20:21 +0000 admin http://hiropo.co.uk/?p=329 ハマった・・・、がっつりハマった・・・。

DateオブジェクトのgetMonth()という月をとるメソッドがあるんですが、0～11の値が返ってくるんです。
0が1月で、11が12月。見事計算を間違えまして、(getMonth()+1) を先に変数に代入して、そこから1ヶ月計算する式をつくったのです。それがバグでした。11月から12月にかかるとき、11+1=12 にならないので、何でかなーと思っていたら、11までだったので、0に戻ってしまうんですね。なので、変数に代入せず、出力の際に直接、(getMonth()+1) を使えば良かったんです。

間違ったコード

PLAIN TEXT
JavaScript:
  1. var date = new Date( today.getFullYear(), (today.getMonth() + 1), (today.getDate() + arg) );
  2. return date.getFullYear() + '.' + date.getMonth() + '.' + date.getDate();

修正後

PLAIN TEXT
JavaScript:
  1. var date = new Date( today.getFullYear(), today.getMonth(), (today.getDate() + arg) );
  2. return date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate();

んー、なかなかどうしてミスってしまった・・・。
うっかりさんなんだぜ！

]]> http://hiropo.co.uk/archives/329/feed 0 JavaScript OOP入門編2 http://hiropo.co.uk/archives/319 http://hiropo.co.uk/archives/319#comments Tue, 27 Oct 2009 17:19:46 +0000 admin http://hiropo.co.uk/?p=319 こんぬつわ。JavaScript OOP入門その2です。久しぶりです。
ちなみにその1はこちらです。

僕自身もJavaScript、そんなによくわかってる訳ではないのですが、つらづら書いていきまする。

まず、型ってものをつくります。
Javaでいうところのクラス的なものです。JavaScriptはClassというものが存在しないので、functionで定義します。

PLAIN TEXT
JavaScript:
  1. var ObjectA = function(){
  2.     this._var;
  3.     this._method = function(arg){
  4.         return arg;
  5.     }
  6. }

1行目が型の定義になっています。functionになっていれば書き方は自由でおｋじゃないかと。
そして、このObjectAがもっている子要素オブジェクト（JSはすべてがオブジェクトとして扱う）は、型のない"_var"プロパティと、引数を返すだけの"_method"メソッドが定義されています。ObjectAの子要素として定義するため、"this"を使って定義しています。この"this"はObjectA自身への参照となります。

そして、この型はまだ実体化していないため、実体化して、実際に使える状態にします。

PLAIN TEXT
JavaScript:
  1. var objectA = new ObjectA();
  2. objectA._var = 'hello world';
  3. alert( objectA._method( objectA._var ) );

1行目で ObjectAをnewしてobjectAとして実体化します。設計図から実際に実体を作った状態です。
2行目では、_varプロパティにString型の"hello world" を代入しています。
3行目では、_methodを使って、_varに代入された値を返し、それをアラート表示しています。

なんだか文章が堅くなってつまんなくなってしまいました・・・。
次回もっとわかりやすく書こうと思います。

なんだか説明あってねーよ！まちがってんよ！とご指摘などありましたら恐縮ではございますが、ご指摘いただければ助かります。

ってな訳でまた来週！（やるのかな？）

]]> http://hiropo.co.uk/archives/319/feed 0 import.js って流行ってるの？ってことで自分なりにつくってみた http://hiropo.co.uk/archives/303 http://hiropo.co.uk/archives/303#comments Wed, 07 Oct 2009 15:43:18 +0000 admin http://hiropo.co.uk/?p=303 いつもならばJSファイルの読み込み方って、

PLAIN TEXT
HTML:
  1. <html lang="ja">
  3.  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  6.  
  7. <script type="text/javascript" src="./xxxxxxx.js"></script>
  8. <script type="text/javascript" src="./yyyyyyy.js"></script>
  9. <script type="text/javascript" src="./zzzzzzz.js"></script>
  10.  
  11. </head>
  13.  
  14. <h1>hello test</h1>
  15.  
  16. </body>
  17. </html>

みたいな感じで、headタグ内に読み込むJSファイルを直接書くけど、最近流行ってるのか、それとも廃れたのかわからないが、こんな感じのソースを見た。

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="./import.js"></script>

1つのJSファイルだけを読み込んで、その import.js にグローバルで読み込みたいJSファイルを document.write() で読み込むようだ。

そのソースには、

PLAIN TEXT
JavaScript:
  1. document.write( '<script type="text/javascript" src="./xxxxxxxx.js"></script>' );
  2. document.write( '<script type="text/javascript" src="./yyyyyyyy.js"></script>' );
  3. document.write( '<script type="text/javascript" src="./zzzzzzzz.js"></script>' );

というように書かれていた。

コレはなかなか面白いし、まとまって良いなと思ったので、自分も簡単にまとめてつくってみた。

PLAIN TEXT
JavaScript:
  1. /**
  2. *
  3. *   import.js
  4. *   JSファイルをまとめて読み込む
  5. */
  6. (function(){
  7.     var importSrc = function(e){
  8.         return '<script type="text/javascript" src="'+ e +'"></script>' + "\n";
  9.     }
  10.     var path = './static/common/js/';
  11.     //jQueryフレームワーク
  12.     document.write( importSrc( path + 'jquery-1.3.2.min.js' ) );
  13.     //サイト全体で使用するJS
  14.     document.write( importSrc( path + 'global.js' ) );
  15. })();

scriptタグを毎回書くのもめんどくさかったので、importSrc() というショートカット関数をつくってまとめてみた。

import.js を使ってみんなまとめちゃえば良いと思うよ！
そのページ独自で使うJSはまとめちゃダメだと思うけどねｗ

]]> http://hiropo.co.uk/archives/303/feed 0 フルFlashのサイトにHTMLフッターをつけてみる http://hiropo.co.uk/archives/300 http://hiropo.co.uk/archives/300#comments Fri, 02 Oct 2009 07:39:28 +0000 admin http://hiropo.co.uk/?p=300 フルFlashのサイトに対して、HTMLフッターをつけたいという要望があったので、つけてみることにした。
Flashの埋め込み方は、swfobject.js(versionは1.5)を使って埋めてみた。

PLAIN TEXT
HTML:
  1. <div id="content"><!-- ここにFlashがロードされます --></div>
  2. <script type="text/javascript" src="js/swfobject.js"></script>
  3. <script type="text/javascript">
  4. // <![CDATA[
  5.  
  6. var so = new SWFObject('swf/sample.swf', 'website', '100%', '100%', '9', '#ffffff');
  7. so.useExpressInstall('swf/expressinstall.swf');
  8. so.write('content');
  9.  
  10. // ]]>
  11. </script>

これでFlashがフルサイズで読み込まれる。

さて、今回はこれに対して、Flashの下に20pxばかりのHTMLでつくったフッターを埋め込みたい。
実装内容は下記の通り。

Flashを表示するエレメントの親要素に、全体レイアウトを設定する<div id="wrapper">を追加。この要素が実際にリサイズすることになる。
ウィンドウのサイズを取得して、それから20px引き、下部にHTML部分がピタっと出現するつくりにする。
フッターは、常にウィンドウ下部に固定することにする。

PLAIN TEXT
HTML:
  1. <div id="wrapper">
  2. <div id="content"><!-- ここにFlashがロードされます --></div>
  3. </div>
  4. <div id="footer">HTMLフッター部分</div>
  5. <style type="text/css">
  6. body {
  7.     position: relative;
  8. }
  9. #footer {
  10.     width: 100%;
  11.     height: 20px;
  12.     background: #000;
  13.     position: absolute;
  14.     left: 0;
  15.     bottom: 0;
  16.     color: #fff;
  17. }
  18. </style>
  19. <script type="text/javascript" src="js/swfobject.js"></script>
  20. <script type="text/javascript">
  21. // <![CDATA[
  22.  
  23. var so = new SWFObject('swf/sample.swf', 'website', '100%', '100%', '9', '#ffffff');
  24. so.useExpressInstall('swf/expressinstall.swf');
  25. so.write('content');
  26. (function(){
  27.     var resizeTo = function(e){
  28.         var winHeight = document.all ? (document.body.clientHeight - 20) : (window.innerHeight - 20);
  29.         var wrapper = document.getElementById(e);
  30.         wrapper.style.width = '100%';
  31.         wrapper.style.height = winHeight + 'px';
  32.     }
  33.     window.onload = function(){
  34.         resizeTo('wrapper');
  35.     }
  36.     window.onresize = function(){
  37.         resizeTo('wrapper');
  38.     }
  39. })();
  40.  
  41. // ]]>
  42. </script>

これでHTML要素のフッターを下部に維持しつつ、フルFlashを実現できる。
ってか、20pxあいてる時点でフルFlashじゃないじゃん！とかいう突っ込みはやめて～ｗ

]]> http://hiropo.co.uk/archives/300/feed 1 [mixiアプリ] マイミク一覧取得と、アプリ登録者を取得してみた http://hiropo.co.uk/archives/294 http://hiropo.co.uk/archives/294#comments Tue, 08 Sep 2009 15:45:55 +0000 admin http://hiropo.co.uk/?p=294 北海道旅行から帰ってきたら何もやる気が起きなくなった僕です。
こんばんは。

北の大地があまりに広大すぎて心が空っぽになってしまいました。

さて、久しぶりにJavaScript書いてみました。
今回もmixiアプリのチュートリアルです。

前々回くらいで自分のユーザー情報を取得するスクリプトはつくってみました。
今回は、マイミク一覧とアプリ使用者をフィルタリングして、アプリを使ってるマイミクのみを取得するというテストをつくってみました。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.  
  3.     /******************************************************************************************************
  4.     *
  5.     *   マイミク一覧を取得
  6.     *   ※このアプリに登録しているマイミクのみ
  7.     */
  8.     /**-------------------------------------
  9.     *   initを定義
  10.     */
  11.     function init(){
  12.         var ip = {};
  13.         ip[ opensocial.IdSpec.Field.USER_ID ] = opensocial.IdSpec.PersonId.VIEWER;
  14.         ip[ opensocial.IdSpec.Field.GROUP_ID ] = "FRIENDS";
  15.  
  16.         var idSpec = opensocial.newIdSpec( ip );
  17.  
  18.         var params = {};
  19.  
  20.         //アプリ使用者だけを抽出
  21.         params[ opensocial.DataRequest.PeopleRequestFields.FILTER ] = opensocial.DataRequest.FilterType.HAS_APP;
  22.  
  23.         //抽出したいパラメータをセット
  24.         params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
  25.             opensocial.Person.Field.PROFILE_URL,
  26.             opensocial.Person.Field.ADDRESSES,
  27.             opensocial.Person.Field.AGE,
  28.             opensocial.Person.Field.DATE_OF_BIRTH,
  29.             opensocial.Person.Field.GENDER,
  30.             opensocial.Person.Field.HAS_APP,
  31.             mixi.PersonField.BLOOD_TYPE
  32.         ];
  33.  
  34.         var rtn = '';
  35.  
  36.         var req = opensocial.newDataRequest();
  37.         req.add( req.newFetchPeopleRequest( idSpec, params ), "friends" );
  38.         req.send(function(data){
  39.             var friends = data.get( "friends" ).getData();
  40.             friends.each(function( friend ) {
  41.                 var id = friend.getId();
  42.                 var nickname = friend.getDisplayName();
  43.                 var thumbnailUrl = friend.getField( opensocial.Person.Field.THUMBNAIL_URL );
  44.  
  45.                 // プロフィール情報を使って処理
  46.                 rtn += '<div style="margin-bottom: 10px;">' + "\n";
  47.                 rtn += '[id]'+ id +"\n";
  48.                 rtn += '[nickname]'+ nickname + '<br />' +"\n";
  49.                 rtn += '<img src="'+ thumbnailUrl +'" />' +"\n";
  50.                 rtn += '</div>' + "\n";
  51.  
  52.                 var element = $( '#dev_field' );
  53.                 element.html( rtn );
  54.             });
  55.         });
  56.     }
  57.  
  58.     /*
  59.     *   init
  60.     */
  61.     gadgets.util.registerOnLoadHandler( init );
  62.  
  63. })();

デフォルトで表示される件数は20件までなようです。
さらに表示したい場合は、

PLAIN TEXT
JavaScript:
  1. params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;

をつかって、件数を取得するようです。
なんか、lengthやgetMyMixiLength()みたいなのないのかなぁ。

さらに、条件から一致した全体の数から、n件目から取得みたいなこともできる。

PLAIN TEXT
JavaScript:
  1. params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;
  2. params[ opensocial.DataRequest.PeopleRequestFields.FIRST ] = 30;

上の例だと、「50件中、30件目から取得」みたいなことができる。
公式のリファレンスまぁまぁわかりやすいんだけど、もっと細かいリファレンス欲しいなぁ。

]]> http://hiropo.co.uk/archives/294/feed 0 めちゃめちゃ若いのに…。 – jQueryちゃん http://hiropo.co.uk/archives/292 http://hiropo.co.uk/archives/292#comments Tue, 01 Sep 2009 15:39:13 +0000 admin http://hiropo.co.uk/?p=292 天才とはこのような少年のことをいうんだろうか。

]]> http://hiropo.co.uk/archives/292/feed 0 [mixiアプリ] 2ちゃんねるまとめサイトのRSSリーダーをつくってみた http://hiropo.co.uk/archives/289 http://hiropo.co.uk/archives/289#comments Sun, 23 Aug 2009 16:18:18 +0000 admin http://hiropo.co.uk/?p=289 いつも２ちゃんねるまとめサイトの巡回をするのだが、mixiアプリでRSSリーダーつくったら面白いかもと思い、1時間程度でmixiアプリをつくってみた。
google Ajax APIを使ったので、めちゃめちゃ簡単にできたお。

[mixi] 2ちゃんまとめRSSリーダー

mixiアプリおもしれいお（＾ｑ＾）

]]> http://hiropo.co.uk/archives/289/feed 0