ひろぽっぽれす » Ajax

Titanium Studio でデスクトップアプリ開発に入門してみた

hirohi — Fri, 02 Sep 2011 10:05:09 +0000

こんぬつわ。ブログを放置してから早半年弱…。完全に放置してしまいました。
技術的にはいろんなことできるようになったのですが全然メモってませんでした…。
反省してます…。

ということできちんとブログを買いていこうかなと思い、最近ちょっとやってみようと思ったのが、Titanium Studio によるデスクトップアプリケーション開発！
なんと、みんなが大好きなHTML5+CSS3+JavaScript+Ruby+Python+PHP と、最近流行のweb系言語がだいたい使えちゃいます。Adobe AIRよりもこっちの方が良いんじゃないかって思ってみたり。

Titanium Studio は、Aptanaを買収し、AptanaとTitaniumががっちゃんこしたもの（？）みたいです。
Titanium はiPhone, Android でクロスデバイス開発をするための開発ツールで、iPhoneアプリやAndroidアプリを開発したことある人は知っているであろうと思うのでここでは割愛します。

それでは早速Titanium Studio でHello Worldしてみます。

まずはTitanium Studioをユーザー登録してダウンロードします。
http://www.appcelerator.com/

Titanium Studio を起動し、プロジェクトを新規でつくる

Titanium Desctop Project をつくる

Project Name を設定し、使用言語にRuby, Python, PHP をチェック

アプリケーション情報を設定する

ソースコードを書くために /Resources/index.html を開く

ソースコードを書く



	
		
		test
		
	
	
		test

アプリを実行してみる

デスクトップアプリができちゃった！

Pythonの中にRubyを書いたりJS書いたり何だか何でもアリのカオス状態ですが、面白いことできそうな予感がぷんぷんします。こういうの嫌いじゃない。

[mixiアプリ] マイミク一覧取得と、アプリ登録者を取得してみた

hirohi — Tue, 08 Sep 2009 15:45:55 +0000

北海道旅行から帰ってきたら何もやる気が起きなくなった僕です。
こんばんは。

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

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

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

(function(){

	/******************************************************************************************************
	*
	*	マイミク一覧を取得
	*	※このアプリに登録しているマイミクのみ
	*/
	/**-------------------------------------
	*	initを定義
	*/
	function init(){
		var ip = {};
		ip[ opensocial.IdSpec.Field.USER_ID ] = opensocial.IdSpec.PersonId.VIEWER;
		ip[ opensocial.IdSpec.Field.GROUP_ID ] = "FRIENDS";

		var idSpec = opensocial.newIdSpec( ip );

		var params = {};

		//アプリ使用者だけを抽出
		params[ opensocial.DataRequest.PeopleRequestFields.FILTER ] = opensocial.DataRequest.FilterType.HAS_APP;

		//抽出したいパラメータをセット
		params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
			opensocial.Person.Field.PROFILE_URL,
			opensocial.Person.Field.ADDRESSES,
			opensocial.Person.Field.AGE,
			opensocial.Person.Field.DATE_OF_BIRTH,
			opensocial.Person.Field.GENDER,
			opensocial.Person.Field.HAS_APP,
			mixi.PersonField.BLOOD_TYPE
		];

		var rtn = '';

		var req = opensocial.newDataRequest();
		req.add( req.newFetchPeopleRequest( idSpec, params ), "friends" );
		req.send(function(data){
			var friends = data.get( "friends" ).getData();
			friends.each(function( friend ) {
				var id = friend.getId();
				var nickname = friend.getDisplayName();
				var thumbnailUrl = friend.getField( opensocial.Person.Field.THUMBNAIL_URL );

				// プロフィール情報を使って処理
				rtn += '' + "\n";
				rtn += '[id]'+ id +"\n";
				rtn += '[nickname]'+ nickname + '
' +"\n";
				rtn += '' +"\n";
				rtn += '' + "\n";

				var element = $( '#dev_field' );
				element.html( rtn );
			});
		});
	}

	/*
	*	init
	*/
	gadgets.util.registerOnLoadHandler( init );

})();

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

params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;

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

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

params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;
params[ opensocial.DataRequest.PeopleRequestFields.FIRST ] = 30;

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

めちゃめちゃ若いのに…。 – jQueryちゃん

hirohi — Tue, 01 Sep 2009 15:39:13 +0000

天才とはこのような少年のことをいうんだろうか。

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

hirohi — Sun, 23 Aug 2009 16:18:18 +0000

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

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

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

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

hirohi — Sun, 23 Aug 2009 08:52:41 +0000

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

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

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

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

]]>

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

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

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

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

@charset "utf-8";
/*
*  mixiアプリ用CSS
*/

#dev_field {
  background: #ddd;
}

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

(function(){

  /******************************************************************************************************
  *
  *  mixiアプリAPIを使ってユーザー情報を取得してみる
  */
  /**-------------------------------------
  *  initを定義
  */
  function init() {

    /**-------------------------------------
    *  取得したい情報パラメータをセット
    */
    var params = {};
    params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
      opensocial.Person.Field.PROFILE_URL,
      opensocial.Person.Field.ADDRESSES,
      opensocial.Person.Field.AGE,
      opensocial.Person.Field.DATE_OF_BIRTH,
      opensocial.Person.Field.GENDER,
      opensocial.Person.Field.HAS_APP,
      mixi.PersonField.BLOOD_TYPE
    ];
    /**-------------------------------------
    *  リクエストを生成
    */
    var req = opensocial.newDataRequest();
    req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.VIEWER, params ), 'viewer' );
    req.send(function( data ){

      /**--------------------------------------------------------------------------
      *  var プロフィール情報を取得
      */
      /**-------------------------------------
      *  エレメントセット
      */
      var element = $( '#dev_field' );

      /**-------------------------------------
      *  アプリを使用しているユーザー情報をセット
      */
      var viewer = data.get( 'viewer' ).getData();

      //ニックネーム
      var user_name = viewer.getDisplayName();
      //ID
      var user_id = viewer.getId();
      //サムネイル画像
      var user_thumbnail = viewer.getField( opensocial.Person.Field.THUMBNAIL_URL );
      //プロフィールURL
      var user_url = viewer.getField( opensocial.Person.Field.PROFILE_URL );
      //出身地
      var user_pref = viewer.getField( opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS );
      //年齢
      var user_age = viewer.getField( opensocial.Person.Field.AGE );
      //誕生日
      var user_birth = viewer.getField( opensocial.Person.Field.DATE_OF_BIRTH );
      //性別
      var user_gender = viewer.getField( opensocial.Person.Field.GENDER ).getKey();
      //血液型
      var user_blood_type = viewer.getField( mixi.PersonField.BLOOD_TYPE );
      //このアプリをインストールしているか（戻り値:bool）
      var hasApp = viewer.getField( opensocial.Person.Field.HAS_APP );

      /**--------------------------------------------------------------------------
      *  プロフィール情報を使った処理
      */
      //HTMLテンプレート
      var template = '';
      template += '[user_name] '+ user_name +'' + "\n";
      template += '[user_id] '+ user_id +'' + "\n";
      template += '[user_thumbnail]
' + "\n";
      template += '[user_url] '+ user_url +'' + "\n";
      template += '[user_pref] '+ user_pref +'' + "\n";
      template += '[user_age] '+ user_age +'' + "\n";
      template += '[user_birth] '+ user_birth +'' + "\n";
      template += '[user_gender] '+ user_gender +'' + "\n";
      template += '[user_blood_type] '+ user_blood_type +'' + "\n";
      template += '[hasApp] '+ hasApp +'' + "\n";

      //出力
      element.html( template );

    });

  }

  //init
  gadgets.util.registerOnLoadHandler( init );

})();

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

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

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

Aptana1.5 インストールと日本語化

hirohi — Wed, 29 Jul 2009 16:44:46 +0000

こんぬつわ。
JavaとかRubyとかやろうかなと思いつつも、結局気づいたらJavaScriptしか書いてない僕です。

JavaScripterな人たちにとって有名か有名じゃないかわかりませんが、Adobe AIRでAjaxやらMXML+ActionScriptを使ってデスクトップアプリが簡単（？）に作れるオーサリングツール、Aptana。AIRアプリをつくるときにものすごく重宝しています。
Eclipseを元に開発されたらしいので、（Eclipseのプラグインとしてのインストールも可）Java開発ならEclipse、JavaScriptならAptanaというイメージで使っています。

元々英語なので、インストール後に日本語化しなくてはいけないので、簡単に手順を。

[1]
Aptana公式サイトからAptana本体をダウンロード

[2]
ダウンロード完了後、インストール。

[3]
英語のまま使いたかったらこのままでも使えますが、日本語化するため、eclipseの日本語化プラグインを使います。(aptanaはeclipseをベースに作られているため使用可能)。

こちらからPleiade（安定版）をダウンロードします。

[4]
Pleiadesを解凍し、featuresフォルダとpluginsフォルダをAptanaがインストールされているフォルダに移動し、コピーする。

[5]
AptanaStudio.iniに下記を追記する。
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

Aptanaを起動し、日本語化されていればインストール成功

環境が整ったら、AIRを開発するための環境を整えたりすればおｋ（＾ｑ＾）

urlエンコードと文字コード

hirohi — Tue, 14 Jul 2009 15:19:39 +0000

最近、外部のAPIを使うようになってから、文字コードに振り回される機会が多いのでちょっとメモっとく。

utf-8でエンコードされてるものを使う場合、htmlがShift_JISやeuc-jpの場合、utf-8でエンコードされたAPIを読み込む場合はsharsetに読み込み元の文字コードを記述する。

Firefoxやsafariといったブラウザは自動で内部変換してくれるのだが、IEは内部で変換してくれないのでこういった処置が必要になる。
もろもろめんどくさいが、指定しておいたほうが確実ですね。

FlashPlayerの有無を判別する構文 – JavaScript

hirohi — Wed, 03 Jun 2009 02:44:46 +0000

swfobject.js(ver_1.5)を使った場合のFlashPlayerの有無の判別。
いつもスクラッチするので、めんどくさいと思いメモ。

/*
*	swfobject.js(ver_1.5)を使った場合
*/
var so = new SWFObject('sample.swf', 'top', '100%', '394', '8', '#f2ebda');
if(so.installedVer.major >= 8){
/*-------------------------------------------------
*	FlashPlayer8以上がインストールされている場合、
*	トップページにFlashを表示する。
*/

}else{
/*-------------------------------------------------
*	FlashPlayer8以上がインストールされていない場合、
*	Adpbe公式のFlashPlayerのインストール画面へリンクする
*	画面を表示する。
*/

}

OS判別JS

hirohi — Wed, 20 May 2009 01:29:05 +0000

何か使えるかもしれないので、OS判別スクリプトをメモ

var getOS = function() {
   var agent = navigator.userAgent.toLowerCase() ;
   var Win_OS = agent.indexOf("win") != -1 ;
   var Mac_OS = agent.indexOf("mac") != -1 ;
   var Linux_OS = agent.indexOf("linux") != -1 ;
   var Other_OS = agent.indexOf("win") == -1 &&
   agent.indexOf("mac") == -1 &&
   agent.indexOf("linux") == -1 ;

   if(Win_OS){os = "Windows"}
   if(Mac_OS){os = "MacOS";}
   if(Linux_OS){os = "Linux";}
   if(Other_OS){os = "不明";}
   return os;
}

フォントサイズをうにゅうにゅさせてみた。

hirohi — Wed, 04 Mar 2009 16:11:09 +0000

フォントサイズをうにゅうにゅさせるJSを実装してみた。

動作デモはこちら

なんてこたぁないJSです。jQuery使ったら30分で実装できた。
jQuery、凄すぎる！

ついでに、ブラウザ閉じても最後に設定したフォントサイズを維持してくれるように
クッキーの制御入れてます。

ソースコードのダウンロードはこちら