サト研【FWW_サイト運営・管理研究会(仮)】

サト研とは、福岡のIT系コミュニティのFWW_サイト運営・管理研究会(仮)の通称名である。

FWW_サイト運営・管理研究会(仮)

発起人の中のひとりであるBLANCOやいぶさんが「長過ぎるから」という理由で勝手に言い出したのだが、何故「サイ研」でないのか?の理由はよくわからないが、
おそらく、「カトケン」にインスパイアされているものと思われる。
という検索エンジン対策的な何か

jQueryを使った画像のロールオーバー

まさに車輪の(以下略)なんですが、

  • jQuery使う事最近多い
  • jquery_auto.js(リンク先なくなってる!)やyuga.jsを使うまでもない時もある

という事でなんとなしに書こうと思った。

こうだったらいいなと思ったこと

  • シンプル
  • 拡張子の文字数にかかわらずに動く
  • input type="image"でも動く

コード

/**
 * rollOver on jQuery
 * rollOver tag:img,input
 * rollOver class:Over
 * rollOver FileName:*_o.*
 * Last modify:20081210
 * Licensed:MIT License
 * @author AkiraNISHIJIMA(http://nishiaki.probo.jp/)
 */

function rollOver(){
    var preLoad = new Object();
    $('img.Over,input.Over').not("[@src*='_o.']").each(function(){
        var imgSrc = this.src;
        var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
        var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
        var imgOver = imgName + '_o' + fType;
        preLoad[this.src] = new Image();
        preLoad[this.src].src = imgOver;
        $(this).hover(
            function (){
                this.src = imgOver;
            },
            function (){
                this.src = imgSrc;
            }
        );
    });
}
$(document).ready(rollOver);

使い方

  • 上記のスクリプトファイルを読み込ませる
    例)
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="path/hoge.js"></script>
    
  • ロールオーバー画像名は、ロールオーバー前の画像に”_o”を付けたモノを用意する
    例)
    【fuga.png】→【fuga_o.png】
    
  • ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける
    例)
    <img src="fuga.png" alt="" />
    ↓
    <img src="fuga_o.png" class="Over" alt="" />
    

_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ!とかこここうやったらもっとスマートやぞ!とかあったらよろしく。
2010年1月10日追記:匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。

そろそろみんなでGoogle AJAX Libraries API使いませんか?

そろそろみんなでGoogle AJAX Libraries API使いませんか?

AJAX Libraries API – Google Codeの存在は知ってたんだけど、
仕事で使った事は今まではなかったんだけど、そろそろ場面に応じて使ってもいいんじゃないかなって思った。
というのは、やっぱり最近のサイト制作する上でリソースが気になってます。
みんなで、Google AJAX Libraries API使えば、どこかのサイトで読み込んでキャッシュが効いて、リソースうま〜。
とかになるんじゃないかと。それもGoogle AJAX Libraries APIのメリットのひとつですよね。
特にWebサービスとかであれば、サーバーの負荷とかもかなり違ってくるのでは?とかも思いますし。
Ajax Librariesは、今のとこ下記みたいな内容

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

YUIも使えるようになったのがなんか新鮮な感じ。

ダウンロードされるファイルも労せず最小化されたものになるみたいですし

  • Google CDNを活用したファイルの配布
  • 対応していればGzip圧縮転送を有効にする
  • ダウンロードするファイルは可能なかぎり最小化されたものとなる
  • キャッシュが有効になるように工夫されており、一度どこかでダウンロードしてあればキャッシュが使えるため不要なダウンロードしなくなる
  • バージョン番号にワイルドカードが指定できるため自動的にマイナーアップデートを実施できる

Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナルより引用

実際の使い方

  • google.load()で読み込む

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2.6");</script>
    
  • バージョンは、省略すると最新バージョンが読み込まれる
    1.2→1.2.xの最新バージョン
    1→1.x.xの最新バージョン

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2");</script>
    
  • バージョン指定して直接読み込みも可能

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    

れぶろぐ – [Google] AJAX Libraries API はバージョンをフル指定した方が高速に動作する
という記事もあるし、プラグインとかによっては、バージョンで動かなくなるモノも存在するだろうから、バージョン指定した方が良さそうですね。

『オープンソースカンファレンス2008 Fukuoka』になんか行くらしい

詳しくは、↓ここ
OSC2008 FukuokaのOSCオープンソースカンファレンスの略 – 我流天性 – がらくた屋

どうして行くのかと言うと、
オープンソースカンファレンス2008 Fukuokaタイムテーブルの10号館1011教室の 【特別企画】勉強会勉強会(2コマ連続) というのに、FWW_サイト運営・管理研究会(仮)の代表というか餌食というか・・・として行くらしい。

オープンソースって考えてみたら日頃からお世話になってるよね
Webの人だったら、めちゃくちゃお世話になってるはず。
ライセンスの種類もいろいろでさ〜

参考:オープンソース – Wikipedia

いつも気になるのは、そのビジネスモデルなんです。
わかりやすいのもあれば、オープンソース化した目的は何?というのもあるんです。私の中では。
視野が狭くて見えないだけなんだろうな。きっと

参考(2004年5月の記事なのでちょっと古いかも):ライバルに差をつけるオープンソースビジネス7つの戦略 – SourceForge.JP Magazine

【メガネ壊れた】やっぱZoffはいいな

メガネが壊れた。レンズが割れちゃった。
といってもケンカとかした訳ではなく、昨日メガネかけたまま寝ちゃって、下敷きになって割れちゃったのである。
まず起きて、やすし師匠の「メガネ、メガネ」状態w
かなり探した。でやっと布団の中から発見!そしてショッック!
で家からも近いのでキャナルのZoffに行くのだが、(前回もZoffで購入)
「レンズ傷んでたし、安いしまあいいか。」と思って出発。
お店について詳しくは、Zoffのサイトを参照してね。

  • まず、安い。フレーム+レンズで5,250円、7,350円、9,450円とか
  • フレームもおしゃれっぽいのが沢山あってそこから選べる
  • オプションのレンズにしなくても結構薄い。
    昔かけてたメガネは、レンズオプションにして、全部で5万位してたんじゃないかな?
    もうオプションレンズいらね〜。(※オレの度数の場合)
    しかし、今はどこもこんななんだろうか?
  • 出来上がりまではやい。30分位じゃないかな?
    ちょろっと店見て、ウェンディーズ行って、食ってタバコすってたらすぐ。
  • 度数図ってた時の会話でわかったのだが、片方のレンズ交換なら1,575円。
    割れちゃったフレームは度数弱めにして、作業用にしてみた。
    これで長時間作業でも眼が疲れにくいぞ!カモン!作業!

店員さんの接客も的確だと思えるし、痛い出費だけども満足まんぞうなのでした。

供養とIT系勉強会と私

土曜日に父の四十九日法要も無事に滞りなく済ませることができました。
その時の住職の講話の中で、
「供養というのは、亡くなった方を通じて、自分自身を見直す機会なんですよ。」
といった内容のことを話されてた。
日頃、宗教心などがない私にもわかりやすく、「なるほど〜」と納得することができた。
今参加させてもらっている、IT系の勉強会は、
私にとっては、自分自身を見直す良い機会にもなっている。
この話に『オチ』はないのですが、
どちらもそれなりに大事にしていこうと思ったのでした。

そういえば、このブログ携帯での閲覧を考慮してなかった(汗)

先日、とある会で人の名前が思い出せずに、このブログを携帯から閲覧しようとしたら、
1ページあたりの容量オーバーでページ下部にある各種リンクまで表示できなかった。
結局、自分のブログでの確認をあきらめちゃった。
「これ、自分用のためのメモ的な使い方が主なので、なんとかしないとな。」と思った。
そのうちGoogleさんがなんとかしてくれるとは思うけども。
というのをさっき思い出したので、『blogger 携帯 閲覧』で検索した。
あったあったコレコレというのが
クリボウの Blogger Tips: Blogger を携帯で見るためのツール

Google Mobile Proxyで見てみる

http://www.google.com/gwt/nにアクセスして、URLを入れてみる。
画面:Google Mobile Proxy

Google Mobile Proxyを通して見たこのブログの画像
(パソコンのブラウザで確認した画面)
Google Mobile Proxyを通して見たこのブログの画像

なんかごちゃごちゃしてるな〜

Blogger Mobile Viewerを使ってみる

Blogger Mobile Viewerのページに書いてあるようにして、パソコンのブラウザで確認してみた。

Blogger Mobile Viewerで見たこのブログの画像
(パソコンのブラウザで確認した画面)
Blogger Mobile Viewerで見たこのブログの画像

こっちの方がスッキリしてるな。
QRコードもすぐできるやないか。
気が利いてる!
全角カナ→半角カナとかにもしてくれてるので、MovableTypeのプラグインのMT4iみたいなだな。と感じた。
とりあえず、これでいっとこうかな。

プロジェクト管理ツールBacklog(バックログ)がバージョンアップ

弊社(株式会社プロボ)もインターフェースで関わらせてもらっている、
プロジェクト管理ツールBacklog(バックログ)がバージョンアップしました!
詳しくは、下記のリンク先をご覧下さい。

Backlogのここが好き

弊社(株式会社プロボ)も使わせてもらっているバックログ。※ちゃんとお金払ってますよ
こういうとこが好きだなというのを徒然に

  • 導入が簡単でうれしい

    プロジェクトを新規に作るのも、メンバーを追加するのも、管理画面からすぐ。
    これは実はスゴい。Tracとかめんどくさいもん。

  • ファイルがアップロードできてうれしい

    容量の制限はプランによってありますが、ファイルを共有化できるのはありがたい。

  • 課題に状態があるので状況を理解しやすくてうれしい

    単なるTODOリストと違って、『未対応』、『処理中』、『処理済み』、『完了』と状態をもたせられるので状況把握が簡単。

  • 検索しやすくてうれしい

    状態や、日付などでも課題をソート(並べ替え)できるし、探しやすい。
    プロジェクトをまたがっての検索もできるようになった。
    探す時間かかると、なにより悔しい。

  • 情報の一元化ができるのがうれしい

    メモ書きのテキストやマインドマップから、Wikiやらメールやらとにかく色んなとこ見らんといかん。
    バックログにまとめたり、ファイルアップロードしとけば、そこに行けば必要な情報得られるのがうれしい。

  • メールが飛んでくるのがうれしい

    ログインしないと状況もわからない(常にログインしないといけない)となかなか状況もつかめません。
    バックログは、メールで知らせてくれるので安心ですし、ITリテラシーの高くない方でも一緒に輪に入れやすいです。
    実際、クライアントのお客さまもプロジェクトに参加してもらって、情報の共有化を図ったりしてます。

  • WikiがPDF出力可能になった(新機能)

    バージョンアップの中では地味な存在かもしれませんが、何気に便利そうです。

  • ガチガチな感じじゃなくてうれしい

    デザインが柔らかい感じでうれしい。

ガントチャートはこう使おうかな〜

今までは、計画はGanttProjectとかでスケジュール作って、実行だけバックログで管理してた訳ですが、
ガントチャートが付いてしまった。ということは・・・

  1. 計画の時点では大きく課題を分けて期日を入力する
  2. 計画決定後は、課題を細かく分ける

とかが弊社だといいかも。次のプロジェクトから試してみようっと。
ガントチャートがあったら、プロジェクトが成功しそうな気がするぅ〜・・・あると思います。

今回のバージョンアップで楽しかったこと

インターフェースのデザインは、今回も高田さん
ヌーラボの中の人と一緒に(隣で)HTML/CSSとか弄って、その場でアプリケーションが動くようになると新鮮。
しかもガントチャート部分は激しくJavaScript(笑)
その場で質問とかして、答えてもらいながら作業させてもらいました。
Javaのテンプレートファイルを弄らせてもらったんですが、条件分岐が書いてある位で、基本は普通のHTML。
意外となんとかなるもんですね。
バックログの紹介サイトの方も、バージョンアップのリリースと同時に、早朝作業させてもらったんですが、
ここでもバックログを活用して、ヌーラボの中の人と一緒にリアルタイムで修正しちゃいました。
「カンカンカン!」ってな感じで。これも意外と楽しかった。

最後に

プロボではお仕事募集しております。
バックログの紹介サイトのようなサイトを作りたい方、
Webアプリケーションのインターフェースでお悩みの方、お気軽にお問い合わせください。

Drawter.com – DrawAble Markup Languageに萎えた【期待age】

リーダーチェックしてたら、
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM
というのを発見。
百式さんのスクリーンショットもいい感じだし
「こりゃあ、要チェックですぜ!先輩!」ってな訳で見てみた。
なんか使いどころあるかも知れないじゃない!
確かに、作者さんのJavaScript力はスゴいかもしれない。
JQuery作品としてはかなり優秀な作品なんじゃないかな?

それっぽいのを作ろうとしている所-1枚目

それっぽいのを作ろうとしている所-2枚目

配置方法は一応選べる

Auto floatで生成してみたコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
        <head>
    <title>こんにちは、世界</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #node1
        {
        background-color: #333;
        color: #fff;
        }
        #node2
        {
        float: left;
        width: 114px;
        background-color: #999;
        }
        #node3
        {
        float: left;
        width: 536px;
        background-color: #EEE;
        border: 1px solid #ccc;
        }
        #node4
        {
        background-color: #333;
        color: #fff;
        }
     </style>
        </head>
        <body>
        <div id="node1">ここはヘッダ</div><!-- #node1 end -->
        <div id="node3">ここはメイン</div><!-- #node3 end -->
        <div id="node2">ここはサブ</div><!-- #node2 end -->
        <div id="node4">ここはフッタ</div><!-- #node4 end -->
        </body>
        </html>
    
  • charsetの前にtitleタグ来た時点で萎える
  • Auto sizesで生成したらposition: absolute;連発
  • JQuery作品として見るにはいい
  • Dreamweaver持っている人は見るのは時間の無駄になる可能性あり
  • まだ使えね〜
  • でもそのうちこんな風になるんだろうな