Pluginの開発から公開まで



目的
----------

Pluginの開発〜公開の流れを理解

アジェンダ
----------
1. 環境準備
2. 開発
3. Build
4. 公開

環境準備
----------

1. 新規アプリ作成
2. ux.touchフォルダ追加
3. Ext.loaderにパス追加


sencha list scroll reset
----------
今回は、[sencha-list-scroll-reset](https://github.com/kashiro/sencha-list-scroll-reset)を例に話を進めます



新規アプリ作成
----------

	$ mkdir sencha-list-scroll-reset
	$ sencha -sdk ./sdk-2.1.0 generate app SenchaListScrollReset ./

※ コマンドについて：[Ext JS 4 アプリケーション開発における便利関数と使いどころの紹介など](http://code.xenophy.com/?p=1882)
	
ux.touchフォルダ追加
----------
Plugin用にux.touchフォルダを作成

	$ mkdir -p sencha-list-scroll-reset/ux/touch
	
_※ 他には**ux直下**、**tux**などプラグインを格納するフォルダには様々な流派がある_

Ext.loaderにパス追加
----------

	$ vi sencha-list-scroll-rese/app.js
	-----------------------
	Ext.Loader.setPath({
    	'Ext': 'touch/src',
    	'Ext.ux.touch': './ux/touch',  // ←パスを追加
    	'SenchaListScrollReset': 'app'
	});
	
PluginをExt.LoaderのPathに追加する

開発 - Plugin -
----------

Plugin 全体像
----------

    Ext.define('Ext.ux.touch.ListScrollReset', {
    
        requires: [
        ],
    
        alias: 'plugin.listscrollreset',
        
        config: {
        },
    
        constructor: function(config) {
            this.initConfig(config);
        },
    
        init: function (component) {
        },
    
        hoge: function(){
        
        }
        
    });

aliasを設定
----------

aliasを"plugin.XXXXX"形式で設定


	Ext.define('Ext.ux.touch.ListScrollReset', {
	
    	requires: [
    	],
	
    	alias: 'plugin.listscrollreset',  // ←必ずplugin.XXX形式にする


Pluginは、**plugin.**というaliasNameを指定して**Ext.plugin.Plugin**
を継承して生成される

Ext.Componentのapplypluginsを[参照](http://docs.sencha.com/touch/2-0/source/Component.html#Ext-Component-cfg-plugins)

ロジック
----------
pluginのinit関数に渡される引数がpluginを読み込んだコンポーネントになる

	init: function (component) {
		// componentが読み込んだコンポーネント
	}


Plugin利用側で、読み込む
----------
**plugins.xclass**に作成したプラグインを指定。同時に、オプションも渡せる

	config {
		plugins: [
			{
				xclass: 'Ext.ux.touch.ListScrollReset',
				toolbarItemId : 'main-toolbar',
				listItemId: 'main-list',
				scrollAnim: {duration: 5000}
			}

Build
----------

1. ビルド用にuxフォルダへのパスを通す
2. ビルド実行


そのままビルド実行すると。。。
----------
ビルドコマンド実行して下記エラーがでる
コマンド用にuxフォルダへのpathが通ってないのが原因

	Failed to find file for Ext.ux.touch.ListScrollReset



ビルド用にuxフォルダへパスを通す
----------
ビルドコマンド用にuxフォルダへのPathを通す

	$ cd sencha-list-scroll-reset
	$ vi .sencha/app/sencha.cfg

	app.name=SenchaListScrollReset
	app.framework=touch
	app.classpath=${app.dir}/app.js,${app.dir}/app,ux // ←パスを追加
	

ビルド実行
----------

	$ cd sencha-list-scroll-reset
	$ sencha build app production


公開 (github / sencha market)
----------

1. githubに公開
2. sencha marketに公開

githubに公開
----------

* githubに作成アプリを公開
* github pages等にデモが上がっていると**Good !!**

sencha marketに公開
----------

* sencha marketとは
* 登録

sencha marketにとは
----------

Secha Incが運営する、Plugin / Custom Component / tool / themeを公開するサイト

![senchamarket top](https://pbs.twimg.com/media/BCE6hsDCMAAIlMx.png)

https://market.sencha.com/

登録
----------

名前、説明、スクリーンショット、ライセンス等の情報を入力

![regist plugin](https://pbs.twimg.com/media/BCE7egNCAAAOWEx.png)

申請
----------
登録後、許可待ち

![screenshot](https://pbs.twimg.com/media/BCE8jaYCQAIEfuz.png)

公開
----------
公開 ＼(^o^)／

![screenshot](https://pbs.twimg.com/media/BCuZjG1CIAAVU0k.png)


最後に（所感）
----------


* Custom Componentはレゴのように積み上げていくのが楽しい
* Pluginで痒いところに手が届くような機能拡張するのも楽しい 


＼(^o^)／  FUN!!
==========


参考
----------
* Appストアにあるようなダウンロードボタン
	* [multistate button](https://github.com/kashiro/sencha-multistate-button)
* 写真を一覧で表示する選択可能なリスト
	* [image grid list](https://github.com/kashiro/sencha-image-grid-list)
* ツールバータップで、リストを一番上までスクロールする
	* [list scroll reset](https://github.com/kashiro/sencha-list-scroll-reset)