AptanaにMarkdownエディターのインストールを解説します。

MarkdownEditer Pluginのダウンロードページ

[HELP]メニューの[Install New Software]をクリックする。

Work withのプルダウンメニューの横のAddボタンをクリックする。

名前に好きな名前、LocationにURLを入力します。
入力が完了したら、OKをクリックします。

リストにMarkdown Text Editor Featureと表示されます。
リストに表示されない場合は、Group items by categoryのチェックをはずしてください。
無事表示されたら、Markdown Text Editor FeatureをチェックしてOKボタンをクリックします。

次のインストールするプラグインの詳細画面ではNextをクリックします。

I accept the terms of the licence agreementをクリックしてFinishボタンをクリックします。

インストールが完了すると、再起動する書きかれるのでAptanaを再起動します。
これでMarkdown形式のファイルを編集できようになります。

ビューのアウトラインビューで内容をアウトライン形式で確認でき、HTML形式プレビューでMarkdown形式からHTMLに変換した結果を確認することができます。
又、変換したHTMLを保存することができます。

これでMootoolsのプラグインドキュメントを書くのが楽になりました。
Similar Posts:

• TortoiseGitのインストール
• TortoiseGitを使用するための設定
• msysgitのインストール
• Mootools Forgeの使い方 – プラグイン登録
• TortoiseGitの使い方(githubの場合) その1

コードをハイライト表示するにはTinyMCEのプラグインとSyntax Highlighterが必要です。
設定が面倒ですが、コードを記事に書く場合はすごく楽です。

1. syntaxhlのダウンロード

下記のサイトからプラグインをダウンロードします。
右上のソースのダウンロードをクリックしてください。
http://github.com/RichGuk/syntaxhl

2. syntaxhlの配置

ダウンロードしたアーカイブを解凍してディレクトリ名をsyntaxhlに変更します。
変更が完了したらユーザー領域のjs/tiny_mce/pluginsディレクトリにコピーします。

3. 言語ファイルの作成

syntaxhlのディレクトリ内のlangsに言語ファイルがあるので、英語の言語ファイルをコピーしてください。
コピーが完了したら、ファイル名を下記のとおりにリネームしてください。

• コピーしたen.jsをja.jsにリネーム
• コピーしたen_dlg.jsをja_dlg.jsにリネーム

これをしないと正しく動きません。

4. TimyMCE設定の変更

pluginsにsyntaxhlを追加

[javascript]
plugins: “paste,inlinepopups,spellchecker,safari,advlink,template,syntaxhl”,
[/javascript]

theme_concrete_buttons2にsyntaxhlを追加

[javascript]
theme_concrete_buttons2 : “bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor,template,syntaxhl”,
[/javascript]

extended_valid_elementsに下記を追加

[javascript]
extended_valid_elements: “textarea[cols|rows|disabled|name|readonly|class], iframe[height|width|style|src]“,
[/javascript]

ここまでの設定でsyntaxhlが使えるようになります。

5. SyntaxHighlighterのダウンロード

下記のサイトからSyntaxHighlighterをダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/

アーカイブを解凍して、/js/syntax_highlighterにコピーします。

6. テーマのヘッダーファイル修正

利用しているテーマファイルのheader.phpを開いて、必要なものを読み込むようにします。
ここでは、javascriptのソースをハイライトするようにしてます。

[html]

以上で、concrete5のTinyMCEでコードのハイライト表示ができるようになります。
記事ブロックで、SyntaxHLのアイコンをクリックしてコードを貼り付けて保存するだけでコードがハイライト表示されると思います。Similar Posts:

• MootoolsのビルドツールPackager-Webはすごく便利
• concrete5でTinyMCEのテンプレートプラグインを使用する
• Amazon Showcase WordPress Widgetを導入
• カバ箱をためす
• Concrete5のパッケージ、Frontend Developer 1.1.0をリリースしました。

よく使用するテンプレートを作成しておくと、ページへのコンテンツの追加が早くなります。

1. tiny_mceディレクトリのコピー

templateプラグインを追加するだけの場合、特にコピーしなくてもいいのですが、
ここではconcrete/js/tiny_mceディレクトリを丸ごとユーザー領域のjsディレクトリにコピーします。
丸ごとコピーするとconcrete5のアップグレード時にコアファイルが置き換わった際の影響度が低くなります。

2. テンプレートの作成

ユーザー領域のjs/tiny_mce/にtemplatesディレクトリを作成し、テンプレートを作成します。
テンプレートの書式は下記の通りです。
必ず、class属性にmceTmplを指定するようにしてください。
必要な分だけテンプレートを作成してください。

[html]

[/html]

3. テンプレートのリストファイル作成

ユーザー領域のjs/tiny_mce/にlists/ディレクトリを作成し、テンプレートのリストファイルを作成します。
ここではtemplate_list.jsという名前でリストファイルを作成します。

変数tinyMCETemplateListにテンプレートのリストを定義します。
左から順にタイトル、テンプレートファイルのURL、詳細情報を指定します。

[javascript]
var baseTemplatePath = “/js/tiny_mce/”;
var tinyMCETemplateList = [
["テンプレート1", baseTemplatePath + "templates/some-template1.html", "テンプレート1です。"],
["テンプレート2", baseTemplatePath + "templates/some-template2.html", "テンプレート2です。"]
];
[/javascript]

4. tinymceの設定の変更

サイト全体の設定から、記事ブロックエディター設定でカスタムを選択します。
表示された設定内容を変更します。

デフォルトの設定は下記の通りにような感じになっていると思います。
これを変更します。

[javascript]
theme : “concrete”,
plugins: “inlinepopups,spellchecker,safari,advlink”,
editor_selector : “ccm-advanced-editor”,
spellchecker_languages : “+English=en”,
theme_concrete_buttons1 : “bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect”,
theme_concrete_buttons2 : “bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor”,
theme_concrete_blockformats : “p,address,pre,h1,h2,h3,div,blockquote,cite”,
theme_concrete_toolbar_align : “left”,
theme_concrete_fonts : “Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats”,
theme_concrete_font_sizes : “1,2,3,4,5,6,7″,
theme_concrete_styles: “Note=ccm-note”,
spellchecker_languages : “+English=en”

/*
// Use the advanced theme for more than two rows of content
plugins: “inlinepopups,spellchecker,safari,advlink,table,advhr,xhtmlxtras,emotions,insertdatetime,paste,visualchars,nonbreaking,pagebreak,style”,
editor_selector : “ccm-advanced-editor”,
theme : “advanced”,
theme_advanced_buttons1 : “cut,copy,paste,pastetext,pasteword,|,undo,redo,|,styleselect,formatselect,fontsizeselect,fontselect”,
theme_advanced_buttons2 : “bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,|,forecolor,backcolor,|,image,charmap,emotions”,
theme_advanced_fonts : “Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats”,
// etc.
*/
[/javascript]

変更内容は下記の通りです。

• pluginsにtemplateを追加する。
• theme_concrete_buttons2にtemplateを追加(theme_concrete_buttons2じゃなくてもいいです。)
• template_external_list_urlにテンプレートのリストファイルを指定する。
  Exp: /js/tiny_mce/lists/template_list.js

[javascript]
theme : “concrete”,
plugins: “inlinepopups,spellchecker,safari,advlink,template”,
editor_selector : “ccm-advanced-editor”,
spellchecker_languages : “+English=en”,
theme_concrete_buttons1 : “bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect”,
theme_concrete_buttons2 : “bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor,template”,
theme_concrete_blockformats : “p,address,pre,h1,h2,h3,div,blockquote,cite”,
theme_concrete_toolbar_align : “left”,
theme_concrete_fonts : “Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats”,
theme_concrete_font_sizes : “1,2,3,4,5,6,7″,
theme_concrete_styles: “Note=ccm-note”,
spellchecker_languages : “+English=en”,
template_external_list_url: “/js/tiny_mce/lists/template_list.js”,
template_cdate_classes : “cdate creationdate”,
template_mdate_classes : “mdate modifieddate”,
template_selected_content_classes : “selcontent”,
template_cdate_format : “%m/%d/%Y : %H:%M:%S”,
template_mdate_format : “%m/%d/%Y : %H:%M:%S”
[/javascript]

Similar Posts:

• Aptana3 Bundleを作成する – テンプレートの作成
• Mootools Photo Galleryテンプレート1.0をリリースしました。
• Aptana3 Bundleを作成する – バンドル作成の準備
• Concrete5で翻訳ファイルを作る早いやり方
• Concrete5のテーマについての基礎知識

これにより、利用方法が少しだけ柔軟になり、機能拡張が容易になった為、新しい機能も比較的に早く対応できそうです。

ダウンロード
http://mootools.net/forge/p/gradually

具体的な1.0からの変更点

1.0からの変更点は下記の通りです。

スライドショー

1.0と同じスライドショーです。
ImageDrawer.Grid、ImageDrawer.Expandのインスタンスをオプションに引き渡すことで、画像を切り替える際の描画パターンを切り替えることができます。

MooShellの共有URL
http://mootools.net/shell/ZX4ay/15/

指定できるオプション

パネルオブジェクト

ギャラリー

2.0.0からの新機能です。画像の切り替えをサムネイル画像でできます。
又、ユーザーの操作にすばやく対応するために、描画処理の間に別のサムネイルがクリックされた場合、描画をキャンセルするようにしています。

こちらも又、ImageDrawer.Grid、ImageDrawer.Expandのインスタンスをオプションに引き渡すことで、画像を切り替える際の描画パターンを切り替えることができます。

MooShellの共有URL
http://mootools.net/shell/9S5Hb/13/

サムネイルコントローラーのオプション

最後にIEのサポートですが、できるだけ動作するようにしようと思います。
又、API仕様に少しだけ修正を入れるつもりです。Similar Posts:

• MootoolsのプラグインImageDrawer1.0をリリースしました。
• MootoolsのプラグインStaticMaps0.1.1をリリースしました。
• CSSで画像を装飾するテクニック
• MootoolsのForm.Validaterのプロパティを動的に指定する
• Mootools Plugin 「MMap」をリリースしました。

では、実際にやってみましょう。

1. Mootools Forgeのアカウントを作成する

Mootools Forgeのページの右メニューにNormal Signupというユーザー登録用のフォームがあるので、必要事項を記述してアカウントを作成してください。

Mootools Forge
http://mootools.net/forge/

2. Mootools Forgeにログインする

Mootools Forgeのページの右メニューのログインフォームから、作成したアカウントを利用してログインします。

3. プラグインの追加

Add a new pluginメニューをクリックして登録画面を表示させます。

プラグインのリポジトリURLの入力欄があるので、URLを記述します。
入力が完了したら、SUBMITボタンをクリックして登録を実行します。

実行中のプログレスバーが表示されるので完了するまで待機します。

無事完了した場合、Done!と表示されます。

もし、登録中に問題があれば、エラーメッセージが表示されるので、指示通りに修正を加えます。
下記の場合、README.mdにHow to Useセクションがないと言われていますね。

最後に、無事完了したのを確認したら、デモページのリンク先やドキュメントが表示されるか確認してください。
もし、間違っていたら修正して再度githubのリモートにtagをpushしてください。
Mootools ForgeのページにUPDATEボタンが表示されるので、クリックして更新してください。
最新の内容に置き換わります。

以上で登録は終了です。
すぐに終わるので非常に楽ですね。

また、ソースコードがgithubに公開されているので興味のある方は見てみてはどうでしょうか？

PluginsKit
http://github.com/guille/PluginsKit

言語はPHPでsymfonyフレームワークを使用しているみたいです。

以上で解説は終了です。
Similar Posts:

• Mootoolsのプラグイン「Exhibition.js」をリリースしました。
• photolog用のMootoolsプラグイン「Exhibition」の途中経過。
• Mootools Forgeの使い方 – 登録する前にすること
• AptanaにMarkdown Editerプラグインをインストールしてみた
• MootoolsのプラグインImageDrawer1.0をリリースしました。

なので、登録する前にすることをすでに、公開できるプラグインがある場合を想定して解説していきます。

１. githubにリポジトリを作る

まずはじめにgithubにリポジトリを作成します。
作成の仕方がよくわからない方はこちらを参考にしてください。

TortoiseGitの使い方(githubの場合) その1
http://sharedhat.com/blog/737/

TortoiseGitの使い方(githubの場合) その2
http://sharedhat.com/blog/801/

すでに作成してある場合は、無視してください。

2. リポジトリの直下にREAME.mdとpackage.ymlファイルを作成する。

README.md(Markdown形式)はその名前のとおり、使い方や注意事項を含めたドキュメントファイルです。
package.yml(YAML形式)はプラグインパッケージの定義ファイルです。
2つとも雛形のファイルがありますので、ダウンロードして主要部分だけ変更します。

README.md雛形
http://mootools.net/forge/how-to-add#readme-md

package.yml雛形
http://mootools.net/forge/how-to-add#package-yml

README.mdは下記のMarkdown形式ページを参考にしてください。
基本的に使用するさいの手順や指定できるオプションの記述だけで十分だと思います。

Markdown形式(原文)
http://daringfireball.net/projects/markdown/

Markdown形式(日本語訳)
http://blog.2310.net/archives/6

つぎにpackage.ymlですが、項目は下記の通りになっています。

docsがまだ準備できていない、デモページがないなどの場合は#でコメントアウトしておくといいと思います
作成が終わったらリポジトリの直下におきます。

3. リポジトリの直下にSourceディレクトリとDocsディレクトリを作成する。

/repogitory
    /Source/
    /Docs/

Sourceデイレクトリにはプラグインのソースコードを置きます。
Docsディレクトリにはプラグインのドキュメントを置きます。

ドキュメントファイルもMarkdown形式のファイルで、ファイル名をプラグイン名とかにしておけばいいと思います。
基本的にAPI仕様のドキュメントになると思います。

4. スクリプトヘッダーを記述する。

ソースコードの先頭に下記のようなスクリプトヘッダーを記述します。
形式はYAML形式です。

YAML
http://ja.wikipedia.org/wiki/YAML
[javascript]
/*
—
description: Element class, Elements class, and basic dom methods.

license: MIT-style

authors:
- Jimmy Dean
- Buck Kingsley

requires:
- localComponent1
- [localComponent2, localComponent3]
- externalPackage1/tag: component4
- externalPackage2/tag: [component1, component2]

provides: [Element, Elements, $, $$]

…
*/
[/javascript]

記述が完了したら、オンラインパーサーを利用して、正しく解析できるかチェックしてください。
http://yaml-online-parser.appspot.com/

※コメントの/*— …*/は消さないでください。プラグイン登録時にエラーになります。
※YAML形式なので、スペースやタブの扱いには注意してください。

5. タグ付けをする。

1～4までが完了し、リリースできるようになったら、コミットしてリモートにプッシュしておきましょう。
pushが終わったら、こんどはtagを付けてスナップショットを作成します。
タグ付けする前に、タグ付けする現在のブランチを確認してください。
TortoiseGitでbranchを確認するには、メニューのGit Commitの部分を見ればOKです。
下記の例では2.0となっています。

branchを作成してない場合は、masterでOKです。
問題がなければ、TortoiseGitのメニューより、Create Tagを選択します。

そうすると、tagを作成するダイアログが表示されるので、tagの名称と、コメントを入力します。

問題がなければOKをクリックしてtagを作成します。
そして最後に、tagをリモートにpushします。

pushが完了したら、githubのダウンロードページで、タグが存在するか確認します。
無事タグがあれば、成功しています。

以上でいつでも、Mootools Forgeにプラグインを登録できます。
REAME.mdやpackage.ymlでわからないところがあったら、すでにMootools Forgeに登録されているプラグインを確認してみると参考になると思います。
次は、いよいよプラグイン登録の解説です。
Similar Posts:

• TortoiseGitの使い方(githubの場合) その1
• Mootools Forgeの使い方 – プラグイン登録
• AptanaにMarkdown Editerプラグインをインストールしてみた
• Mootools Plugin 「MMap」をリリースしました。
• MootoolsのビルドツールPackager-Webはすごく便利

私が作成したMootoolsのスライドショープラグインでGraduallyというものがあるのですが、画像の描画部分を自由に変更できなくて非常に汎用性がなくて困っていました。

なのでGraduallyの新バージョン開発のために、純粋に画像の描画部分だけを抽出しようと思いました。

それが、今回のImageDrawerになります。
単体で使用してもいいですし、自作の画像ギャラリープラグインにも組み込めます。

使用方法

まずはじめに、mootoolsを読み込みます。
その後にImageDrawer.js、ImageDrawer.Grid.js、ImageDrawer.Expand.jsを読み込みます。

[html]




[/html]

次にcanvas要素を記述します。
[html]

[/html]

そして最後にjavascriptコードを記述します。
[javascript]
var myImage = new Image();
myImage.src = “images/draw-image.jpg”;
myImage.onload = function() {
var myCanvas = document.id(“myCanvas”);
var drawer = new ImageDrawer.Grid({
‘height’: 55,
‘width’: 65,
‘transition’: ‘expo:in:out’,
‘onDrawStart’: function() {
//image drawing start
log.set(“html”, “Start”);
},
‘onDrawComplete’: function() {
//image drawing complete
log.set(“html”, “Complete”);
}
});

drawer.setCanvas(myCanvas)
drawer.setImage(myImage);
drawer.drawLeft();
}
[/javascript]
オプションのtransitionを変えることで、描画処理時のアニメーションを変更できるようになっています。
詳しくはデモページをご確認ください。

Demo

http://holyshared.github.com/ImageDrawer/

最後にダウンロードはMootools Forgeか下記のダウンロードリンクより可能です。

Mootools Forge

http://www.mootools.net/forge/p/imagedrawer

ダウンロード

http://www.mootools.net/forge/download/imagedrawer/1.0
Similar Posts:

• Mootools のプラグインGradually1.0をリリースしました。
• Mootoolsのプラグイン「Exhibition.js」をリリースしました。
• Mootoolsの画像ギャラリープラグインGradually 2.0.0をリリースしました。
• Mootools Plugin 「MMap」をリリースしました。
• MooTools 1.2リリース

Mootoolsのプラグイン「MMap」をリリースしました。
MMapはGoogle Maps API Version 3を利用した、プラグインでカスタムマーカーとカスタムウィンドウを提供します。

マーカーは単体の画像表示、複数画像のスライドショーを表示します。
カスタムウィンドウは柔軟性のあるウィンドウを提供します。

まだベータバージョンですので、挙動が怪しい部分もあると思いますが、こちらからダウンロードが可能です。

ダウンロードはこちらから
http://mootools.net/forge/p/mmap

デモページはこちらから
http://holyshared.github.com/MMap/

マーカー、ウィンドウのスタイルをカスタマイズしたい場合は、下記のファイルをご利用ください。
比較的楽にスタイル付けが可能になると思います。
http://github.com/downloads/holyshared/MMap/marker-and-window-styles0.1b.zipSimilar Posts:

• jQueryでGoogle Map API Version3のカスタムマーカーを作る
• MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。
• MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。
• Safariで発生するマーカーが表示されない問題の対処法
• MootoolsのプラグインStaticMaps0.1.1をリリースしました。

ギャラリーサイト用に開発したもので、水平表示、垂直表示に対応しています。
プロジェクトサイト、またはMootools Forgeから入手することが可能です。

Project Site
http://holyshared.github.com/Exhibition/

Mootools Forge
http://mootools.net/forge/p/exhibition
Similar Posts:

• WordPressのフォトログテーマ「Exhibition」をリリースしました。
• photolog用のMootoolsプラグイン「Exhibition」の途中経過。
• WordPressテーマ「Exhibition」はこんな感じ
• Mootools のプラグインGradually1.0をリリースしました。
• MootoolsのプラグインImageDrawer1.0をリリースしました。

前からphotolog用のをwordpresやsingaporeのテーマが欲しかったので、ちまちまそれようのMootoolsプラグインを開発しています。
デモページ作りながら、開発しているので、ある程度実用性のあるものになりそうです。
これはサムネイルを縦に並べて表示するタイプ。
デモページではflickrのAPIを使用してギャラリーぽくしています。
縦に並べて表示しているサイトはすくないので、ためしにやってみました。

こちらはサムネイルを横に並べて表示するタイプ。

後、１パターン表示の見せ方を考えているのですが、初期バージョンを先にリリースしてから対応しようと思っています。
出来たらMootools Forgeにプラグインとして追加し、テーマ作成に移行しようと思います。

Similar Posts:

• Mootoolsのプラグイン「Exhibition.js」をリリースしました。
• iddy APIを使ったプロフィールを表示するスクリプトを書いています
• Mootools Plugin 「MMap」をリリースしました。
• Mootools Forgeの使い方 – プラグイン登録
• MootoolsのプラグインImageDrawer1.0をリリースしました。