Skip to content
This repository has been archived by the owner on Aug 25, 2020. It is now read-only.

kyo-ago/mist.js

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
test
test
 
 
README.markdown
README.markdown
 
 
conf.js
conf.js
 
 
mist.js
mist.js
 
 

Repository files navigation

コンセプト

JSを書かなくてもそこそこリッチなmixi appが作れるフレームワーク

機能

静的なhtmlの出力のみで以下のような機能が実装可能です。

  • OWNER、VIEWER情報の取得
  • マイミク情報の取得
  • 指定mixi IDユーザ情報の取得
  • 画面遷移の制御
  • 表示領域の自動調整
  • 「日記に書く」リンク
  • 「予定を追加する」リンク
  • アクティビティの発行
  • 「友達を誘う」機能
  • cookieのサポート
  • パーマネントリンク対応
  • 複数ユーザ情報をまとめて取得する機能
  • google analytics連携

また、ActionScript用のAPIも提供しています。

使い方

1, gadget.xmlのModule ModulePrefsに以下の内容を記述してください。

<Require feature="opensocial-0.8" />
<Require feature="dynamic-height" />
<Require feature="views" />

2, gadget.xmlのModule Content内に以下の内容を記述してください。
！！！アプリ公開時には必ずファイルを自分のサーバに保存してそこから読み込んでください！！！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://svn.coderepos.org/share/lang/javascript/jQuery.opensocial_simple/jquery.opensocial_simple.js"></script>
<script type="text/javascript" src="http://github.com/kyo-ago/mist.js/raw/master/mist.js"></script>
<script type="text/javascript">
$.extend(mist.conf, {
	// 初期表示ページ 
	'index_page' : '/index.html',
	// 相対リンクの基準URL 
	'api_url' : 'http://github.com/kyo-ago/mist.js/raw/master/test/'
});
</script>

3, [mixi] アプリを作成するからアプリを登録してください。

これでアプリ開始時にhttp://github.com/kyo-ago/mist.js/raw/master/test/index.htmlを読み込んで表示します。

テンプレート書式

サーバサイドから返されるhtmlはテンプレートとして解釈され、以下のような置き換えが行われます。
（置き換えはDOMの展開前に行うため、htmlの文法上正しいかどうかを考慮する必要はありません）

  • 「<div id="mist_content">」「<!-- /#mist_content --></div>」が存在する場合、間のhtml以外は削除されます。
    mixi外でコーディングの確認を行いたい場合に使用してください。
    ただし、上記記述は文字列として解釈されるため、コメントも含めて記述してください。
  • [%app_id%]はアプリのIDへ置き換えられます。
  • [%(OWNER|VIEWER) field="(\w+)"%]はそれぞれOWNER、VIEWERの情報に置き換えられます。
    使用できるパラメータは「fieldに指定できる値」を参照してください。
  • [%people id="(\d+)" field="(\w+)"%]は指定IDのmixiユーザ情報に置き換えられます。
    使用できるパラメータは「fieldに指定できる値」を参照してください。
  • [%friends filter="(has_app|all)"%]はマイミクIDを「,」で区切ったものに置き換えられます。
    has_appが指定された場合、マイミクのうち同じアプリを使用しているIDのみを取得します。filterにallを指定すると全マイミクのIDを取得します。filter自体を指定しない場合、has_appが指定されたものとして動作します。
    リンク先のパラメータに指定し、サーバサイドでページング、一覧表示を行うことを想定しています。
  • 以下のようなhtmlをアクティビティとして送信します。
    （アクティビティのみテンプレートから削除されないため、「style="display:none"」を設定してください）
<div id="mist_activity" style="display:none">
    <span class="activity_body">アクティビティ本文</span>
    <span class="activity_target">送信先mixi id,送信先mixi id...</span>
    <span class="activity_image">http://アクティビティ画像URL/file.(gif|jpe?g|png),http://アクティビティ画像URL/file.(gif|jpe?g|png)...</span>
    <span class="activity_params">アクティビティURLパラメータ</span>
    <span class="activity_priority">high or low</span>
</div>
  • 以下のようなhtmlでcookieの設定を行います。cookieの内容は以後、サーバに対してcookieとして送信されます。

</html> <!-- set-cookie:key=value; -->

  • [%permanent_link path="/api/path"%]は/api/pathのページの静的なURLへ置き換えられます。
    [%permanent_link%]だけを記述した場合、現在のページの静的なURLに置き換えられます。

fieldに指定できる値

以下の内容を指定可能ですが、id、nickname、has_app、profile_url、thumnail_url*、app_url以外はユーザの設定により取得できない場合があります。

id、nickname、has_app、profile_url、thumnail_url*、app_urlに関しては取得に失敗した場合でもダミーの情報を設定します。

[%(OWNER|VIEWER)%]、[%people%]はfieldが指定されていない場合、nicknameが指定されているものと仮定します。

  • id
    • mixi ID
  • nickname
    • ニックネーム
  • thumbnail_url
    • サムネイルURL（thumbnail_url_mと同じ）
  • thumbnail_url_l
    • サムネイルURL（180×180）
  • thumbnail_url_m
    • サムネイルURL（76×76）
  • thumbnail_url_s
    • サムネイルURL（40×40）
  • profile_url
    • プロフィールURL
  • app_url
    • このユーザのアプリ画面URL
  • current_location_text
    • current_location text（北海道～沖縄県のいずれか）
  • gender_key
    • gender key（MALE or FEMALE）
  • gender_text
    • gender text（男性 or 女性）
  • age
    • 年齢
  • date_of_birth_0day
    • 0補完された誕生日付（01～31のいずれか）
  • date_of_birth_0month
    • 0補完された誕生月（01～12のいずれか）
  • date_of_birth_day
    • 誕生日付（1～31のいずれか）
  • date_of_birth_month
    • 誕生月（1～12のいずれか）
  • date_of_birth_text
    • 0補完された誕生月日（01月01～12月31日のいずれか。mixiのプロフィールと同じ形式）
  • blood_type
    • 血液型（A～ABのいずれか）

linkの扱いに関して

リンククリック時にhrefの内容に応じて以下のような順番で処理を行います。
（「マイミクの招待」機能以外、target widnowはa要素のtarget属性に従います）

1, 「/opensocial/sharefriend/」で始まっていれば「マイミクの招待」機能を呼び出します。
URLに「/opensocial/sharefriend/#http://example.com/path」の形式でURLが設定されている場合、招待画面終了後、「http://example.com/path?recipientIds=招待したmixi id,招待したmixi id...」の形式でリクエストを行います。設定されているURLが「/」から始まっている場合、先頭にmist.conf.api_urlを追加してアクセスします。
クリエストからのレスポンスが「<」から始まっている場合、ページ内容の返却として通常の画面遷移と同じ処理を行います。
クリエストからのレスポンスが「{"redirect" : "/api/path"}」形式の場合、/api/pathへリダイレクトを行います。

2, 「http://mixi.jp/add\_diary.pl」と一致すれば日記を書く画面への遷移を行います。
テンプレート内に以下の形式で日記の内容を記述してください。

<div id="mist_diary" style="display:none">
	<input type="hidden" class="diary_title" value="日記タイトル" />
	<textarea class="diary_body">日記<br />本文</textarea>
</div>

3, 「http://mixi.jp/add\_schedule\_entry.pl」と一致すれば予定を追加する画面への遷移を行います。
テンプレート内に以下の形式で予定の内容を記述してください。

<div id="mist_schedule" style="display:none">
	<input type="hidden" class="schedule_title" value="予定タイトル" />
	<textarea class="schedule_details">予定<br />本文</textarea>
	<input type="hidden" class="schedule_year" value="2010" />
	<input type="hidden" class="schedule_month" value="10" />
	<input type="hidden" class="schedule_day" value="1" />
	<input type="hidden" class="schedule_hour" value="1" />
	<input type="hidden" class="schedule_minute" value="15" />
	<input type="hidden" class="schedule_recruit" value="0" />
	<input type="hidden" class="schedule_level" value="4" />
</div>

4, 「http://mixi.jp/」で始まっていればmixi内へのリンクと判断し、ブラウザの処理にゆだねます。

5, 「/」で始まっていればAPIへのアクセスと判断し、mist.conf.api_urlにhrefの内容を追加して新しいテンプレートを取得します。
（このときパーマネントリンクモードが設定されている場合のみ画面遷移を行います）

6, 「http://」で始まっていれば外部URLへのアクセスと判断し、mixi.util.requestExternalNavigateToで外部URLへ遷移します。

設定項目に関して

mist.confに設定可能な項目は以下の通りです。

  • api_url
    リンクURLの先頭につけられるURL。a[href],form[action]に使用。初期値gadget.xmlが設置されているドメインの「/」
  • index_page
    最初に取得するpath（api_url + index_pageを最初に取得）。初期値'/index.html'
  • no_index_load trueの場合自動的に最初のページを読み込まない。初期値undefined
  • doc_root_url
    画像URLの先頭につけられるURL。img[src]が/から始まっている場合使用（相対指定の場合使用しない）。初期値undefined（先頭に追加しない）
  • mist_template_filter_strip_mist_content_tags
    APIの返却値から切り出す文字列範囲。['開始文字列','終了文字列']の形式で指定。初期値['<div id="mist_content">', '<!-- /#mist_content --></div>']。DOM element、正規表現ではなく、単純な文字列であることに注意
  • auto_adjust
    立て幅の自動調整制御。falseの場合調整を行わない。初期値true（自動調整を行う）
  • absolute_height
    立て幅の絶対指定。Numberで指定。初期値undefined
  • permanent_link
    すべてのリンクを固定URLに書き換える。中クリックが動作するようになる代わり若干遅くなる。trueが設定された場合、リンククリック時に固定URLでの画面遷移を行う。初期値undefined
  • replace_href
    パーマネントリンクモード。trueが設定された場合、リンククリック時に固定URLでの画面遷移を行う。初期値undefined
  • OWNER_REQUIRE_APP_URL
    オーナーにアプリの所有を要求する（所有していない場合このURLへ移動）。''が指定された場合画面遷移を行わない。初期値http://mixi.jp/join\_appli.pl?id=app\_id
  • VIEWER_REQUIRE_APP_URL
    ビュアーにアプリの所有を要求する（所有していない場合このURLへ移動）。''が指定された場合画面遷移を行わない。初期値http://mixi.jp/join\_appli.pl?id=app\_id
  • REQUIRE_OWNER_EQ_VIEWER_URL
    オーナーとビュアーが同じであることを要求する（同じでない場合このURLへ移動）。''が指定された場合画面遷移を行わない。初期値http://mixi.jp/run\_appli.pl?id=app\_id
  • anonymous_user
    ユーザ情報の取得に失敗した場合の初期値。object。初期値は以下の通り
  • analytics_key
    Google Analyticsのkey（例 : UA-xxxxxxxx-x）。このパラメータを使用する場合、gadget.xmlに<Require feature="analytics" />を設定する。出力形式は以下の通り。
    '/(canvas|profile|home)/' + mist.page.serialize_url
  • analytics_url
    Google Analyticsへアクセスするiframeのurl（例 : http://example.com/ga.php）。 mixiはp3p headerを出力していないため、上記analytics_keyでは初期設定のIEとsafariのアクセスログは取得できない。その回避のため、p3p headerを出力するurlを外部iframeで読み込みアクセスログを取得する（ただし、この方法でもsafariのアクセスログは取得できない）。設定例の場合の出力形式は以下の通り。 '/ga.php/(canvas|profile|home)/' + mist.page.serialize_url
  • no_live_event
    通常のlive eventを設定しない（linkのclick、formのsubmitにeventの設定を行わない）。初期値false。自分でイベントの設定を行いたい場合に使用。

mist.jsを読み込んだ後に以下の形式で設定してください。

$.extend(mist.conf, {
	'index_page' : '/index.html',
	'doc_root_url' : 'http://github.com/kyo-ago/mist.js/raw/master/test/',
	'api_url' : 'http://github.com/kyo-ago/mist.js/raw/master/test/',
	// 以下同じ形式で内容を設定 
	'' : ''
});

URI parameterに関して

mist.jsを読み込み際に以下の形式でパラメータが指定可能です。

<script type="text/javascript" src="http://example.com/js/mist.js#key1=value1&key2=value2"></script>

設定できる内容は以下の通りです。

  • no_init=true
    初期URLの自動読み込みを行わない。初期URLのパラメータとしてユーザ情報を使用する場合や、flashのみのコンテンツの場合に使用

ActionScript用API

以下のAPIはActionScriptから呼び出されることを想定しています。

  • mist.as.call_get
    AUTHORIZATION = SIGNEDでのGET通信を行う。
    • 引数
      • url
        取得先URL
      • data
        URL parameter
      • callback_name
        callback function name。String。初期値mist_as_call_get
      • type
        取得形式の指定。'TEXT'か'JSON'が指定可能。初期値TEXT
  • mist.as.call_post
    AUTHORIZATION = SIGNEDでのPOST通信を行う。
    • 引数
      • url
        取得先URL
      • data
        URL parameter
      • callback_name
        callback function name。String。初期値mist_as_call_post
      • type
        取得形式の指定。'TEXT'か'JSON'が指定可能。初期値TEXT
  • mist.as.load_person
    ユーザ情報を取得する。
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_load_person。引数は以下の通り(Object)
        { 'OWNER' : アプリオーナーのpeople object, 'VIEWER' : アプリビュアーのpeople object }
  • mist.as.load_people
    ユーザ情報を取得する。
    • 引数
      • id_list
        取得対象のmixi id。String、Number、Array(String or Number)での指定が可能
      • param
        object。
      • callback_name
        callback function name。String。初期値mist_as_load_people。引数は以下の通り。peopleはid_listの順番で返ることが保証される
        { 'people' : [people object, ...] }
  • mist.as.load_friends
    マイミク情報を取得する。
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_load_friends。引数は以下の通り
        { 'friends' : [people object, ...]/* マイミクが居ない場合[] */ }
  • mist.as.share_app
    「友達を誘う」を実行する。マイミク一覧表示中はflashは重ね合わせ問題の回避のため非表示状態となる。
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_share_app。引数は以下の通り
        { 'recipientIds' : [誘ったmixi id, ...]/* 誘ったマイミクが居ない場合[] */ }
  • mist.as.get_permanent_link
    現在表示している画面の固定リンク用URLを取得する。
    • 引数
      • path
        対象URL用の固定リンクURLを返す
    • 返り値
      固定リンクURL。string
  • mist.as.throw_diary
    mixiの「日記を書く」画面へ遷移する。
    • 引数
      • title
        日記タイトル
      • body
        日記本文（改行可）
  • mist.as.throw_schedule
    mixiの「予定を追加する」画面へ遷移する。
    • 引数
      • title
        予定タイトル
      • body
        予定本文（改行可）
      • param 設定内容。object。設定可能な内容は以下の通り
        • year
          年初期値（2010-2011）
        • month
          月初期値（1-12）
        • day
          日初期値（1-31）
        • hour
          時初期値（0-23）
        • minute
          分初期値（0,15,30,45）
        • recruit
          参加者の募集（0,1。0=募集する、1=募集しない）
  • mist.as.throw_activity
    更新情報を送信する。
    • 引数
      • body
        アクティビティ本文
      • param
        設定内容。object。設定可能な内容は以下の通り
        • target
          アクティビティを送信するマイミクID（複数存在素場合「,」で区切る）
        • media_item
          アクティビティに表示する画像URL（複数存在素場合「,」で区切る。最大3つ。gif,jpg,pngのみ認識）
        • priority
          優先度。HIGH, LOWのいずれか。HIGHの場合、一時的にswfを非表示化する。
  • mist.as.navigate_to
    画面遷移を行う。
  • mist.as.get_owner_data
    OWNERの保存されている情報を取得する（mist.as.post_viewer_dataで保存した情報しか取得できない）
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_get_owner_data。引数は保存されているObject
  • mist.as.get_viewer_data
    VIEWERの保存されている情報を取得する（mist.as.post_viewer_dataで保存した情報しか取得できない）
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_get_viewer_data。引数は保存されているObject
  • mist.as.post_viewer_data
    VIEWERに情報を取得する（mist.as.post_viewer_dataで保存した情報を上書きする）
    • 引数
      • callback_name
        callback function name。String。初期値mist_as_post_viewer_data。引数はなし
  • mist.as.analytics_tracker
    analyticsにURLを送信する（mist.conf.analytics_key、mist.conf.analytics_urlのいずれかが必要）
    • 引数
      • 送信用URL。[%view%]は表示中のview（canvas,profile,homeのいずれか）に置き換えられる。[%url%]は現在表示しているページ固有の値へ置き換えられる。[%current%]は/[%view%]/[%url%]に置き換えられる。初期値[%current%]

以下の内容はActionScript用APIで共通の内容です。

  • people object
    以下のプロパティが存在するobjectです。
    id、nickname、has_app、profile_url、thumnail_url*、app_url以外はユーザの設定により取得できない場合があります。
    id、nickname、has_app、profile_url、thumnail_url*、app_urlに関しては取得に失敗した場合でもダミーの情報を設定します。

    • id
      • mixi ID
    • nickname
      • ニックネーム
    • thumbnail_url
      • サムネイルURL（thumbnail_url_mと同じ）
    • thumbnail_url_l
      • サムネイルURL（180×180）
    • thumbnail_url_m
      • サムネイルURL（76×76）
    • thumbnail_url_s
      • サムネイルURL（40×40）
    • profile_url
      • プロフィールURL
    • app_url
      • このユーザのアプリ画面URL
    • current_location_text
      • current_location text（北海道～沖縄県のいずれか）
    • gender_key
      • gender key（MALE or FEMALE）
    • gender_text
      • gender text（男性 or 女性）
    • age
      • 年齢
    • date_of_birth_0day
      • 0補完された誕生日付（01～31のいずれか）
    • date_of_birth_0month
      • 0補完された誕生月（01～12のいずれか）
    • date_of_birth_day
      • 誕生日付（1～31のいずれか）
    • date_of_birth_month
      • 誕生月（1～12のいずれか）
    • date_of_birth_text
      • 0補完された誕生月日（01月01～12月31日のいずれか。mixiのプロフィールと同じ形式）
    • has_app
      • アプリをインストールしているか否か（true or false。boolean）
    • blood_type
      • 血液型（A～ABのいずれか）

SIGNED通信に関して

以下のコードを実行することにより、以後すべての通信がAUTHORIZATION = SIGNEDとなります。

$os.ajaxSettings.AUTHORIZATION = 'SIGNED';

ただし、ActionScript用APIでの通信は上記設定によらず、必ずSIGNED通信となります。
（ASの場合、非signedで通信する必要性が低いため）

TODO

  • Message API
  • Albums API
  • Browser Cache
  • JS API documents
  • a[href="#top"]対応
  • ブラウザの「戻る」対応
  • デバッグモード機能（固定URLの表示。サーバ通信の表示。DOM展開前の表示）
  • 既読リンク、中クリック対応 -> ざっくり実装。既読リンクは要検討
  • テスト支援機能 -> ざっくり実装doc書く
  • conf内容をテンプレートで使えるようにする機能 -> ざっくり実装doc書く

About

mixiapp framework mist

Resources

Readme
Activity

Stars

23 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages