2012年11月28日水曜日

Instagramへ画像をポストするモジュールを作ったよー


Titanium mobile "early" Advent Calender 28日目です。 

Titanium Mobileの最新事情に追いつけておらず、時代に取り残されていってる感が否めないのですが、相変わらずモジュールを書く機会だけはなんだかんだとありまして、最近書いたモジュールをご紹介したいと思います。

何を今更という感じなんですが、自分のアプリから画像とキャプションをInstagramへ渡してInstagramの投稿画面へ遷移するというモジュールです。

Androidであればインテントで済む話なんでしょうけど、iOSの場合はそうもいかずUIDocumentInteractionControllerを使ってモジュールを書いてあげる必要があります。

詳細については、下記URLを。
http://instagram.com/developer/iphone-hooks/


*使い方

モジュールには、isInstalledというプロパティとopenPhotoという関数しかありません。

isInstalledでInstagramがインストールされているか確認でき、openPhoto()で画像(blob)とキャプション(string)を渡してInstagramの投稿画面を開きます。



コードはこんな感じ。
var instagramUtil = require('jp.msmc.tiinstagramutil');
var window = Ti.UI.createWindow({});

var caption = Ti.UI.createTextField({
 top:50,
 width:240,
 height:40,
 hintText:'Enter caption here',
 borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
});
window.add(caption);

var button = Ti.UI.createButton({
 title:'Open photo gallery',
 width:Ti.UI.SIZE,
 height:32
});
window.add(button);

button.addEventListener('click', function(e){
 Ti.Media.openPhotoGallery({
  allowEditing:true,
  mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
  success:function(e){
   if(instagramUtil.isInstalled){
    instagramUtil.openPhoto({
     media:e.media,
     caption:caption.value
    });
   } else {
    alert("Instagram is not installed!");
   }
  },
 });
});

window.open();
もちろん実機じゃないとInstagramがインストールされていないので確認できません。


*ソースファイル

https://github.com/atsusy/TiInstagramUtil

MIT Licenseです。
Instagramじゃなく、他のアプリと連携したい場合の参考にでもなれば。


*作るのにかかった時間とハマったポイント

約3時間です。

openPhoto()をメインスレッドで動かすのをすっかり忘れてて全く動かず、なんでだなんでだあーと悩んでました。(よくあること)

ENSURE_UI_THREAD_1_ARGというマクロを使えば簡単にメインスレッドで動かせますよ。


以上です!質問等あれば @atsusy まで!




2012年9月14日金曜日

選択したテキストをgoogle翻訳してポップアップ表示するOS X Service


最近、英語を読んだり書いたりする機会が若干ながら増えてきたのですが、英文を書いたときに本当にこれで通じるんだろうか?と不安になる事が多く、とりあえず書いた英文をgoogle様に翻訳してもらって、それっぽい日本語に翻訳されると少し安心したりします。

そのときに、わざわざブラウザからgoogle翻訳のサイトを開いて英文をコピー&ペーストして、ってのが面倒くさくて、アプリからテキスト選択して一気に翻訳結果まで表示したいなあということで、Automatorでサービスを作ってみました。

使い方は、テキストを選択、右クリックして、サービスーgoogle翻訳を選択すると
ポップアップで翻訳結果が表示されるというものです。サービスにショートカットキーを設定してあげるともっと簡単です。(私はCommand+Ctrl+Tにしてる)

翻訳は英語から日本語の固定です。(そういう使い方しかしてないため、悪しからず)
それと、Webサイトポップアップを使っているので、OSX Lion以降じゃないとダメだと思います。



こちらからダウンロードして、zipファイルを展開して出来たワークフローを実行し、インストールを選ぶと利用可能です。

ご利用ください。もっといいやり方あるよって方は教えてください!



2012年8月15日水曜日

PaperFold for iOSのTitanium Mobileモジュールを作ったよー


※pullFactorを摩擦係数と表記してましたが、摩擦係数とは違っているようなので訂正します。ただの係数と表記を変えました。(この係数がどういう役割を果たすのか解析します --;

そろそろモジュールを書きたいなと思ってたところに、PaperFold for iOS というiOSのライブラリをTitanium Mobileのモジュールにしてくれない?っていう依頼があって、これがまたとてもおもしろいライブラリなのでやってみました。

PaperFold for iOSって?

1) 画面の左右に2つのビューが仕込んであります。
2) 真ん中のビューを左右にドラッグすると、左右の隠れていたビューが折り畳まれた紙を広げるように表れます。
3) 広げたビューは逆方向にドラッグすると今度は紙を折り畳むように隠れてゆきます。

実際に動いてるのを見た方が早いですね。


Copyright 2012, Semantic Press, Inc.

モジュールの使い方

ソースコードは、 https://github.com/atsusy/TiPaperFold 。ビルドの仕方は割愛しますが、Xcode 4.4以降じゃないとビルドできません。(元ライブラリがsynthesizeを省略しているので)

ビルドが成功するとjp.msmc.tipaperfold-iphone-0.1.zipというファイルが出来上がります。

1) jp.msmc.tipaperfold-iphone-0.1.zipをTitanium Mobileのプロジェクトディレクトリにコピー
2) tiapp.xmlのタグ内に
<module platform="iphone" version="0.1">jp.msmc.tipaperfold</module>
3) プロジェクトをリビルド


以上でモジュールをあなたのプロジェクトに組み込む事が出来ます。

(最近のTitanium Studioだとtiapp.xmlの設定画面から組み込む事が出来るようですが、あまり使ってないのでやり方がよく分かってません ^^;)

で、基本的な使い方ですが、3つのビュー(左、真ん中、右)を用意し、それをモジュールのcreatePaperFoldVIewに渡してあげると、PaperFoldViewのインスタンスを得る事が出来ますので、後はそれをwindowに乗せてあげるだけです。

右側のビューは、折りたたみの数(foldCount)と、係数(pullFactor)を指定できます。

以下、サンプルコード。

 var module = require('jp.msmc.tipaperfold');
 var window = Ti.UI.createWindow();
 
 var leftView = Ti.UI.createView({
  width:100,
  backgroundColor:'red'
 });
 
 var centerView = Ti.UI.createView({
  backgroundColor:'yellow'
 });
 
 var rightView = Ti.UI.createView({
  width:300,
  backgroundColor:'green'
 })
 
 var paperfoldView = module.createPaperFoldView({
  left:0,
  top:0,
  leftView:leftView,
  centerView:centerView,
  rightView:{
   view:rightView,
   foldCount:3,
   pullFactor:0.9
  }
 });
 
 window.add(paperfoldView);
 window.open();

2012年5月27日日曜日

Ti.Developers.drinking vol.2 行って来ました!最高!ひゃっほう!


5/23に大阪で"Ti.Developers.drinking vol.2"という Titanium Mobileに興味がある人たちが集まる飲み会がありまして、その中で話した内容についてちょっとまとめときます。

最近、iPhoneのアプリで画面をスライドすると、
その下から別の画面が表れてくるような Slide-Out-Navigationと呼ばれるインタフェースをみかけるようになりました。

FacebookやPath、最近だとSparrowなんかがそれを使っています。

で、以前にこのインタフェースをTitanium Mobileで再現されたうえまささん(記事はこちら) が「ボタンでしかスライドができない...」と嘆いておられたので、じゃあ私もチャレンジしてみようかと思い、せっかくなのでCommonJSモジュールにしておけばそれなりに簡単に使えちゃうんじゃないの?と頑張ってみました。

使い方とかはQiitaに投稿しましたので、ご興味のある方はチェックしてみてください。 iPhone 4/3GSでの動きをまだ確認できてないので、怪しいかもしれませんが...


シミュレーター上の動きはこんな感じです。