スプレッドシートでサイトを更新してみるよ

2011.12.08(木)

すっかり冬ですね。

僕の住んでいる奈良県の生駒市は、山の中なので大阪に比べると気温が低く、毎朝、「寒い」というよりは、ただただ「痛い」です。

先週末、MEチームのAさんが、おいしい店をMAPにプロットするサイトのフロント部分だけを実装したプライベートα版みたいなものを公開していたのをボンヤリと眺めていました。

続きを読む »

どんとこいjavascript

2011.08.03(水)

夏ですね。
歌って踊れる色黒プログラマーになりたいbeshinです。

ここ半年くらい、完全にコード書かずにレイアウトとかデザインとか打ち合わせばかりしてきたので、そろそろ何か動くもん作りたくなってきました。

そんな空白の半年が過ぎてみると、以前にもまして、時代はスマフォですね。

スマフォ。スマフォ。フォフォフォ。なんつって。

渾身のギャグもキレが悪いです。

アイフォン然り、アンドロイド然り。一部の機種で見れないということで、すっかりFlashは下火です。

案件とかでも、クライアントからアイフォンでも見れるようにしてください。ということをよく言われます。

これって、もはやFlash使わないでください。と同じ意味ですよね。

ちょっと前なら、動きのあるものはFlash(AS)でという感じだったのが、すっかりJSでやることがスタンダードになってきました。

コーポレートサイトのメインビジュアルのスライドショーなんかも、最近はすっかりJSですよね。

というわけで、すっかり人任せにしているJSを始めてみることにしました。

この業界にいながら、びっくりなんですが、生まれて初めてのjQueryです。

とりあえず、簡単なことから始めようと思い、前々から気になっていた弊社Webサイトの「ニューストピックス」を修正する意味で、アコーディオンメニューを作ってみようと思います。

正直アコーディオンメニューのプログラムなんて、探せばいくらでもあるのでしょうか、ここは勉強のためにゼロから自分好みに車輪の再開発?です。

今の動きで気になるのは3点です。

  • タイトルをクリックすると、本文が開いて、再びタイトルをクリックすると、本文が閉じますが、個人的には他のタイトルをクリックした際は、前に見ていた本文は閉じて欲しいです。
  • ソース見たら各タイトルのクリックエリアがaじゃない。たぶん、#入れると、強制的に画面の先頭に動くからかなあ。
  • 最新の記事(任意の記事)はデフォルトで開いておいてほしい。

あとは、HTMLの構造はできるだけそのままで、可能な限り汎用性をもたせる。

というあたりを意識して作ってみました。

クリックするタイトルの部分と、それで出したり消したりする本文エリアを、並列にして、あとはそのコンテナを指定して

$(‘コンテナ’).simple_accordion({});

って書けば動きます。初期オブジェクトで、タイトルを識別するクラス名と、アクティブ時に挿し込むクラス名、開閉のスピードを設定できるようにしてみました。

詳しくはソース見てね。

プラグインの形にするのは、以下を参考にしました。

$って使わんほうがいいのか?

使い回しができるように作れたような気はしているのですが、開閉されるエリアをnext()で参照しているのは構造的にフレキシブルじゃない気もします。
まあシンプルっつうことで許してください。

あとメソッドチェーン?やりたいことはわかるけど、実例が想像できてない・・・とりあえずreturn thisしといたけど、ここからどう繋ごう?

まだ、いまいちAPIを把握できていないので、誰か良い感じにしてくれるとうれしいです。

次はスライドショーに挑戦してみる。

追伸:
WPって改行を勝手にPタグにするせいで、記事中にjavascriptとか、書けないみたいです・・・とりあえず以下のプラグインを入れてみました。
http://www.ooso.net/inline-js
プラグインフォルダ内にinline-jsってフォルダ作って、js入れると動きましたよ。
結局Tさんの勧めでjsdoitからjsfiddleに乗り換えてみたので、使ってないけど。

じゃ、日サロ行ってきますっ!

消えちゃうよ!?

2010.08.17(火)

毎日暑いですねーそろそろ暑さにも飽きてきたpearmasterです

さて、以前何気なく見ていたページですが
テキストをコピペしようと選択すると・・・
消えてしまうやろー!
ほんとビックリです

と、とにかく見てください!
コチラ
Ctrl+Aしてみてください、消えちゃいますよー(IE以外で見てね)

さて、そのソースを簡単にしたのがコチラ
どうやらJavaScriptで選択したら消しているようです
(詳細はソース見てね)

どうしてもコピーされたくない文章を公開する時なんか使えそうですね