Movable Type[ムーバルタイプ] WEBデザイン・WEB2.0情報BLOG

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その3）

2011-08-05T08:30:23-07:00

今月１日から東京マラソンエントリーが始まりました。早速エントリしたわけでが、まぁー今回もエントリー数が多いということで抽選。過去６回エントリーしていますが、すべて落選。当選するのはいつになるのやら・・・。とりあえず、大阪マラソン、神戸マラソンに向け、本格的にジョグしています。（夏のジョグは暑いですねｗ。）

さて、前回に続いて「Yahooテキスト解析Web APIを利用して校正支援プラグインの作成」
MovableTypeに日本語文章校正ツール（文字の入力ミスや言葉の誤用がないか、わかりにくい表記や不適切な表現が使われていないかなどをチェックする機能）を実装するのつづき。

追加した動作モード処理（校正支援メソッド：entry_kousei）の内容について取り上げます。

config.yaml

id: MyPlugin17
key: MyPlugin17
name: <__trans phrase="Sample Plugin API">
version: 1.0
description: <__trans phrase="_PLUGIN_DESCRIPTION">
author_name: <__trans phrase="_PLUGIN_AUTHOR">
author_link: http://www.example.com/about/
doc_link: http://www.example.com/docs/
l10n_class: MyPlugin17::L10

system_config_template: yahoo_japan_api_id_setting.tmpl
settings:
    yahoo_japan_api_id:
        default:
        scope: system

applications:
    cms:
        methods:
            entry_kousei: $MyPlugin17::MyPlugin17::YahooAPI::hdlr_kousei
            entry_keyphrase: $MyPlugin17::MyPlugin17::YahooAPI::hdlr_keyphrase
            entry_relsearch: $MyPlugin17::MyPlugin17::YahooAPI::hdlr_relsearch

解説

プラグイン設定（システム）のテンプレートは yahoo_japan_api_id_setting.tmpl
プラグイン設定 settings
- 設定名： yahoo_japan_api_id
  - デフォルト値：（空）
  - 表示：システム
動作モード（メソッド）追加
- path/to/cgi-bin/mt.cgi?__mode=entry_kousei
  - entry_kouseiメソッド本文内容をYahoo!WebAPIテキスト解析・校正支援にリクエストを送り解析、結果を受け取り、解析（パース）し、見やすい形に整形する。
- path/to/cgi-bin/mt.cgi?__mode=entry_keyphras
  - entry_keyphraseメソッド本文内容をYahoo!WebAPIテキスト解析・キーフレーズ抽出にリクエストを送り解析、結果を受け取り、解析（パース）し、見やすい形に整形する。
- path/to/cgi-bin/mt.cgi?__mode=entry_relsearch
  - entry_relsearch 特定キーワード（キーフレーズ抽出したキーワード）をYahoo!WebAPI検索・関連検索ワードにリクエストを送り、指定されたキーワードとよく組み合わせて検索されるキーワード情報をレスポンスとして受け取り、解析（パース）し、見やすい形に整形する。

Google Mpas API V3 指定範囲にフィットしたマップ表示表示位置の自動設定サンプルコード

2011-08-04T16:05:18-07:00

複数マーカーをマップ表示させる場合、全てを表示できるようにマップ表示位置を自動設定することができる。

サンプルマップはこちら

Load JSON Google Map

add_pointページでクリックした地点のログを保存、load_pointページで保存した地点をマーカー表示させるようにしている。クリックしたポイント全てが表示されるように自動調整（Zoom調整される）。

マーカー保存は、SQLに保存するCGIを使っている。

マップクラス：Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Google Code

LatLngBounds クラス : Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Google Code

LatLngBounds クラスを作り、そこに東西南北端の経緯度を追加する。

あとは、マップ表示メソッドのfitBoundsを使って、境界を指定することでマップ表示位置が自動調整される。（Zoom調整）

var markerBounds = new google.maps.LatLngBounds();
for(var point in PointArray) {
   markerBounds.extend( new google.maps.LatLng(lat, lng) );
}
if(!markerBounds.isEmpty()) {
    map.fitBounds(markerBounds);
}

markerBounds.isEmpty()

で座標位置の有無を調べることができる。

空の場合は、デフォルト設定の位置でマップ表示するようにしておけばいい。

jQueryプラグイン jquery.slideframe.js

2011-08-04T03:39:16-07:00

フレーム内でコンテンツをスライド表示させるプラグイン。ulリストタグで括られたコンテンツをスライド表示します。

jQueryメモ　jQueryプラグイン勉強　frameslider作成 - WEBデザイン　BLOGのプラグインを書き換えました。

Google Mpas API V3 地図上クリックでポイント間の高度データをグラフ表示 (高度サービス)サンプルコード

2011-07-31T22:55:58-07:00

Google Maps, 地図上でクリックしたポイント間の高度データをGoogle visualization APIを使ってチャートグラフ表示させる(高度サービス)サンプルデモ。

クリックしたポイントを配列に収め、高度サービスに配列をリクエストすることでポイント間の高度も得ることができる。Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Google Code参照

サンプルはこちら

Google maps api v3 サンプル高度データをグラフ表示（高度サービス）

高度について

Google Maps JavaScript API V3 サービス - Google Maps JavaScript API V3 - Google Code

Google Maps API Web サービス - Google Code

Google visualization APIについては

Google Chart Tools - Google Code

Google Mpas API V3 Directionサービスマーカードラッグしてルート再レンダリング　サンプルコード

2011-07-31T18:11:40-07:00

Google Maps, 地図上にDirectionサービスを使って、ルート表示のサンプルデモ。

マーカーをドラッグしてルート再計算、レンダリング。

マーカードラッグ

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.draggable = true;

ルートパネル表示は、

directionsDisplay.setPanel(document.getElementById('panel-Div'));

サンプルはこちら

Google maps api v3 サンプルルート表示、ドラッグしてルートの再レンダリング(Directionサービス)

ルートについては

Google Maps JavaScript API V3 サービス - Google Maps JavaScript API V3 - Google Code

Google Mpas API V3 複数Marker追加＋InfoWindow開いて住所 + 高度表示（逆ジオコーディング + 高度サービス)サンプルコード

2011-07-28T21:31:59-07:00

Google Maps, 地図上に複数Marker追加、InfoWindowを開き、クリックしたポイントの住所と高度を表示させる(逆ジオコーディング+高度サービス)サンプルデモ。

ちょっと高度サービスにリクエストするための準備が面倒みたいな。

サンプルはこちら

Google maps api v3 サンプルクリックでmarker追加、infowindow開き、住所+高度表示（逆ジオコーディング+高度サービス）

情報ウインドウについては

Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code

逆ジオコーディング（住所の逆検索）については

Google Maps JavaScript API V3 サービス - Google Maps JavaScript API V3 - Google Code

高度については

Google Maps JavaScript API V3 サービス - Google Maps JavaScript API V3 - Google Code

Google Maps API Web サービス - Google Code

Google Mpas API V3 複数のMarker追加＋InfoWindow開いて住所表示（逆ジオコーディング)サンプルコード

2011-07-28T18:56:23-07:00

Google Maps, 地図上に複数Marker追加、InfoWindowを開き、クリックしたポイントの住所を表示させる(逆ジオコーディング)サンプルデモ。

google.maps.event.addListener 'click' はコールバックで経緯度が取得できる。

クリックでInfoWindowを閉じて、次のインフォウインドを開くには、

infoWindowオブジェクトをグローバル変数で宣言しておき、クリックイベントでinfoWindowの有無を確認後、既存infoWindowオブジェクトを閉じる。

新たに新規infoWindowを代入し、開く。

if(infoWindow) infoWindow.close();
infoWindow = new google.maps.InfoWindow();
infoWindow.open(map, marker);

infoWindowにコンテンツを表示させるには、

setContent(content);でOK

if(infoWindow) infoWindow.setContent(conts);

マップ表示をセンターに持ってくるには

setCenter(latlng);でOK。

map.setCenter(e.latLng);

サンプルはこちら

Google maps api v3 サンプルクリックでmarker追加、infowindow開き、住所表示（逆ジオコーディング）

ポリライン追加したサンプルはこちら

toogle maps api v3 サンプルクリックでmarker追加、infowindow開き、住所表示（逆ジオコーディング）

情報ウインドウについては

Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code

逆ジオコーディング（住所の逆検索）については

Google Maps JavaScript API V3 サービス - Google Maps JavaScript API V3 - Google Code

Google Mpas API V3 複数のMarker追加ポリラインを表示するサンプルコード

2011-07-28T16:36:49-07:00

Google Maps, 地図上に複数Marker追加、ポリラインを表示させるサンプルデモ。

google.maps.event.addListener 'click' はコールバックで経緯度が取得できる。

Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code

サンプルはこちら、複数マーカーにポリラインを追加表示する

Google Maps API V3 サンプル複数マーカーにポリラインを追加する

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その2）

2011-07-27T19:26:05-07:00

先週土曜日に今年初のビアガーデンを満喫してきました。屋外で気持ちのいい風にあたりながら飲むビールは格別に美味しいですねｗ。

姫路城前に「イーグレひめじ」という再開発目的の複合施設があり、そちらの屋上にて姫路キャッスルホテル運営のビアガーデンが開かれています。姫路城を眺めながら屋外でビールが飲めるという贅沢な設定のビアガーデンなんですが、現在、大天守保存修理期間中でお城の大天守部分は覆い隠され見れません。

ただ、ビル前面には構造物など全くなく、お城をはじめ、その背にある緑豊かな山々を一望でき、風通しがよく、気持ちのいいビアガーデン！ガーデン！を楽しめますｗ。

さて、前回に続いて「Yahooテキスト解析Web APIを利用して校正支援プラグインの作成」
MovableTypeに日本語文章校正ツール（文字の入力ミスや言葉の誤用がないか、わかりにくい表記や不適切な表現が使われていないかなどをチェックする機能）を実装する。

そのプラグイン作成でのconfig設定と設計について取り上げることにします。

設計

今回作成するプラグインを５W１Hで表してみると

who ブログ記事編集権限を持つユーザー
- ブログ記事編集画面にアクセスできる人
  機能追加メソッドの中にパーミッション等の制約（コンディション）はいらない。
what ブログ記事本文
- Model（MT::Entryオブジェクト）から本文・続きのデータを取得する。ブログ記事編集画面ということから、エントリーIDの取得が可能。entryIDでModelからデータ取得。
when ブログ記事を未投稿、公開保存後ならいつでも利用可
- ブログ記事を保存することで利用可能に。 => 未公開・公開時の状態でボタン表示させる。
where ブログ記事編集画面、パーマリンク表示横にボタンを追加（ダッシュボード内）
- ブログ記事編集画面テンプレートソースにボタンソースを追加する。テンプレート内でステータスに応じて条件分岐。
why 公開前の記事校正作業フローの効率を上げる、チェック作業をより確実なものとする。記事コンテンツの充実を図る。
外部サイト等の校正支援サービス使用は、機密文章等入力された内容が流出する懸念があり使用できない。
how Yahoo!WebAPIを利用し、本文を解析、結果を受け取り表示する。
- ボタンクリックで処理実行できるようにする。
  ダイアログ開いて、バックグランドでYahoo!WebAPIにリクエスト送り、レスポンスを受け取り、見やすい形式で表示する。

ブログ記事編集画面（未公開・公開状態）にボタンを追加。
ボタンをクリックすると本文をYahoo!WebAPIに投げて解析。
画面遷移しないダイアログ（モーダルウィンドウ）を表示させる。
結果（データ）をレスポンスとして受け取り、見やすく整形。
表示形式は、2カラムでメインカラム本文、サブカラム結果内容。
（ここまでバックエンドで処理する）
結果表示、本文と照合し、マッチする部分の表示を変更する。（フロントエンドで処理する）

簡単に図で表すと以下のような流れになります。バックエンドはMTシステム内（サーバ側）での処理。フロントエンドはクライアント（ブラウザ）での処理という認識でいます。アプリケーションサーバとは【Webアプリケーションサーバ】 - 意味/解説/説明/定義： IT用語辞典参照。

電力使用状況API、jQuery ajax、Google Chart Toolsを使って関西電力使用状況メーター生成

2011-07-20T14:09:54-07:00

関西に１０％超の節電要請政府、電力使用制限令は見送り - Google ニュースより

関西圏でも電力不足に陥ることが見込まれるということで、関西電力使用状況メーターを作ってみました。Yahoo!デベロッパーネットワーク - 震災関連情報 - 電力使用状況APIからjQuery ajaxで電力使用状況データを取り出し、Google Chart Tools - Google Codeを使って表示させるサンプルコードとなります。

[を] WebAPIを駆使して東京電力使用状況メーターを作る！（Perl版とJavaScript版）の記事と同じような表示方法にしてみました。

ちょっと異なる部分は、電力使用率に応じて、メーター表示色を変更するようにしています。電力使用率を表す色の定義の変更について - 節電・停電 - Yahoo! JAPANに習い使用率に応じてバーの色表示を変えるようにしてみました。

今現在の関西電力使用状況は以下のグラフのとおりとなります。

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その１）

2011-07-20T06:36:16-07:00

最近、1日1個、寝る前に生グレープフルーツを食べることにはまっています。良質なビタミンCとクエン酸がふんだんに含まれていることから疲労回復や胃液分泌を高めて夏場の食欲の不振対策などによろしいようです。この時期販売されているものは水分を多く含んでいますので喉の渇きを潤すにもいいですよ。

さて、「そろそろMT5のプラグインも作れるようにしないとな」ということで（いまだにMT4を使っていますが・・・）、今回Home - GitHubにありますMovable Type 開発者向けガイド - GitHubを参考にMovableType5に校正支援機能を実装するプラグイン作成にチャレンジしてみたいと思います。（あくまで作成までのプロセスを記事として公開するだけです。使えるモノとして公開できるまでには時間がかかるかと・・・）。

なお、本記事（連載）は「MovableTypeプラグイン開発者向けガイドを読むことであなたにも便利なプラグインが作成、実装できるようになりますよ」という内容となっています。実際にプラグイン開発ガイドをひととおり読んでみて、自分の持っているアイデア＋でMovableTypeプラグイン開発にチャレンジしてみてはいかがでしょうか？

MT4でのプラグイン作成はこちらのMovable Type Documentation | MovableType.org - Home of the MT CommunityのDeveloper Documentationを読むといいですよ。

Movable Type 開発者向けガイド - GitHubが作成され、以前に比べMTプラグイン作成の敷居が徐々に下がってきているように感じます。あとは、みんなでガイドにある種エッセンスみたいなものを付加・肉付けしていくことで良質なドキュメントに仕上がっていくんじゃないでしょうか。そうしたフローが自然と生まれてくるといいですね。GitHubにアップされているので可能かも（movabletype.github.comでリポジトリ作ってみてはどうだろうか）

できれば、本記事を読む前にMovable Type 開発者向けガイド - GitHubを一読していただけると理解しやすいと思います。

お題は「外部Web APIとの連携バージョン２」

Yahooテキスト解析Web APIを利用してMovableType記事編集支援プラグインの作成

サブ～ブログ記事編集画面に校正支援ツールを実装して、公開前に文字入力ミスや言葉の誤用などの確認作業を機械にやらせちゃって、ミス発生を効率よく無くしてゆこうゼッ！

サブ２～まぁーとりあえず記事を書いてみたけど、ぶっちゃけSEO的にはどうなの？文中内容でウェブコンテンツ需要から見ると特徴的な表現はなんなの？他にどんな言葉が重要視されてるの？なんて第三者視点でドキュメントの日本語解析を機械にやらせちゃって、効率よく加筆・編集してコンテンツを充実（的を絞る）させてゆこうゼッ！

ワークフロー効率を上げると共にチェック作業（ダブル、トリプルチェック）を確実なものとします。
投稿者のドキュメント作成作業に刺激を与え、文章作成技術の育成補助・底上げを図りますｗ。

以下は、実装したプラグインを使っての校正支援作業フローを行ってみたキャプチャとなります。実際に記事の公開前に校正作業を機械にやらせています。4ヶ所ほど見つかりましたｗ。文章作成が苦手で誤字脱字の多い自分には強い味方です。

コマンドラインからFTP操作する覚え書き

2011-07-04T18:48:43-07:00

linux,UbuntuにてコマンドラインからFTPを操作するのに便利なログイン自動化の覚え書き。Ubuntuは、GUI環境でデスクトップから手軽にFTP(サーバー)接続でき、ファイル移動、編集、削除なども簡単にできる。

コマンドラインからレンタルサーバーxreaにファイルアップロードできると手軽だよなということで、昨日からコマンドラインからFTP操作するようにしました。FTPログイン後は、linuxコマンド感覚で使えるので操作が手軽。

以下の手順で操作すればログインできます。(xreaの場合)

 
user@ubuntu ftp s224.xrea.com // サーバーを指定してftpコマンド入力
Name: your_login_name  // サーバーログインユーザ名
Password:  your_login_password   // サーバーログインパスワード

ログインできたら下記のようなメッセージが出て、あとはFTPコマンドで操作ができるようになります。

 
Connected to s224.xrea.com.
220 ProFTPD
331 Password required for weblibrary
230 User weblibrary logged in
Remote system type is UNIX.
Using binary mode to transfer files.

FTPで使えるコマンドはヘルプで一覧表示できます。

 
user@ubuntu ftp>help   // もしくはftp>?

代表的なコマンド操作方法についての説明は以下を参照ください。

FTPとSMBをコマンドとして使用するには - Ubuntu Japanese Wiki

FTP接続を自動化する

FTPサーバーへのログインはじめ、操作などを自動化することも可能です。

$HOMEディレクトリに [.netrc]ファイルを保存し、必要な記述をすることでログイン操作が自動化できます。

以下サンプル.netrc

.netrc

 
machine server_name    // 例）machine s224.xrea.com
login your_login_name
password your_login_password
macdef init  // 空行までを実行。
cd public_html   // public_htmlへフォルダ移動

以上を記述した[.netrc]ファイルを$HOMEディレクトリに保存しておくことでログイン自動化できるようになります。

最初のftp操作は

 
user@ubuntu ftp server_name

となります。

Google Mpas API V3 複数のMarkerを追加表示するサンプルコード

2011-07-04T17:31:53-07:00

Google Maps, 地図上に複数Markerを表示させるサンプルデモ。

google.maps.event.addListener 'click' はコールバックで経緯度が取得できる。

Google Maps JavaScript API V3 のイベント - Google Maps JavaScript API V3 - Google Code

サンプルはこちらGoogle Maps API V3 サンプル複数のMarkerを追加する

大阪マラソン、神戸マラソンスタートまでのカウントダウンタイマー

2011-07-03T21:52:01-07:00

大阪マラソン2011、神戸マラソン2011共にエントリー当選してちょっと浮かれています。両大会とも第1回ということでエントリー当選できてめちゃ嬉しいです、昨日エントリーフィーも払い込み完了しましたので後は開催日まで待つだけです。

ということで、両大会スタートまでのカウントダウンタイマーを作ってみました。jQueryを使ってプラグイン化しています。

こちらのお洒落なA Colorful Clock With CSS & jQuery | Tutorialzineをプラグインの内容に盛り込もうとおもいましたが・・・メーターが目立ち過ぎてしまい、本来の残時間がぼやけるのでシンプル表示にしました。

Google Web Fontsを使ってフォント指定しています。Google Fontはこちらの記事を読んで一覧プレビューするといいですね。Google Web Fontsの全書体をプレビュー - Weblog - hail2u.net

今度はGoogle Maps APIを使ってのランマップ作成を予定しています。

最終的には、Tatsumakiを使って非同期通信によるリアルタイムマップ表示までできればなぁーとUstを組み合わせればおもしろいかなぁーとも。

残り100日強です。すでに練習開始しています。両大会とも3時間50分前後で完走できるように、筋力の持久力をつけるメニューを中心に練習していくつもりでいます。スタートまで楽しみです。

大阪マラソン開催まで、あと

OSAKA MARATHON 2011

神戸マラソン開催まで、あと

KOBE MARATHON 2011

下記のコードをブログなど記事文中に貼り付けることで上記と同じようなカウントダウンタイマーを表示できるようになります。コード載せておきます。

jQueryを使ったシンプルなカウントダウンタイマープラグイン

2011-07-03T21:20:57-07:00

カウントダウンタイマーをブログに貼り付けようと思い、jQueryプラグイン化したものを書いてみた。

Links for 2009-11-11 [del.icio.us]

2009-11-12T00:00:00-08:00

70 Of The Best Photoshop Actions For Enhancing Photos | Creative Nerds

Links for 2009-07-28 [del.icio.us]

2009-07-29T00:00:00-07:00

Links for 2009-07-07 [del.icio.us]

2009-07-08T00:00:00-07:00

Links for 2009-07-06 [del.icio.us]

2009-07-07T00:00:00-07:00

Links for 2009-06-29 [del.icio.us]

2009-06-30T00:00:00-07:00

Links for 2009-06-28 [del.icio.us]

2009-06-29T00:00:00-07:00

Links for 2009-06-27 [del.icio.us]

2009-06-28T00:00:00-07:00

Movable Type[ムーバルタイプ] WEBデザイン・WEB2.0情報BLOG

Movable Type5 プラグイン開発 外部Web APIとの連携 校正支援プラグイン作成（その3）

config.yaml

解説

Google Mpas API V3 指定範囲にフィットしたマップ表示 表示位置の自動設定 サンプルコード

jQueryプラグイン jquery.slideframe.js

Google Mpas API V3 地図上クリックでポイント間の高度データをグラフ表示 (高度サービス)サンプルコード

Google Mpas API V3 Directionサービス マーカードラッグしてルート再レンダリング サンプルコード

Google Mpas API V3 複数Marker追加＋InfoWindow開いて住所 + 高度表示（逆ジオコーディング + 高度サービス)サンプルコード

Google Mpas API V3 複数のMarker追加＋InfoWindow開いて住所表示（逆ジオコーディング)サンプルコード

Google Mpas API V3 複数のMarker追加ポリラインを表示するサンプルコード

Movable Type5 プラグイン開発 外部Web APIとの連携 校正支援プラグイン作成（その2）

設計

電力使用状況API、jQuery ajax、Google Chart Toolsを使って関西電力使用状況メーター生成

Movable Type5 プラグイン開発 外部Web APIとの連携 校正支援プラグイン作成（その１）

お題は「外部Web APIとの連携 バージョン２」

コマンドラインからFTP操作する覚え書き

FTP接続を自動化する

Google Mpas API V3 複数のMarkerを追加表示するサンプルコード

大阪マラソン、神戸マラソンスタートまでのカウントダウンタイマー

jQueryを使ったシンプルなカウントダウンタイマープラグイン

Links for 2009-11-11 [del.icio.us]

Links for 2009-07-28 [del.icio.us]

Links for 2009-07-07 [del.icio.us]

Links for 2009-07-06 [del.icio.us]

Links for 2009-06-29 [del.icio.us]

Links for 2009-06-28 [del.icio.us]

Links for 2009-06-27 [del.icio.us]

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その3）

Google Mpas API V3 指定範囲にフィットしたマップ表示表示位置の自動設定サンプルコード

Google Mpas API V3 Directionサービスマーカードラッグしてルート再レンダリング　サンプルコード

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その2）

Movable Type5 プラグイン開発　外部Web APIとの連携　校正支援プラグイン作成（その１）

お題は「外部Web APIとの連携バージョン２」