イラストブックプラットフォームの概要
はじめに
イラストブックプラットフォームでは、アプリ、プラグイン、デザインの3種類のコンテンツを開発して公開することができます。これらのコンテンツによって、例えば、バーチャルグラフとイラストを使用したゲームアプリ、外部BLOGに埋め込める新着投稿プラグイン、CSSによるお絵描き掲示板のデザイン変更などを実現できます。
アプリおよびプラグインはJavaScriptで開発します。アプリおよびプラグインは、イラストブックから提供されるdivに対して、イラストブックから提供されるJavaScriptライブラリを使用して書き込みを行うことで動作します。開発は全てブラウザ上で行うこともできますし、ローカル環境で開発することもできます。イラストブックからは、WEBアクセスや画像描画などのAPIが提供されます。
デザインは掲示板のCSSを編集することで作成します。CSSの編集とプレビューは、ブラウザ上のエディタで行うことができます。
イラストブックプラットフォームのブロック図を次に示します。クリエイタは描いたイラストをイラストブックのお絵描き掲示板に投稿します。一般ユーザは、そのイラストをブックマークしたり、ユーザ間のバーチャルグラフを構成します。デベロッパは、これらの情報を元に、アプリ、CSSデザイン、プラグインを作成し、イラストブックマーケットに公開します。クリエイタは公開されたプラグインを自分のホームページで利用したり、CSSデザインを自分のお絵描き掲示板に設定したりすることができます。また、一般ユーザは、公開されたアプリで楽しむことができます。
コンテンツの種類
>アプリ
ユーザはイラストブックマーケットからアプリをクリックすることで、アプリ実行画面へ移動し、アプリを実行します。最も簡単なアプリのコードを次に示します。このコードでは、新しくMyAppクラスを作り、それをイラストブックアプリに登録しています。イラストブックアプリに登録するとMyAppのinit関数が呼ばれ、init関数の中でcanvasをnewすることで描画領域を確保し、同時にコールバック関数を定義しています。以降は、自動的にloop関数が呼ばれるので、この中にアプリコードを記述します。イラストブックアプリプラットフォームに公開されたプログラムのソースコードは、アプリメニューから自由に見ることができますので、APIの使用例の参考にして下さい。
//アプリメインクラス
function MyApp(){
//メンバ変数
this._canvas=null;
}
//illustbook.app.regist直後に呼ばれる
MyApp.prototype.init=function(){
//描画領域を確保
this._canvas=new illustbook.canvas(this,480,480);
//コールバックの登録
this._canvas.addTouchCallback(this); //addTouch*が呼ばれるようになる
illustbook.app.addLoopCallback(this,1000/15); //loopが呼ばれるようになる
};
//ゲームループ
MyApp.prototype.loop=function(){
this._canvas.drawBegin();
this._canvas.fillRect(0,0,this._canvas.width,this._canvas.height,0xeeeeee);
this._canvas.drawText("Hello World",0,20,12,0x000000);
this._canvas.drawEnd();
};
//タッチされたか、マウスでクリックされた
MyApp.prototype.onTouchStart=function(x,y){
};
//タッチしながら移動されたか、マウスが移動した(ドラッグ中で無くても呼ばれる)
MyApp.prototype.onTouchMove=function(x,y){
};
//タッチが終了されたか、マウスを離した
MyApp.prototype.onTouchEnd=function(){
};
//イラストブックにアプリを登録する
illustbook.app.regist(new MyApp());
ローカル環境で開発する場合は、次のようなHTMLで動作を確認した後、JavaScriptコード部分のみをイラストブックに登録します。
<html> <head> <script src="http://www.illustbook.net/api_js"></script> <script src="./my_app.js"></script> </head> <body> <div id="illustbook_app"></div> </body> </html>
>プラグイン
プラグインは外部BLOGなどにタグを貼り付けることで動作します。次のコードでは、bbs_idで与えられる掲示板の新着イラストを表示します。ユーザはイラストブックマーケットからプラグインをクリックすることで、外部BLOGに貼り付けるためのタグを取得します。プラグインは、タグの貼り付けられたサイトのiframe内で動作します。プラグインには、デフォルト引数を与えることができます。ユーザはURLのデフォルト引数を書き換えることで、自分に最適なプラグインにカスタマイズします。
//プラグイン概要
//掲示板に投稿された新着投稿のサムネイルを表示します。
//引数のbbs_idで掲示板、illust_nで表示イラスト数、illust_sizeで表示サイズを変更することで、
//表示数を変更することができます。
//プラグインデフォルト引数
//bbs_id=sample&illust_n=8&illust_size=50
//プラグインメインクラス
function NewsPlugin(){
this._div=null; //プラグイン領域への参照
this._size=100; //表示する画像サイズ
}
//illustbook.app.regist直後に呼ばれる
NewsPlugin.prototype.init=function(){
//divを取得する
this._div=illustbook.app.getDiv(this);
//プラグイン引数を取得する
var args=illustbook.utility.getUrlArg();
this._size=illustbook.utility.getUrlArg().illust_size;
//JSONPでfeedAPIを呼び出し
illustbook.feed.getThreadList(args.bbs_id,0,args.illust_n,illustbook.feed.ORDER_NONE,illust_callback);
};
//JSON APIコールバック
NewsPlugin.prototype.illust_callback=function(oj){
//API呼び出しに失敗した場合はエラーメッセージを返す
if(oj.status!="success"){
this._div.innerHTML=oj.message;
return;
}
//イラストのリストを作成
var news_html="";
for(var i=0;i<oj.response.length;i++){
var thread=oj.response[i];
news_html+="<a href='"+thread.thread_url+"' target='_blank'>";
news_html+="<img src='"+thread.thumbnail_url+"' width="+this._size+" height="+this._size+" border=0>";
news_html+="</a>";
}
this._div.innerHTML=news_html;
};
//コールバック呼び出し
function illust_callback(oj){
news_plugin.illust_callback(oj);
}
//イラストブックにプラグインを登録する
var news_plugin=new NewsPlugin();
illustbook.app.regist(news_plugin);
>デザイン
デザインは掲示板のCSSです。コードエディタでCSSを記述します。CSSデザインにはIDが割り当てられ、ユーザは自分の掲示板のデザインの設定から、CSSデザインのIDを入力することで、デザインを適用します。掲示板のCSSは一般に公開してもよいですし、自分だけで使用してもかまいません。編集できるCSSの要素はCSSリファレンスに記載されています。デザインを新規作成すると、次のコードが自動的に生成され、これを書き換えることでデザインを構成していきます。
/* リンク */
a {
color:#333333;
text-decoration: none;
}
a.declink {
border-bottom: 1px dashed;
}
a:hover,a.declink:hover {
border-bottom: 1px solid;
}
/* 区切り */
hr {
border:0;
border-top:1px dashed #b5ae9d;
}
/* body要素 */
body {
margin:0;
padding:0;
background-color: #ffffff;
line-height:20px;
font-size:10pt;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
color:#333333;
}
/* メインコンテナ */
#container {
width:800px;
margin:0px auto 0px auto;
}
/* 掲示板タイトルとロゴ */
#header {
margin-top:10px;
padding-top:0px;
padding-left:10px;
}
/* コンテンツヘッダ(イラストを描く〜ログイン） */
#contents-header {
padding:10px;
margin-top:10px;
background-color:#ffffff;
color:#333333;
}
#contents-header-size {
float: left;
padding-right: 20px;
}
#contents-header-edit {
float: left;
}
#contents-header-edit a{
color:#333333;
}
#contents-header-login {
float: right;
width: 80px;
}
/* コンテンツ（イラスト一覧） */
#contents {
padding-top:10px;
}
/* コンテンツフッタ（コピーライト） */
#contents-footer {
text-align:center;
}
/* イラスト一覧 */
#main_2col {
float:left;
width:560px;
margin-right: 10px;
}
#main_1col {
}
/* サイドバー */
#side {
float:left;
width:210px;
margin-top:0px;
padding:10px;
background-color:#ffffff;
}
#side,#side a {
color:#333333;
}
#side h4 {
font-size: 100%;
font-style: normal;
font-weight: normal;
margin-top:0px;
padding-bottom:4px;
border-bottom:1px dashed #b5ae9d;
}
#free,#category,#affiliate,#comment,#counter,#menu {
margin-bottom:30px;
}
/* エントリー（イラスト） */
.entry {
padding:10px;
margin-bottom:20px;
}
/* エントリーヘッダ・フッタ（ソートとページ番号） */
#entry-head,.entry,#entry-bottom {
background-color:#ffffff;
}
#entry-head,.entry,#entry-bottom,.entry-comment a,.entry-title a,.entry-res-content a {
color:#333333;
}
#entry-head {
padding:10px;
margin-bottom:10px;
}
#entry-bottom {
padding:10px;
margin-bottom: 0px;
}
/* RSSアイコン */
#rss {
float: right;
}
/* イラスト情報要素 */
.entry-title {
padding: 5px;
border-bottom: dotted 1px #b5ae9d;
}
.entry-title h3 {
float: left;
font-size: 100%;
font-style: normal;
font-weight: normal;
padding: 0;
margin: 0;
}
.entry-title .clap {
float: right;
width: 80px;
font-weight: bold;
}
.entry-illust {
padding: 20px 0;
text-align: center;
}
.entry-name {
}
.entry-comment {
padding-top: 5px;
}
.entry-button {
}
/* ページ番号 */
#page-head {
float: left;
}
#page-bottom {
float: left;
}
/* ロゴ画像 */
#bbs_logo {
margin-bottom: 10px;
}
/*ボタン*/
公開されるAPI
アプリやプラグインから、イラストブックのバーチャルグラフやイラストを利用するには、JavaScript APIとJSON APIを使用します。APIの関係図を次に示します。JavaScript APIはJSON APIをラップしているため、基本的にはJavaScript APIだけでイラストブックにアクセスすることができます。JSON APIは、外部サーバやネイティブアプリなど、JavaScriptが使用できない環境で利用します。ただし、JavaScript APIを用いた場合でも、コールバックに通知されるオブジェクトは、JSON APIと同じ、JSON形式になりますので、JSON APIの概要を理解しておく必要があります。
コードエディタ
ブラウザ上で開発する場合は、ACEによるコードエディタが使用可能です。コードエディタでは、JavaScriptとCSSのシンタックスハイライト、Lintチェック、コードとデザインの保存、実行、プレビューが行えます
ライセンスとプライバシーポリシー
投稿されたコンテンツの権利は投稿者に帰属しています。コンテンツは、いつでも公開したり、公開を停止したりすることができます。ただし、投稿したコンテンツのコードは誰でも見れる形で公開されることにご注意下さい。
投稿されたイラストの権利は投稿者に帰属しています。イラストのアプリでの使用許可は、掲示板単位で管理者が設定することができます。アプリで使用できない設定になっている場合は、サムネイルは取得できますが、イラスト本体は取得できません。
http://www.illustbook.net/api_jsのJavaScriptコードはMITライセンスで提供させて頂いています。イラストブック外でもご自由にご利用や改変や再配布が可能です。
コードエディタにはACE、リントチェックにはJSHint、コードの埋め込みにはSyntaxHighlighterを使用させて頂いています。