Home > web Archive

web Archive

Piccy ver.001

piccy001.png

■先日公開したPiccyを、問題の修正や新機能を追加してバージョン001として公開します。

バージョン001では動作の不具合の修正と以下の機能を追加しました。

  • 管理者認証機能
  • 写真、フォルダ、タグへのコメント
  • GPS携帯からの位置情報通知、ロケーションタグ機能
  • GoogleMapsによるロケーションタグ一覧

サンプルサイトをごらんください。サンプルサイトはパスワード「guest」で管理者ログインできます。

■ロケーションタグとGoogleMapsAPIもフォトアルバムを考えていた当初からやってみたかったので、とりあえず作ってみましたがどうでしょうか。

ちなみに写真と位置情報については、以前増井”富豪家”俊之さんとお話してたときに（Wikiばなですな）、「位置情報と時間の関連データが取れてれば後からどうにでもなるんだから位置情報をいちいち写真に添付するのはナンセンスだ」という話をしてて、もっともだなーと思っていたので、そういうものをつくってみたいなと前から思ってたんでした。

■［追記］

Piccyとは

■Ajaxを採用したオンラインフォトアルバムです。 気軽に管理できてストレスなく閲覧できる画像ビュアーを目指して開発しています。

詳しくは以下の解説ページもごらんください。

ダウンロード

設置方法

  • 圧縮ファイルを展開する。
  • info.txt のadminpassを必ず変更する。
  • info.txt の site_name や url などを編集する。
  • index.rb 先頭行のRubyのPATHをサーバーに合わせる。
  • サーバに転送する。
  • dot_htaccessは「.httaccess」に名前を変える。
  • index.rb に実行属性を付加する。他の属性は良きに計らう。
    • data以下のディレクトリに書き込み属性が必要かもしれません。

サムネイル作成機能を使う

ImageMagick/RMagickを使用することで、画像のサムネイルを作成することができます。 デフォルトでは機能はオフにされています。

  • info.txtのmakethumnailをtrueにする。スペースで区切ってください。
    > makethumnail true
  • ImageMagickとRMagickをインストールしてください。
    　必要ならば、thumnail.rbのrequireのパスを変更してください

位置情報記録機能を使う

auのGPS機能のある携帯電話からアクセスすることで、位置情報のあるタグを使用できます。 デフォルトでは機能はオフにされています。

  • info.txtのlocationをtrueにする。スペースで区切ってください。
    > location true
  • ezwebからpiccyを置いたURLにアクセスしてください。
    > http://（自分のサイトURL）/index.rb?cmd=location
  • 位置情報通知ページが出ますので、「位置情報を通知する」をクリックします。
  • 位置情報をが得られればフォームが出ますので、場所の名前を入力して送信してください。
    　（場所の名前は入力しなくてもかまいません）

※現仕様では位置情報通知は誰からでもできてしまいますので注意してください。

GoogleMaps機能を使う

GoogleMapsに位置情報タグをマッピングしてみることができます。

  • GoogleMaps APIのキーを取得します。
  • info.txtのgmapkeyをにAPIキーを入れる。スペースで区切ってください。
    > location ABQIAAAAgf6OSxrgd3QJC98-sUWrXBT6rMgtMUOAl…

謝辞、同梱ライブラリについて

以下のライブラリ、モジュールを使用しています。関係者の開発と提供に感謝します。

動作について

  • 動作についてはFirefox1.0.7、InternetExplorer6で行っています。
  • Opera,Safariなどのブラウザでの動作検証は行っていません。問題がありましたらフィーとバックいただけると助かります。
  • 報告はこの記事のコメントなどにどうぞ。

ライセンス

  • Comments (Close): 0
  • Trackbacks (Close): 0

Create Your Own DragonQuest Spell

dqspell.png

■ちょっと思いついたので作ってみました。

参考：

なんか想像してたよりおもしろくなかったなー。

以上！

  • Comments (Close): 0
  • Trackbacks (Close): 0

Piccy : Ajax photo album

piccy.png

■ブラウザ上で気持ちよく使えることを目指した写真ビュアーを作ってみました。かなりのピュアAjax アプリケーションでもあります。

  • おもな機能

    • JavaScriptによる画面更新なしの写真閲覧
    • スライドバーで画像サイズの動的変更
    • 画像のドラッグ＆ドロップによるタグ管理
    • 写真タイトルなどのテキストをその場で編集（in-place-edit)

  • こちらでお試しください（アクセス集中すると重いかも…）

■[追記]　公開後の問題を修正し機能を追加したver.001をリリースしました。 - http://collisions.dotimpac.to/works/web/piccy001.html

これはなにか

■ブラウザで使用するweb上のフォトアルバムソフトです。管理が簡単でストレスなく見られる、というものを目指しています。

以前、旅行写真を公開するような機会があって、管理がらくちんでかっこよく見られるアルバムソフトというのを探していたんですが、探しかたが悪いのかうまく見つけられませんでした。そのときは結局SPGMを使ってみて、フォルダに画像をコピーするだけでアルバムを表示してくれるのは楽でよかったんですが、画面遷移がかったるかったり、プラグインを入れないといけなかったり細かい情報をテキストで書いてディレクトリに置かなければならなかったりとなかなかうざったい思いをしました。

いっぽう、ストレスなくきれいに見せるという意味では、たとえばzphotoのようなコンパイルしてflashファイルにするようなものもいいんですが、写真を増やしたり差し替えたりといった場合の手間があるのでちょっとなー…と。

で、その中間というと、やはりAjaxなのではないかと。ちょうどTiddlyWikiやLesserWikiのUIをほかのものに使えないかなと考えていたところだったので、思い立って作りました。

機能の詳細

■基本的にはデモサイトで触ってもらえばわかるかと思います。

フォルダウインドウのオープン／クローズ

TiddlyWikiスタイルと思ってもらっていいです。フォルダを開くと中にある写真画像が一覧できるウインドウが開き、写真をクリックするとそのウインドウの下に大きな画像を見るウインドウが開きます。それぞれのウインドウは個別に開閉できます。

ズームスライドバー

写真ウインドウにはそれぞれスライドバーがついていて、表示画像の大きさを変えることができます。

フォルダ／写真タイトルのin-place-edit

フォルダと写真のタイトルは編集することができます。タイトルの文字をクリックすると編集フォームに切り替わり、その場で編集できます。

ドラッグ＆ドロップによるタグ編集機能

いわゆるタグというか、いくつかのフォルダから写真を選んで別のアルバムをつくることができます。

タグの編集は写真をドラッグ＆ドロップすることで行えます。タグのウインドウに写真をドロップすると、非同期リクエストを行い情報を自動的に保存します。

script.aculo.usを使ってみた

■ご覧のとおり、JavaScriptをふんだんに使用していてスゲー感じになってますが、見栄えの部分ではscript.aculo.usというJavaScriptユーティリティライブラリを全面的に利用しています。使いかたについてはLesserWikiをものすごく参考にしました。

具体的にどのあたりを使っているかというと、

  • Effect.Appear
    • ウインドウや写真がフェードインしてくるところに使用してます。これがあると見栄えがだいぶ違いますよね。
  • Effect.HighLight
    • mouseoverでのハイライティングに。
  • Draggable
    • 写真をドラッグさせるために使っています（スライドバーも）。やったことある人はご存知の通り、JavaScriptでのマウスポインタ位置とレイヤーの相対位置を調停するのは死ぬほど面倒なんですが、
      > new Draggable(‘idofelement’,[options]);
      とかエレメントを指定してやるとそれだけでドラッグできるようになるという。とはいえ、ワナがいろいろあって面倒なことをしてますが…。
  • Droppables.add
    • こっちはタグウインドウのドロップイベントリスナ。ライブラリがなければ絶対にやろうと思わなかっただろう処理です。
  • Ajax.inPlaceEditor
    • タイトル編集のその場で編集モードを自動設定してくれます。すげえ便利。

といったところです。ただデメリットとして、script.aculo.usフルセットとprototype.js（必須）でファイルサイズが130KBくらいなので、ページのロードがちょっと遅くなるかなと。

それとあと、データ関係は全面的にJSONを採用してみました。なるほど便利かもと思いました。

今後

■まだつくりたてほやほやでひどいものなので、もうちょっとなんとかしてからサポートしたいと思います。

  • IEだとときどき表示がくずれます。謎です。
  • IEだとドラッグ座標がずれます。これも謎です。
  • ユーザ管理をして、タグ編集はログインしないとできないようにします。

使えるかどうかわからないですが、いちおう現状のアーカイブも置いておきます。ドキュメントはありません。ご参考に。

  • Comments (Close): 0
  • Trackbacks (Close): 0

スケジュール指向webメモツール：Calki　ver.002

calki002.png

■夏の自由研究がわりにcalkiに手を入れてバージョンを上げてみました。Ajax系支援機能の追加でおもにデザインとユーザビリティがリファインされています。

prototype.jsを使ってこりこりと地味に非同期ロード系の機能を盛り込んでみたら、なんとなく便利っぽくなってきましたがどうでしょうか。とりあえずサンプル（というか自分で使ってる）サイトをごらんくださいませ。

Calkiとは

■日付管理、簡易スケジュール機能のあるWiki風のメモツールです。RandomNoteがベースになっています。詳しくは以下のページをごらんください。

新機能

■最近になってWebDesigningの今月号を立ち読みしてたら、JavaScript/Ajaxの特集にkaiwarecotonohaが紹介されてて驚いて、それでAjaxの検索が多かったのかー、あれすごい適当だしメンテもしてないしその後Ajaxもとくに触ってないから恐縮だなー、などと思いまして、じゃあprototype.jsでもちょっと触ってみるかと思ったんですな。せっかくだからとcalkiにいろいろ機能をつけていったら、インターフェイスの部分がかなり刷新されてしまいました。おおむね使いやすくなってると思います。

JavaScriptによる動的なページ操作

  • 日付ページへのマウスオーバーでその日付ページに対するツールバーが出ます。直感的な操作が可能です。
  • 見出しをクリックすることで、メモを畳んで隠すことができます。
  • 開いている日付から「前の日」「次の週」のように順番に日付ページを開くことができます。

JavaScriptでの動的なスタイル操作で、見たくない情報は隠せてちょっと気持ちがいいです。まだ開いてないメモを開いたり、日付を進めたり戻したりするときは、Ajax式の非同期ロードをします。

非同期ロード／セーブによるシームレス編集

  • 以前までは画面が切り替わっていたメモの編集がその場でできるようになりました。
  • 追記の書き込みもその場で非同期に行います。
  • 編集時にほかのメモが参照できるので、コピー＆ペーストが簡単です。

TiddlyWikiのサクサク感を目指してみました。やや重いので待ち時間なしとはいきませんが。使ってみて編集時にほかのメモが見られる（そのメモも編集状態にしてwikiフォーマットでコピペできる）ってのがわりと重要だなと思ったんですが、それは後で書きます。

MM/memoインポート機能

  • MM/memoから自分のブックマークを日付ごとに取得してメモを作れます。
  • ちゃんとタグをキーワードリンクにするので、うれしいかも

おまけというか、自分が欲しかったのでつけました。ほんとは毎日自動取得したほうがいいかもしれないけど。

ダウンロード

■Ruby1.8.1の環境が必須です。また、非同期編集とMM/memoインポートは、別途Uconvをインストールしないと使えなくなっちゃったんで、デフォルトでは無効になっています。そのあたりご了承のうえ設置・使用してください。もちろん無保証です。

設置方法はAboutPageをごらんください。

雑談：シームレス編集とwikiページの再統合

■上にもちょっと書きましたが自分でちょっと使ってみて、シームレス編集（というかJavaScriptでエレメントを差し替えてその場で編集できる機能）とwikiはかなり相性がいいんじゃないかと思いましたね（TiddlyWikiはもともとそれを狙っているのかもしれませんが）。とくに、編集しながらほかのページを見たり、そのページから（しかもWiki書式で）コピーしたりできるのがwiki的にうれしい。wikiエンジンによるアジャイルなコンテンツ作りには、方針の変更とか内容の再統合というプロセスが絶対に避けられないわけで、長くなりすぎたページの株分けとか、よく参照する内容を集めた新しいページの作成みたいなことが極力やりやすくないといけないのではと思いました。

CalkiにはRandomNoteから継承した検索キーワードリンク機能があって、この検索結果の一番上に「このキーワードの新しいメモを作る」というフォームを前バージョンからつけてたんですが、使ってるうちにあんまり便利じゃないんではずしたりしてたんですな。ところが、これが今バージョンからはかなり威力を発揮します。たとえば「JavaScript」を検索すると、いままでメモしたJavaScriptのメモが一覧されますが、この中にはよく見るメモもあればぜんぜん見ないメモもあるわけです。そこでよく見るメモをそれぞれ編集状態にしてコピーして、新しいフォームに入れて別のキーワードをつけてメモを作成すれば、いままでより情報が簡単に引き出せるようになるというわけ。これかなり便利じゃないすか？　便利だと思うんですが、どうでしょう。

というわけで、もし興味があったら使ってみてください。たぶんバグはたくさんあると思いますが。バグがあったらサンプルサイトに［［バグ］］とか検索キーワードをつけてメモを作っておいていただけるとたすかります。

  • Comments (Close): 0
  • Trackbacks (Close): 0

kaiwarecotonoha powered by AJAX

kaiwarecotonoha.png

■AJAXしてみました。

これはなにか

文字が育つ不思議チャットボード、かな。画面の好きな位置に「かいわれフォント」で文字を入力できます。「かいわれフォント」は打ち込んだときは種の状態ですが、時間が経つにつれて芽を出し成長し、やがて枯れていきます。画面に出ている文字は画面左のスライドバーを操作して時間をもどすことで、成長の様子を見ることができます。

ちなみにいわゆる世にいう AJAX スタイルで開発しました。JavaScript上のXMLHTTPRequestで入力されたメッセージを非同期でサーバに保存し、同時に閲覧しているユーザのページが画面遷移なしにリアルタイムで更新されるはずです。

かいわれタイプライターとAJAX

「かいわれフォント(Seed Letter）」というのは元同僚で友達の 小林ますみ さんの作品でして、これちゃんと全てのアルファベット（今回使ってませんが小文字や記号もあります）について字形のベースにカイワレの種を植えて毎日撮影して作ったというドド労作なのですが、このデータを使って好きな単語を打てるようなタイプライター的なソフトを見てみたいという話があって僕が安請け合いしていたのですな。でもprocessingで試作してみたりしてみたもののいまいち面白いものにならなくて放置していたのでした。で、ここのところのAJAXの盛り上がりでなんか作ってみるかと考えてたときにふと思い出して、今回のような形にしてみました。去年の BulletSurf に続いて２年連続Javascriptのアプリをエイプリルフールリリース！　というのも考えてたんですが、去年エイプリルフールにリリースしたらただのネタで実装してないと思われたみたいだったので早めにリリースしてみました。

各地でAJAXに触発されて作られているサンプル的なアプリはインクリメンタルサーチを行う（つまりGoogleSuggestをパクった）ものが多いですけれども、個人的にはどうもリモートデータに対するインクリメンタルサーチがぴんとこない気がしますし（インクリメンタルな検索手法って「このへんにあるのは分かってるけどそれがどこだかわからない」みたいな、知っているたくさんのものの中から今いるものを取り出すというシチュエーションにこそ有用なんであって、全ての検索において有用なんではないと思うんですよね。逆に wema2 の付箋インクリメンタルサーチが誰が見ても強力に思えるのはそういった事情ではないかと）、どうせパクるならより強烈なGoogleMapのほうだろーと思っていましたんで、今回のはなかなか気に入っているんですがいかがでしょうか。あと「フォームがなくてタイプするとマウスポインタの位置に直接書き込まれる」というインターフェイスは案外初めて見た気がする。いやじっさいキーボードを触ってるときにポインタの位置を意識させられるのは気持ちわるくて、そりゃ誰もやらんわなと思いましたが。

前このかいわれフォントのデータを使ってサンプルをつくってみた時はそのデータの重さに辟易しましたし、仮にflashでやるとなると大量の画像データの管理で死にそうな気がしますので、HTML+Javascriptで作ったのはそれなりに正解だったかもと思いました。imgタグでの画像データを表示するとこ自体がある意味非同期なわけだし。

  • Comments (Close): 0
  • Trackbacks (Close): 0

Home > web Archive

Pages
Recent Entries
Categories
Tag Cloud
Search
Feeds
Meta

Return to page top