[mixiアプリ] 2ちゃんねるまとめサイトのRSSリーダーをつくってみた

2009年8月24日

カテゴリー: API, Ajax, JavaScript — admin @ 1:18 AM

いつも２ちゃんねるまとめサイトの巡回をするのだが、mixiアプリでRSSリーダーつくったら面白いかもと思い、1時間程度でmixiアプリをつくってみた。
google Ajax APIを使ったので、めちゃめちゃ簡単にできたお。

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

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

[mixiアプリ] ユーザー情報を取得してみた。

2009年8月23日

カテゴリー: API, Ajax, JavaScript — admin @ 5:52 PM

mixiでソーシャルアプリケーションアワードという開発者のためのイベントが行われているようです。
よくわかんないけど、mixiの情報を使って、アプリケーションが作れるmixiアプリを作って応募しよう！というものであるようです。

mixiアプリ開発のためのサイトまでできている。
で、このmixiアプリ、APIを公開しているので、APIを使ったAjax開発経験者なら誰でもすぐに開発ができるようです。mixiAPIは情報がリアルなユーザー情報だけに何だか面白そう！

ってなことで、mixiアプリに入門してみました。
mixiアプリを開発するには公開環境を登録するみたいなことをしなきゃならないようです。
（ここでは割愛します。）

まずは、mixiアプリの基盤ともいえるガジェットXMLを作ります。

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <module>
  4.   <modulePrefs title="mixiアプリのてすとやねん">
  5.     <require feature="opensocial-0.8" />
  6.   </modulePrefs>
  7.   <content type="html"><![CDATA[
  8.  
  9.   <!--||| head |||-->
  10.  
  11.   <!--||| StyleSheet |||-->
  12.   <link rel="stylesheet" href="http://funnythingz.com/mixi/test/css/style.css" type="text/css" media="screen,all" />
  13.  
  14.   <!--|| JavaScript FrameWork ||-->
  15.   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16.   <script type="text/javascript">google.load("jquery", "1.3.2");</script>
  17.  
  18.   <!--|| OriginalScript ||-->
  19.   <script type="text/javascript" src="http://funnythingz.com/mixi/test/js/test.js"></script>
  20.  
  21.   <!--||| /head |||-->
  22.  
  23.   <!--||| body |||-->
  24.  
  25.   <div id="dev_field"></div>
  26.  
  27.   <!--||| /body |||-->
  28.  
  29.   ]]></content>
  30. </module>

HTMLの書き方わかる人なら、普通のHTMLを書くように、書けば特に問題なし。
外部JSやCSSの読み込みもできる。

ちなみに、外部JSや外部CSSのパスは絶対パスで書くこと。
ファイルは自分で用意したサーバに置く。

次に、外部CSSと外部JSを用意する。
ガジェットXMLのみですべて済ませたい人はそれで特に問題なし。
大規模な開発を行うならやはりファイルは分けておいたほうが後々わかり易い。

CSSはフィールド背景に色をつけてみた。
これで出力される場所がわかる。

PLAIN TEXT
CSS:
  1. @charset "utf-8";
  2. /*
  3. *  mixiアプリ用CSS
  4. */
  5.  
  6. #dev_field {
  7.   background: #ddd;
  8. }

次にJSファイルの用意。コア部分のプログラミングになるので、JSは外部ファイルにすることを推奨。
今回はmixiアプリにアクセスしたユーザー情報を取得してみる。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.  
  3.   /******************************************************************************************************
  4.   *
  5.   *  mixiアプリAPIを使ってユーザー情報を取得してみる
  6.   */
  7.   /**-------------------------------------
  8.   *  initを定義
  9.   */
  10.   function init() {
  11.  
  12.     /**-------------------------------------
  13.     *  取得したい情報パラメータをセット
  14.     */
  15.     var params = {};
  16.     params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
  17.       opensocial.Person.Field.PROFILE_URL,
  18.       opensocial.Person.Field.ADDRESSES,
  19.       opensocial.Person.Field.AGE,
  20.       opensocial.Person.Field.DATE_OF_BIRTH,
  21.       opensocial.Person.Field.GENDER,
  22.       opensocial.Person.Field.HAS_APP,
  23.       mixi.PersonField.BLOOD_TYPE
  24.     ];
  25.     /**-------------------------------------
  26.     *  リクエストを生成
  27.     */
  28.     var req = opensocial.newDataRequest();
  29.     req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.VIEWER, params ), 'viewer' );
  30.     req.send(function( data ){
  31.  
  32.       /**--------------------------------------------------------------------------
  33.       *  var プロフィール情報を取得
  34.       */
  35.       /**-------------------------------------
  36.       *  エレメントセット
  37.       */
  38.       var element = $( '#dev_field' );
  39.  
  40.       /**-------------------------------------
  41.       *  アプリを使用しているユーザー情報をセット
  42.       */
  43.       var viewer = data.get( 'viewer' ).getData();
  44.  
  45.       //ニックネーム
  46.       var user_name = viewer.getDisplayName();
  47.       //ID
  48.       var user_id = viewer.getId();
  49.       //サムネイル画像
  50.       var user_thumbnail = viewer.getField( opensocial.Person.Field.THUMBNAIL_URL );
  51.       //プロフィールURL
  52.       var user_url = viewer.getField( opensocial.Person.Field.PROFILE_URL );
  53.       //出身地
  54.       var user_pref = viewer.getField( opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS );
  55.       //年齢
  56.       var user_age = viewer.getField( opensocial.Person.Field.AGE );
  57.       //誕生日
  58.       var user_birth = viewer.getField( opensocial.Person.Field.DATE_OF_BIRTH );
  59.       //性別
  60.       var user_gender = viewer.getField( opensocial.Person.Field.GENDER ).getKey();
  61.       //血液型
  62.       var user_blood_type = viewer.getField( mixi.PersonField.BLOOD_TYPE );
  63.       //このアプリをインストールしているか（戻り値:bool）
  64.       var hasApp = viewer.getField( opensocial.Person.Field.HAS_APP );
  65.  
  66.       /**--------------------------------------------------------------------------
  67.       *  プロフィール情報を使った処理
  68.       */
  69.       //HTMLテンプレート
  70.       var template = '';
  71.       template += '<div>[user_name] '+ user_name +'</div>' + "\n";
  72.       template += '<div>[user_id] '+ user_id +'</div>' + "\n";
  73.       template += '<div>[user_thumbnail]<br /><img src="'+ user_thumbnail +'" alt="'+ user_name +'" /></div>' + "\n";
  74.       template += '<div>[user_url] <a href="'+ user_url +'" target="_blank">'+ user_url +'</a></div>' + "\n";
  75.       template += '<div>[user_pref] '+ user_pref +'</div>' + "\n";
  76.       template += '<div>[user_age] '+ user_age +'</div>' + "\n";
  77.       template += '<div>[user_birth] '+ user_birth +'</div>' + "\n";
  78.       template += '<div>[user_gender] '+ user_gender +'</div>' + "\n";
  79.       template += '<div>[user_blood_type] '+ user_blood_type +'</div>' + "\n";
  80.       template += '<div>[hasApp] '+ hasApp +'</div>' + "\n";
  81.  
  82.       //出力
  83.       element.html( template );
  84.  
  85.     });
  86.  
  87.   }
  88.  
  89.   //init
  90.   gadgets.util.registerOnLoadHandler( init );
  91.  
  92. })();

これで、ユーザー情報の取得ができる。
あとは煮るなり焼くなり好きに調理してアプリを開発すればおｋ。

つくったmixiアプリの実行方法だが、mixiアプリ オープンβというコミュニティに参加しなくてはならない。
まだβ版だから仕方ないのか？いまいちこのめんどくさい作業は省いてもらいたいなぁ。

他に指定IDのユーザー情報やマイミク一覧の情報なども取得できるよう。
他APIと組み合わせてアプリを開発することも可能なので、けっこう盛り上がる予感がしますね。

ディレクトリごとFTPでアップロードしてくれるスクリプト – コマンドラインPHP

カテゴリー: Linux, PHP, pear — admin @ 3:17 AM

JavaScriptネタばかりで飽きてきたので、PHPネタでも書いてみる。
最近はまっているのは、webアプリケーションを作るためのPHPではなく、コマンドラインでいろいろできるPHPスクリプトを組むことです。

bashでも良いんだけど、やはり物足りないので、（と言ってもそこまで使いこなしていない・・・。）Pythonという選択肢もあるけど、Pythonわかんないので、PHPを使って、ディレクトリごとFTPでアップロードしてくれるスクリプトを書いてみた。

PEARライブラリを使ったソースコードになっているので、このクラスを使う場合、PEARのインストールが必要になってくる。

まずは、型となる ftp_dir_put.class を定義する。
ファイル名は ftp_dir_put.php で保存。

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. /*****************************************************
  4. *
  5. *  ftp_dir_put.class
  6. *
  7. *  ftpアップロードをディレクトリ単位で実行するクラス
  8. *  Terminal上での実行専用
  9. *
  10. *****************************************************/
  11.  
  12. require_once 'Net/FTP.php';
  13.  
  14. class ftp_dir_put {
  15.  
  16.   /*-------------------------------------
  17.   *  コンストラクタ
  18.   */
  19.   public function ftp_dir_put( $ftp_server, $ftp_user_name, $ftp_user_pass, $remote_dir, $local_dir, $mode ){
  20.     /*-------------------------------------
  21.     *  $target_hostオブジェクトを生成
  22.     */
  23.     $target_host = new Net_FTP( $ftp_server, 21 );
  24.  
  25.     //ftpサーバに接続
  26.     if( $target_host->connect( $ftp_server  ) ){
  27.  
  28.       print $ftp_server.' に接続しました'."\n";
  29.  
  30.       //接続後、ログイン認証
  31.       if( $target_host->login( $ftp_user_name, $ftp_user_pass ) ){
  32.         print $ftp_server.' にログインしました'."\n";
  33.         print $local_dir.' を '.$remote_dir.' にアップロードしています･･･'."\n";
  34.  
  35.         if( $target_host->putRecursive( $local_dir, $remote_dir, $mode ) ){
  36.  
  37.           print 'アップロードが終わりました'."\n";
  38.           if( $target_host->disconnect() ){
  39.             print 'ログアウトしました'."\n";
  40.           }
  41.           else{
  42.             print 'ログアウトに失敗しました'."\n";
  43.           }
  44.         }
  45.         else{
  46.           print 'アップロードに失敗しました'."\n";
  47.           if( $target_host->disconnect() ){
  48.             print 'ログアウトしました'."\n";
  49.           }
  50.           else{
  51.             print 'ログアウトに失敗しました'."\n";
  52.           }
  53.         }
  54.       }
  55.       else{
  56.         print 'ログイン失敗しました'."\n";
  57.       }
  58.     }
  59.     else{
  60.       print $ftp_server.' に接続できません'."\n";
  61.     }
  62.   }
  63. }
  64.  
  65. ?>

そして、この ftp_dir_put.class を newして実行するファイルを作成
ファイル名は、test_host.php とかで保存。

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. require_once 'ftp_dir_put.php';
  4.  
  5. function init(){
  6.  
  7.   /*-------------------------------------
  8.   *  プロパティセット
  9.   */
  10.   $ftp_server = 'host_name';       //ftpサーバーアドレス
  11.   $ftp_user_name = 'user_name';    //ユーザー名
  12.   $ftp_user_pass = 'user_pass';    //パスワード
  13.   $remote_dir = '/';               //サーバー側ディレクトリパス
  14.   $local_dir = '/var/www/html/';   //ローカル側ディレクトリパス
  15.   $mode = true;                    //オーバーライド
  16.  
  17.   /*-------------------------------------
  18.   *  実行オブジェクト
  19.   */
  20.   $test_init = new ftp_dir_put(
  21.     $ftp_server,
  22.     $ftp_user_name,
  23.     $ftp_user_pass,
  24.     $remote_dir,
  25.     $local_dir,
  26.     $mode
  27.   );
  28.  
  29. }
  30.  
  31. init();
  32.  
  33. ?>

これで、あとはコマンドラインにて、この test_host.php を実行

PLAIN TEXT
CODE:
  1. [user@host ~]$ php test_host.php

で、あとは勝手にアップロードしてくれる。
PEAR、凄いよ、PEAR。

yumで、proftpd インストール – CentOS

2009年8月22日

カテゴリー: Linux, proftpd — admin @ 4:53 PM

SCPを使ってファイルのアップロードを行っていたが、WinSCPの使い勝手が悪いので、proftpdを突っ込んで、FTPサーバを作ることにした。やっぱりNeｘｔFTPを使いたい。

OSはCenｔOS、Fedora系は全般的にやり方は同じ。
ソースからのコンパイルインストールではなく、yumでインストールすることにする。

proftpdを直接起動するのではなく、xinetd経由での起動にする。

PLAIN TEXT
CODE:
  1. [root@host ~]# rpm -q proftpd
  2. パッケージ proftpd はインストールされていません。
  3. [root@host ~]# yum install proftpd
  4.  
  5. [root@host ~]# rpm -q xinetd
  6. パッケージ xinetd はインストールされていません。
  7. [root@host ~]# yum install xinetd
  8.  
  9. [root@host ~]# vi /etc/proftpd.conf
  10.  
  11. ▽変更箇所
  12.  
  13. #ServerType                     standalone
  14. ServerType                      inetd
  15.  
  16. #DefaultRoot                    ~ !adm
  17. DefaultRoot                     ~/public_html !wheel
  18.  
  19.  
  20. [root@host ~]# vi /etc/xinetd.d/xproftpd
  21.  
  22. #disable                 = yes
  23. disable                 = no
  24.  
  25. [root@host ~]# /etc/rc.d/init.d/xinetd start

xinetd経由でないと起動できないようにしたので、万が一、proftpdを単体起動しようとしても、エラーが出て起動できず。
あとはFTPクライアントソフト（NextFTPやFFFTPなど）を使ってFTP接続できてるなら成功である。

繋がらない場合は、ファイヤーウォールなどポートの見直しなどをすること。

幼少期のゲイツ – Crazy frog bros !Very funny!

2009年8月21日

カテゴリー: crack, つれDUれ, バグ — admin @ 12:53 AM

どうやらオリジナルなようです。

▼The Real Crazy Frog Bros - Take4

▼The Real Crazy Frog Bros - Take3

JavaScript OOP 入門編1

2009年8月13日

カテゴリー: JavaScript, オブジェクト指向 — admin @ 12:09 PM

JavaScriptはプロトタイプベースのオブジェクト指向言語です。
昨今ではJavaやC++、C#などによるクラスベースのオブジェクト指向言語が俗にいうオブジェクト指向と呼ばれてます。JavaScriptはプロトタイプベースというちょっと聞きなれないオブジェクト指向言語ですが、オブジェクト指向には代わりはないので、ようは慣れの問題なのかなぁと。

ということで、JavaScript歴6ヶ月程度の僕が、JavaScriptのオブジェクト指向講座を気が向いたらこのブログに書いていきます。

とりあえず入門編1ということで、簡易的なソースを書きます。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     if( !ahya ){
  3.         var ahya = {}
  4.         ahya = function(arg){
  5.             alert(arg);
  6.         }
  7.         ahya.prototype = {
  8.             message: function(e){
  9.                 return e;
  10.             }
  11.         }
  12.         var instance = new ahya('ahya');
  13.         alert( instance.message('ここにいれたテキストを表示') );
  14.     }
  15. })();

これを実行すると、アラートが2回表示されます。
1回目は、'ahya'、2回目は、'ここにいれたテキストを表示' （←これは自由に書き換えて良いです。）が表示されると思います。

さて、実際にはどんなことをしているのか、先ほどのソースに注釈を入れてみました。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     //ahyaオブジェクトがない場合、
  3.     if( !ahya ){
  4.         //ahyaオブジェクトを初期化
  5.         var ahya = {}
  6.         //ahyaオブジェクトのコンストラクタを定義
  7.         ahya = function(arg){
  8.             alert(arg);
  9.         }
  10.         //ahyaオブジェクトへprototypeを通じて、子要素を追加
  11.         ahya.prototype = {
  12.             //messageメソッドを追加
  13.             message: function(e){
  14.                 return e;
  15.             }
  16.         }
  17.         //ahyaオブジェクトからインスタンスを生成し、
  18.         //コンストラクタメソッドとmessageメソッドを実行
  19.         var instance = new ahya('ahya');
  20.         alert( instance.message('ここにいれたテキストを表示') );
  21.     }
  22. })();

これでだいたいやってることはわかると思います。
プロトタイプベースもクラスベースと書き方のイメージは似ていると思います。
型（クラス）をつくって、インスタンスを生成してコンストラクタがあればコンストラクタが実行されるという流れまでは同じかな？

次回からもっと突っ込んだことを書いていこうと思います。
今回はここまで！

.haribote CSS画像置換

カテゴリー: (X)HTML+CSS — admin @ 11:10 AM

CSSでの画像置換にはやり方がたくさんあるが、その中でもこの .haribote は最も強力な画像置換CSSと言えるだろう。
画像オフの場合でもテキストが表示され、ロールオーバーも実現出来、かつ、SEO対策もばっちりである。

text-indent: -9999em; や、spanでテキスト囲ってを visibility: hidden; にしたりといった従来のテキストを無理やり飛ばしたり隠したりするのではなく、テキストはそこに残したままなのである。
テキストの上に画像を被せることによって .haribote は画像置換を実現している。

#画像は200px×80pxで、上にロールオーバー前の画像、
#下にロールーオーバー後の画像を上下にくっつける形で用意する。

PLAIN TEXT
HTML:
  1. <div id="replace_img"><a href="#dummy" class="haribote">バナーボタン<span></span></a></div>

PLAIN TEXT
CSS:
  1. /*
  2. *    haribote
  3. */
  4. .haribote,
  5. .haribote span {
  6.     display: block;
  7.     overflow: hidden;
  8. }
  9. .haribote {
  10.     position: relative;
  11. }
  12. .haribote span {
  13.     position: absolute;
  14.     top: 0; left: 0;
  15.     cursor: pointer;
  16. }
  17.  
  18. /**/
  19. #replace_img a,
  20. #replace_img a span {
  21.     width: 200px;
  22.     height: 40px;
  23. }
  24. #replace_img a span {
  25.     background: url(replace_img.gif) no-repeat 0 0;
  26. }
  27. #replace_img a:hover span {
  28.     background-position: 0 -40px;
  29. }

ソースをみてもらえばわかるが、テキストの上に、positionで画像をのっけているだけの非常にシンプルな構造になっている。

個人的な見解ですが、今のところ .haribote を越えるCSS画像置換には未だ出会っていない。
他に素晴らしいソースがあればぜひ教えてくださいませ。

モジュールCSS

2009年8月11日

カテゴリー: (X)HTML+CSS — admin @ 4:05 PM

CSSでよく使うモジュールをまとめてみた。
とりあえず基本的なクラスだけ。

PLAIN TEXT
CSS:
  1. /**
  2. *
  3. *    module.css
  4. */
  5.  
  6. /*    font
  7. ----------------------------------------------*/
  8. .xlf {font-size: 125% !important;}
  9. .lf {font-size: 115% !important;}
  10. .sf {font-size: 85% !important;}
  11. .xsf {font-size: 75% !important;}
  12.  
  13. .fb {font-weight: bold !important;}
  14. .fn {font-weight: normal !important;}
  15.  
  16. /*    margin padding
  17. ----------------------------------------------*/
  18. /* margin */
  19. .m10 {margin:10px !important;}
  20. .m20 {margin:20px !important;}
  21. .m30 {margin:30px !important;}
  22. .m40 {margin:40px !important;}
  23. .m50 {margin:50px !important;}
  24. /* padding */
  25. .p10 {padding:10px !important;}
  26. .p20 {padding:20px !important;}
  27. .p30 {padding:30px !important;}
  28. .p40 {padding:40px !important;}
  29. .p50 {padding:50px !important;}
  30.  
  31. /* detail */
  32. .mt0 {margin-top:0 !important;}
  33. .mt1 {margin-top:1px !important;}
  34. .mt2 {margin-top:2px !important;}
  35. .mt3 {margin-top:3px !important;}
  36. .mt4 {margin-top:4px !important;}
  37. .mt5 {margin-top:5px !important;}
  38. .mt10 {margin-top:10px !important;}
  39. .mt11 {margin-top:11px !important;}
  40. .mt12 {margin-top:12px !important;}
  41. .mt13 {margin-top:13px !important;}
  42. .mt14 {margin-top:14px !important;}
  43. .mt15 {margin-top:15px !important;}
  44. .mt20 {margin-top:20px !important;}
  45. .mt25 {margin-top:25px !important;}
  46. .mt30 {margin-top:30px !important;}
  47. .mt35 {margin-top:35px !important;}
  48. .mt40 {margin-top:40px !important;}
  49. .mt45 {margin-top:45px !important;}
  50. .mt50 {margin-top:50px !important;}
  51. .mt55 {margin-top:55px !important;}
  52. .mt60 {margin-top:60px !important;}
  53. .mt65 {margin-top:65px !important;}
  54. .mt70 {margin-top:70px !important;}
  55. .mt75 {margin-top:75px !important;}
  56. .mt80 {margin-top:80px !important;}
  57. .mt85 {margin-top:85px !important;}
  58. .mt90 {margin-top:90px !important;}
  59. .mt95 {margin-top:95px !important;}
  60. .mt100 {margin-top:100px !important;}
  61.  
  62. .mb0 {margin-bottom:0px !important;}
  63. .mb5 {margin-bottom:5px !important;}
  64. .mb10 {margin-bottom:10px !important;}
  65. .mb15 {margin-bottom:15px !important;}
  66. .mb20 {margin-bottom:20px !important;}
  67. .mb25 {margin-bottom:25px !important;}
  68. .mb30 {margin-bottom:30px !important;}
  69. .mb35 {margin-bottom:35px !important;}
  70. .mb40 {margin-bottom:40px !important;}
  71. .mb45 {margin-bottom:45px !important;}
  72. .mb50 {margin-bottom:50px !important;}
  73.  
  74. .ml0 {margin-left:0 !important;}
  75. .ml1 {margin-left:1px !important;}
  76. .ml2 {margin-left:2px !important;}
  77. .ml3 {margin-left:3px !important;}
  78. .ml4 {margin-left:4px !important;}
  79. .ml5 {margin-left:5px !important;}
  80. .ml6 {margin-left:6px !important;}
  81. .ml7 {margin-left:7px !important;}
  82. .ml8 {margin-left:8px !important;}
  83. .ml9 {margin-left:9px !important;}
  84. .ml10 {margin-left:10px !important;}
  85. .ml15 {margin-left:15px !important;}
  86. .ml20 {margin-left:20px !important;}
  87.  
  88. .mr0 {margin-right:0px !important;}
  89. .mr1 {margin-right:1px !important;}
  90. .mr2 {margin-right:2px !important;}
  91. .mr3 {margin-right:3px !important;}
  92. .mr4 {margin-right:4px !important;}
  93. .mr5 {margin-right:5px !important;}
  94. .mr6 {margin-right:6px !important;}
  95. .mr7 {margin-right:7px !important;}
  96. .mr8 {margin-right:8px !important;}
  97. .mr9 {margin-right:9px !important;}
  98. .mr10 {margin-right:10px !important;}
  99. .mr15 {margin-right:15px !important;}
  100. .mr20 {margin-right:20px !important;}
  101.  
  102. .pt0 {padding-top:0px !important;}
  103. .pt5 {padding-top:5px !important;}
  104. .pt10 {padding-top:10px !important;}
  105. .pt15 {padding-top:15px !important;}
  106. .pt20 {padding-top:20px !important;}
  107. .pt25 {padding-top:25px !important;}
  108. .pt30 {padding-top:30px !important;}
  109. .pt35 {padding-top:35px !important;}
  110. .pt40 {padding-top:40px !important;}
  111. .pt100 {padding-top:100px !important;}
  112.  
  113. .pb0 {padding-bottom:0px !important;}
  114. .pb5 {padding-bottom:5px !important;}
  115. .pb10 {padding-bottom:10px !important;}
  116. .pb15 {padding-bottom:15px !important;}
  117. .pb20 {padding-bottom:20px !important;}
  118. .pb25 {padding-bottom:25px !important;}
  119. .pb30 {padding-bottom:30px !important;}
  120. .pb35 {padding-bottom:35px !important;}
  121. .pb40 {padding-bottom:40px !important;}
  122. .pb45 {padding-bottom:45px !important;}
  123. .pb50 {padding-bottom:50px !important;}
  124.  
  125. .pl0 {padding-left:0 !important;}
  126. .pl5 {padding-left:5px !important;}
  127. .pl10 {padding-left:10px !important;}
  128. .pl15 {padding-left:15px !important;}
  129. .pl20 {padding-left:20px !important;}
  130. .pl25 {padding-left:25px !important;}
  131. .pl30 {padding-left:30px !important;}
  132. .pl35 {padding-left:35px !important;}
  133. .pl40 {padding-left:40px !important;}
  134. .pl45 {padding-left:45px !important;}
  135. .pl50 {padding-left:50px !important;}
  136.  
  137. .pr0 {padding-right:0 !important;}
  138. .pr5 {padding-right:5px !important;}
  139. .pr10 {padding-right:10px !important;}
  140. .pr15 {padding-right:15px !important;}
  141. .pr20 {padding-right:20px !important;}
  142. .pr25 {padding-right:25px !important;}
  143. .pr30 {padding-right:30px !important;}
  144. .pr35 {padding-right:35px !important;}
  145. .pr40 {padding-right:40px !important;}
  146. .pr45 {padding-right:45px !important;}
  147. .pr50 {padding-right:50px !important;}
  148.  
  149.  
  150. /*    visual
  151. ----------------------------------------------*/
  152. .pointer {cursor: pointer !important;}
  153.  
  154. /*    collum
  155. ----------------------------------------------*/
  156. .pane2 {width: 48% !important;}
  157. .pane3 {width: 32% !important;}
  158. .pane4 {width: 24% !important;}
  159.  
  160.  
  161. /*    position
  162. ----------------------------------------------*/
  163. .fl {float: left;}
  164. .fr {float: right;}
  165. .ft {
  166.     overflow: hidden;
  167.     zoom: 1;
  168. }
  169.  
  170. .vt {vertical-align: top !important;}
  171. .vm {vertical-align: middle !important;}
  172. .vb {vertical-align: bottom !important;}
  173.  
  174. .center {
  175.     margin-left: auto;
  176.     margin-right: auto;
  177.     text-align: center !important;
  178. }
  179. .center > *{
  180.     margin-left: auto;
  181.     margin-right: auto;
  182. }
  183. .right {text-align: right !important;}
  184. .right > *{
  185.     margin-left: auto;
  186.     margin-right: 0;
  187. }
  188. .left {text-align: left !important;}
  189. .left > *{
  190.     margin-left: 0;
  191.     margin-right: auto;
  192. }
  193. /* visual none */
  194. .none {
  195.     display: none !important;
  196. }
  197. .vnone {
  198.     visibility: hidden !important;
  199. }
  200. /* nobr */
  201. .nobr {
  202.     white-space: nowrap !important;
  203. }

google Android をエミュレートしてみた

2009年8月10日

カテゴリー: Android — admin @ 12:06 AM

ドコモからgoogleのオープンソースOS、Androidを搭載したスマートフォンが発売された。
ＬｉｎｕｘカーネルをベースにつくられたＡｎｄｒｏｉｄはオープンソースのため、誰でもカスタマイズができる。
ＥｃｒｉｐｓｅでＡｎｄｒｏｉｄで動かすアプリの開発ができるので、早速環境を整え、Ａｎｄｒｏｉｄをエミュレートしてみた。

▼自分のサイトを2つ開いてみた。

▼funnythingz.comをフルで開いてみた。

▼Ｌｉｎｕｘベースのため、ターミナルが使える。

ターミナルはiPhoneでも使えるが、Ｊａｉlbreakしなければならない。

ＡｎｄｒｏｉｄはＪａｖａで開発できるので、iPhone開発のように、Objectiv-Cなど新たに覚える必要もないし、開発者にとっての敷居がかなり低いと思われるので、今後流行りそうな予感はするが、一般ユーザーに対しては全然iPhoneのほうがまだまだ強いんだろうなぁ。

アド広告 – mixi Flash編

2009年8月9日

カテゴリー: Flash — admin @ 4:27 PM

mixiで面白いアド広告を見つけた。

これ、3箇所の広告スペースがあるんだけど、その全部を使ってＦｌａｓｈを埋め込んでいる。
で、この3箇所のスペースのＦｌａｓｈが連動して動いている。

これはなかなか面白いなぁと思ったので書き留めてみた。