sharedhat - Personal blog of Noritaka Horio » project http://sharedhat.com WebデザインからPHP、Javascriptなどのプログラミングに関係する情報を掲載しています。活動中のプロジェクト情報も掲載しています。 Mon, 11 Apr 2011 05:00:30 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 Mootools Photo Galleryテンプレート1.0をリリースしました。 http://sharedhat.com/project/1710/ http://sharedhat.com/project/1710/#comments Tue, 15 Feb 2011 04:01:39 +0000 horry http://sharedhat.com/?p=1710

PC/iPadに対応したフォトギャラリーテンプレートを作成しました。
Mootools、PowerTools、OOCSSを利用しています。
バージョンは1.0です。

Mootools Photo Gallery Template 1.0をダウンロードする

ギャラリーのメカニズム

ソースコードを改造する場合は、コードを読む前に下記の内容を一通り見てもらえると理解度が変わると思います。

この画像ギャラリーは下記のControl、Gallery、Controller、Serverの4つの構成で成り立っています。
各項目についての役割は下記の通りになっています。

コントロール(Control)

コントロールはギャラリー上でのイベントを監視し、ギャラリーに適切なコンテンツを要求します。
又、それに伴う表示の更新を行います。

ギャラリー(Gallery)

画像ギャラリーの機能を提供します。
具体的な処理はコントローラーに委譲します。

コントローラー(Controller)

コントローラーは画像コンテンツの最適化、画像の切り替えの制御などの画像ギャラリーのすべての処理を行います。
コンテンツの最適化はWebサーバーにAHAHを利用して要求します。

サーバー(Server)

サーバーはコントローラーからの要求を受け取り、適切な画像コンテンツを応答として返します。
画像コンテンツはHTMLの断片です。

テンプレートの今後

今後はテンプレートのバグを修正しつつ、サーバーの処理部分をPHPのコードに置き換えたいと思います。
特定のディレクトリに画像をアップロードすると、サーバーサイドで画像を最適するようにしたいです。
最終的にはテンプレートではなくなります。
Similar Posts:

]]> http://sharedhat.com/project/1710/feed/ 0 MootoolsとPowerToolsでPC、iPadに対応したギャラリーサイトのテンプレートを作りました。 http://sharedhat.com/project/1673/ http://sharedhat.com/project/1673/#comments Thu, 03 Feb 2011 17:04:48 +0000 horry http://sharedhat.com/?p=1673

MootoolsとPowerToolsでPC、IPadに対応したギャラリーサイトのテンプレートを作成しました。
閲覧するデバイスに最適な形式で表示するようにしています。
もちろんiPadの傾き変更にも対応済みです。
PowerToolsはMootoolsのコアデベロッパーのChristoph Pojerが開発したMootoolsベースのライブラリです。
Mobileデバイス用イベント、クラスユーティリティ、ツリーUIなどのコンポーネントを配布しています。

サイトとソースコード

Mootools Photo Gallery

http://gallery.sharedhat.com/

ソースコード

http://code.google.com/p/mootools-photo-gallery/source/checkout

ライブラリ

ライブラリは下記のサイトから入手できます。

Mootools

http://mootools.net

PowerTools

http://cpojer.net/PowerTools/

PowerToolsの使用したコンポーネント

今回iPadに対応するために、PowerToolsの下記のコンポーネントを使用しました。

Custom-Event

名称 説明
Element.defineCustomEvent カスタムイベントを定義できる機能を提供する。

Mobile

名称 説明
Browser.Mobile Mootools CoreのBrowserにiPad/iPhone/iPodのモバイルデバイスの情報を追加する。
Browser.Features.Touch Mootools CoreのBrowserにTouchイベントのサポート情報を追加する。
Mouse Touchイベントに対応していないデバイスの際に、イベントmousedown, mousemove, mouseupをベースにtouchstart, touchmove, touchendイベントをカスタムイベントで提供する。
これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。
Touch touchendイベントをベースにカスタムTouchイベントを提供する。
Click Touchイベントをサポートしている場合に、ClickイベントをカスタムTouchイベントに置換する。
これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。
Pinch Touchイベントをサポートしている場合に、カスタムPinchイベントを提供する。
Swipe Touchイベントをサポートしている場合に、カスタムSwipeイベントを提供する。
Touchhold Touchイベントをサポートしている場合に、カスタムTouchholdイベントを提供する。

Interface

名称 説明
Interface Javaのようなインターフェース定義機能を提供する。

便利だったコンポーネント

通常、iPad対応のサイトを制作する際に、iPadで途中の状態を表示して確認する必要があると思うのですが、
Mobile/Mouse、Mobile/Clickの二つはTouchイベントの対応していないPCでの動作確認ができて非常に便利でした。

iPadの場合、Clickイベントの変わりにTouchイベントを使用してイベントを処理をする必要があり、コードもそのように書く必要がありました。
しかし、Mobile/Clickを使用するとiPadの時だけ、ClickイベントをTouchイベントに置き換えてくれるので、通常のPCサイトのようにコードを書くことができます。
それに、Mobile/MouseでMouseイベントをTouchイベントに置き換えるので、Swipeイベントもマウスをクリックして画面をなぞるだけで実行できます。

試しに、ギャラリーサイトを表示し、ページ上でマウスをクリックしてをなぞって見てください。
写真がイベントに反応して切り替わると思います。

サイトのスクリーンショット

縦表示(portrait)の場合

横表示(landscape)の場合

最後に詳しいドキュメントを作成している途中ですので、完了次第ブログに記事として書きます。
PHPの軽量なフレームワークを使用して、画像をアップロードするだけで最適表示する感じにしてもいいと思っています。Similar Posts:

]]> http://sharedhat.com/project/1673/feed/ 0 Concrete5のパッケージ、Frontend Developer 1.1.0をリリースしました。 http://sharedhat.com/project/1664/ http://sharedhat.com/project/1664/#comments Wed, 19 Jan 2011 12:39:09 +0000 horry http://sharedhat.com/?p=1664 久しくメンテナンスしていなかったパッケージFrontend Developerの新バージョンをリリースしました。
基本的にはバグ修正と対応していなかった部分の対応を行いました。

ダウンロード

今回のバージョンでの対応は下記の通りです。

バージョン 1.1.0

  • GithubのAPIライブラリを2.11から2.12へアップグレード
  • ブロック、Github Repogitory, Github Tags, Github Isuue用のテンプレートのバグを修正。
  • Mootoolsプラグインのダウンロードファオームのバグを修正。
  • Mootoolsプラグインの取り込み処理のリファクタリング。
  • 日本語翻訳の不足部分の追加
  • 日本語翻訳ファイルの追加

もしパッケージで問題があればご連絡ください。
なるべく早く修正します。Similar Posts:

]]> http://sharedhat.com/project/1664/feed/ 0 MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。 http://sharedhat.com/project/1653/ http://sharedhat.com/project/1653/#comments Thu, 06 Jan 2011 17:42:35 +0000 horry http://sharedhat.com/?p=1653 MootoolsのGoogle Maps プラグインMMapの最新バージョン0.2.1をリリースしました。
バグと若干の仕様変更があります。

ソースコードはMMapからダウンロードしてください。
BuildディレクトリにビルドしたファイルとYUI Compresserで軽量化したソースが含まれています。

0.2.1の変更点

  • MMap.BaseMarkerをMMap.Marker.Coreにリネーム
  • MMap.MarkerをMMap.Marker.HTMLにリネーム
  • MMap.MarkerLoaderでHTMLマーカーが正しく読み込めないバグを修正
  • MMap.MarkerLoaderのオプションとloadメソッドの仕様を変更
  • MMap.MarkerManagerのactive/visibleメソッドを修正
  • MMap.MarkerManagerにactiveAll, activeByBounds, visibleAll, visibleByBoundsを追加

ビルドの仕方

自分でビルドしたい場合は下記のコマンドを参考にビルドしてください。
事前にpackagerをインストールした後、MMapをパッケージとして登録してください。

MMapのみビルドしたい場合

[shell]
php packager build MMap/* +use-only MMap > mmap.js
[/shell]

MMapと必要なMootoolsコンポーネントをビルドする場合

[shell]
php packager build MMap/* > mmap-with-mootools.js
[/shell]

後は少しずつ、使い方を書いていこうと思います。

Similar Posts:

]]> http://sharedhat.com/project/1653/feed/ 0 MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。 http://sharedhat.com/project/1644/ http://sharedhat.com/project/1644/#comments Sat, 25 Dec 2010 13:06:59 +0000 horry http://sharedhat.com/?p=1644 最新バージョンである0.2をリリースしました。
旧バージョン0.1とは互換性がありません。

又、旧バージョンでドキュメントを作成していなかったので、別途APIリファレンスを作成しました。

MMap version 0.2

MMap 0.2ドキュメント

MMap 0.2ドキュメントページ

MMap 0.2デモページ

MMap 0.2デモページ

0.1からの変更点

  • マーカーを読み込むマーカーローダーの追加(MMap.MarkerLoader)
  • マーカーを管理するマーカーマネージャの追加(MMap.MarkerManager)
  • 画像マーカーにスライドの再生／停止機能を追加
  • MVCObjectを利用したプロパティ監視に対応
  • 描画座標の指定をgoogle.maps.Latlngに統一
  • MMapオブジェクトの削除
  • Mootools1.3(1.2下位互換無し、完全な1.3)に正式対応

次期バージョンの0.2.1について

マーカーマネージャ(MMap.MarkerManager)の仕様変更

マーカーマネージャのactive/visibleメソッドの仕様を変更します。

現在、active/visibleメソッドにマーカーや短形オブジェクトを指定して、表示状態の変更、マーカーのアクティブ化の切り替えを実現しています。
しかし、今のAPI仕様だとメソッドの名称から具体的な振る舞いがわかりづらいので、0.2.1からは下記のように変更を加えます。

[javascript]
//0.2(現在の最新バージョン)での実行
markerManager.visible()
markerManager.visible(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.visible(bounds) //google.maps.LatlngBounds

markerManager.active()
markerManager.active(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.active(bounds) //google.maps.LatlngBounds

//0.2.1での実行はこうなります。
markerManager.visibleAll()
markerManager.visible(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.visibleByBounds(bounds) //google.maps.LatlngBounds

markerManager.activeAll()
markerManager.active(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.activeByBounds(bounds) //google.maps.LatlngBounds
[/javascript]

マーカーローダー(MMap.MarkerLoader)の仕様変更

マーカーローダーのオプション指定をRequest.JSONと同じようにします。
つまり、インスタンス生成時のオプションにurlやmethodオプションが使えるようになります。
これでインスタンスを生成した後に、loadメソッドでurlやmetohdを指定しなくてもよくなります。
具体的には下記のようになります。

[javascript]
var loader = new MMap.MarkerLoader({
url: ‘/markers/’,
method: ‘get’
});

loader.load({
‘username’: ‘mootools’,
‘keyword’: ‘interface’
});
[/javascript]

MMapのこれから

0.2.1をリリースした後に、Google Mapsの地図上に配置できるリッチなウィジットを作成していく予定です。
地図上に配置できるコントロールや住所検索ができる小さな小窓などです。
その後、デモ用としてウィジットを利用したアプリを公開します。Similar Posts:

]]> http://sharedhat.com/project/1644/feed/ 0 MootoolsのプラグインStaticMaps0.1.1をリリースしました。 http://sharedhat.com/project/1527/ http://sharedhat.com/project/1527/#comments Sat, 30 Oct 2010 05:28:22 +0000 horry http://sharedhat.com/?p=1527 StaticMapsはMootoolsのプラグインで、javascriptを利用して静的な地図を描画します。
地図の描画にはStatic Maps API V2を利用します。

地図に描画できるものはマーカーのみで、このバージョンではパスの描画のサポートをまだしていません。
次期バージョンでサポートする予定です。

Mootools1.2以上で動作します。

ダウンロードはこちらから可能です。
MootoolsプラグインStaticMapsのダウンロード

ではこのプラグインの簡単な利用方法を解説します。

特定の場所の地図を指定する方法

まず、StaticMapsのインスタンスを生成した後、地図のサイズや地図の中心を指定します。
その後、マーカーを生成して、地図に追加します。

地図のURLを取得する

toQueryString()メソッドを利用して地図のURLを取得できます。
リンクのhref属性を変更して、地図へのリンクを設定することが可能です。

オプションを利用して地図の描画を簡略化する

インスタンス生成時のオプションを指定するとコードを簡略化することができます。
オプションを指定して、renderToメソッドで地図を挿入する要素を指定します。

以上が簡単な解説です。Similar Posts:

]]> http://sharedhat.com/project/1527/feed/ 0 YUI Compressorを使用したデスクトップアプリをAdobe AIRで作ってみた。 http://sharedhat.com/project/1361/ http://sharedhat.com/project/1361/#comments Sun, 03 Oct 2010 13:33:40 +0000 horry http://sharedhat.com/?p=1361 Yahooが提供しているYUI Compressorを利用してデスクトップアプリを作成してみました。
Adobe AIR2.0の新機能にネイティブプロセスAPIがあります。

ネイティブプロセスAPIは、外部アプリケーションの起動とそれに対する標準入出力の操作を可能にします。
これによりAdobe AIRでJavaのjarファイルを利用できるようになります。

YUI Compressor Desktop

YUI Compressor Desktop 1.0
YUI Compressor Desktop 1.0をダウンロードする

YUI Compressor Desktop 1.0 Source
YUI Compressor Desktop 1.0のソースコードをダウンロードする

利用するには

必要なアプリケーションのインストール

利用するには下記の条件を満たしている必要があります。

アプリケーションの設定

アプリケーションの設定を変更してください。

YUI Compressor Desktopのオプション

  • 設定画面で、言語を日本語にしてください。
  • java runtimeの部分でjavaランタイムへのパスを設定してください。

以上で利用可能です。
機能追加、バグ等がありましたらholy.shared.design@gmail.comまでご連絡ください。

YUI Compressor Desktopで満足できない場合

Java製のGUIアプリケーションがあります。
YUI Compressor Desktopより、利用できるオプションが豊富で、Javaのランタイムをインストールするだけで、利用できるのでとても便利です。

YUI Compressor Desktopで満足できない場合、こちらをご利用ください。
YUI Compressor GUIのダウンロードページへ
Similar Posts:

]]> http://sharedhat.com/project/1361/feed/ 0 WordPressのフォトログ「Exhibition」の正式版1.0.1をリリースしました。 http://sharedhat.com/project/1272/ http://sharedhat.com/project/1272/#comments Fri, 17 Sep 2010 02:00:03 +0000 horry http://sharedhat.com/?p=1272 正式版1.0.1をリリースしました。
いくつかのバグ修正とテンプレートの不足分を追加しました。

デモページに反映してありますので、気になる方はご確認ください。
http://exhibition.sharedhat.com/

ライセンスはMITライセンスで、自由にご利用いただけます。

Exhibition

Exhibition 1.0.1-stableをダウンロードする

ベータ版からの変更点

  • テーマ有効／無効時のオプションの設定処理を追加。
  • プレビューワーの表示が崩れる不具合を改修。
  • Operaでスクロールバーが表示される不具合を修正。
  • ページナビゲーションなしのときにjavascriptエラーが出ていたのを修正。
  • ツールチップが表示され続けるバグ対応。
  • アーカイブのページが正しく表示されないバグを修正。
  • ページャの位置を中央にくるよう対応。
  • RSSアイコンをフッターに追加。
  • 検索結果テンプレートを追加。
  • 多言語化対応
  • テンプレート中の文章の文言を修正。
  • スタイルシートの修正。
  • 検索フォームテンプレートの追加。
  • 不要なmetaタグを削除
  • 不要なGoogleAnalyticsコードを削除

対象ブラウザ

  • Firefox 3.6以上
  • Opera 10.6以上
  • Chrome 5以上
  • Safari 5以上
  • Internet Explorer8以上

2010-09-17追記

対象ブラウザと変更内容を追記
Similar Posts:

]]> http://sharedhat.com/project/1272/feed/ 0 WordPressのフォトログテーマ「Exhibition」をリリースしました。 http://sharedhat.com/project/1262/ http://sharedhat.com/project/1262/#comments Sun, 12 Sep 2010 04:07:33 +0000 horry http://sharedhat.com/?p=1262 Exhibition

このテーマはExhibition.jsを利用したフォトログテーマです。
バージョンは1.0.1bでまだベータバージョンです。

写真の投稿用にYet Another Photoblogプラグインを利用しています。

Exhibition-1.0.1bをダウンロードする

特徴

・スクロールレスな画像閲覧。
・動的(Ajax)/静的なテンプレートを使用したSEO対策。
・画像の個別ページが表示可能。
・個別記事ページ、ページはでウィジット対応。

デモサイト

Sharedhat Exhibition

http://exhibition.sharedhat.com/

必要なプラグイン

Yet Another Photoblog

http://wordpress.org/extend/plugins/yet-another-photoblog/

WP-PageNavi

http://wordpress.org/extend/plugins/wp-pagenavi/

注意事項

写真の投稿

YAPBを利用する際、記事の投稿時に正常に画像がアップロードできない場合があります。
その際は設定のメディアより「アップロードするファイルの保存場所」をwp-content/uploadsにしてください。

画像のサイズ

モニタのサイズによっては、画像のプレビューワーが表示領域よりはみ出る場合があります。
その際は、管理画面の設定より、Exhibitionを選択して、画像のサイズ、画質を適切な値に設定してください。

現在見つかっているバグ

Opera

Operaで不要なスクロールバーがでる問題が見つかっています。
根が深そうなのですぐに改修できそうにないです。

ツールチップ

ツールチップが消えない問題が見つかっています。
原因は特定しているので、できるだけ早く対応する予定です。Similar Posts:

]]> http://sharedhat.com/project/1262/feed/ 0 Frontend Developer Packageを利用してサイトを制作しました。 http://sharedhat.com/project/1170/ http://sharedhat.com/project/1170/#comments Sun, 22 Aug 2010 09:05:31 +0000 horry http://sharedhat.com/?p=1170 リリースしたconcrete5のアドオンで構築したサイトを公開しました。
実際には、このサイト用にテンプレートを少し変えたりしていますが、大体こんな感じのサイトができます。

Frontend Developer
http://project.sharedhat.com/

サイト制作に使用したアドオンは下記の通り。

Next Previous
ページ間の横遷移のナビゲーションを確保するのに便利。
ほぼ必須のアドオンです。

http://www.concrete5.org/marketplace/addons/next-previous/

User Info
ユーザーの情報を表示できるアドオン。
表示するユーザー属性を選択できる。
http://www.concrete5.org/marketplace/addons/user-info/

サイト公開もほぼ完了したので、さっさと正式版リリースしたいです。Similar Posts:

]]> http://sharedhat.com/project/1170/feed/ 0