jquery使ってgetパラメータ取得したり、チェックボックスを一括で制御したり
鼻毛のお手入れをしたら、白髪がたくさんありました。あぁ。
こんなところも老いていくのかと思うとせつなくなりますね。
日々は鬼のように早く過ぎ去っていくし。
もうすぐ40の大台がせまってくる。たぶんなんの感慨も無く突入するのでしょう。
せめて徹夜作業ではないことを祈るのみです。
あっ次の勉強会のアジェンダどうしようかな・・
思わずMIXIの日記やTWITTERのつぶやきのようなけだるい文章を書いてしまいましたが、私はいたって元気です。
その証拠にブログを書いているのだから。これは元気な証拠です。
一般的に、秋は人恋しい季節といいますが、私は年がら年中人恋しい中２病です。
よかったらお友達になってね！
というわけで、mixiのアカウントをはろうとしたら、mixi落ちてやんの。なんなの？このタイミングで？ネタなの？
しょうがないからtwitterだけでもさらしましょう。
http://twitter.com/dongame
で本題、ちょっと頼まれて作ったので、せっかくなのでまとめてみました。
■jquery使ってgetパラメータを取得してフォームの値に反映
詳細ページがあったとして、該当ページからお問い合わせフォームにきた際には、確定している項目を既に入力した状態にしたいとかありますよね。
ってか絶対ある、はず。
作業はふたつにわかれると思います。
1.url上に存在するgetパラメーターを取得
2.取得したものをフォームに挿入
全部まとめたソース
まずは1から。
といっても元ネタどおりですので、あんま考えません。動けばよし。元ネタはこれ↓
JQuery HowTo: Get URL parameters & values with jQuery
で、値を取得
var SAMPLE = vars.place;
これでSAMPLEに値が入ります。
ちなみにurlはこんなです。
form.html?place=hoge
だから、SAMPLEにはhogeという値が入ったという事になります。
あとはこの値をフォームに送ってあげればOK。この部分です。
$("#form1 input[name=HOGE]").val(SAMPLE);
で、受け取るフォームはこれ
これで、getパラメータは取り込めました。
ちょっと心配だったんで、getで送信したらきちんと値は渡せているみたいなので大丈夫かと。
■一括でチェックボックスの値をON/OFFしたい
まとめてチェックとかありますよね？ありません？
まーぶっちゃけ、実装したフォームって作った事無いですけど・・・きっとあるんでしょう。
与件としてお題にあがった方がいるんだから・・
たぶん、隣接セレクタとかできちんと設定すればもっとコードは短くなるんでしょうが、ハードコーディングですませました。ごめんなさい○○さん。
ただひたすらに、name要素をキーにチェック／アンチェックを制御しているのみです。
以上です。
swfobject.js使ってyoutubeとustreamの動画を埋め込んでみる
いつもは、youtubeやustreamいって埋め込みコードひろってくるだけの安易な運用をしてるんですが、（変に手間かけてもしょうがないし）、ちょっと複雑な与件がでてきたのでYouTube JavaScript Player API リファレンスと格闘しながらなんとか埋め込んでみました。
ustreamの場合も含めてまとめてみます。
■やりたいこと
・表示サイズが小さいので、youtubeのコントロールバーを非表示にしたい
・ページのアクセントとしての使用なのでミュートした状態にしたい
・上記同様の理由で自動で再生させたい
さっそくやっていきます。
いろいろすったもんだのあげく、今回の与件は埋め込みプレイヤーのパラメータ設定では
できそうにないので、jsのAPIとswfobjectで実装します。
まずお約束ですが、swfobjectをダウンロードしてきます。
サンプルをみるとバージョン2.1を使ってるみたいなんだけど、
お客さんのサーバにすでにあったバージョン2.0でも動きました。たぶん最新の2.2でも問題なく動くと思います。
ヘッドタグの中身はこんなかんじです。
ボディタグの方はこんな
簡単にコードを解説（といえるほど理解してないけど・・）
ボディの方にある
swfobject.embedSWF(“http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1&autoplay=1
って部分で、apiplayerを呼び出してあげます。
詳細はAPIのリファレンスにある以下のとおり
JavaScript API を有効にするには、制御するプレーヤーの URL で、URL パラメータ enablejsapi=1 を渡す必要があります。たとえば、SWF を埋め込むには、次のように URL を記述します。
また、playerapiid パラメータを渡すこともできます。このパラメータは、onYouTubePlayerReady コールバックを呼び出すときにプレーヤーを指定します。playerapiid として渡された値は、最初の引数として onYouTubePlayerReady に渡されます。
version=3 パラメータを追加すると、AS3 クロムレス プレーヤーをリクエストできます。
クロムレスプレーヤーってなに？なんですが、”JavaScript を使用してカスタムのコントロールを作成する場合は、クロムレス プレーヤーをページに読み込むこともできます”ということなんで
カスタムプレイヤーということなんでしょう（よくわからん）
結果的にこの設定をしたらコントロールバーが表示されなくなったので与件完了。基本動けばよい。
であとは、埋め込むビデオをvideo_idパラメータにセットしてます。
自動再生させる必要があったので、autoplay=1を追加しました。
続いてヘッドタグ、
リファレンスにあるように、コールバック関数 onYouTubePlayerReadyを設定して、 playerapiidを引数として渡します。
同じくリファレンスにこうあるので
プレーヤー API メソッドを呼び出すには、まず制御するプレーヤー オブジェクトへの参照を取得する必要があります。この参照は、object タグ、または SWFObject を使用してプレーヤー SWF を埋め込んでいる場合はプレーヤー SWF を組み込んでいる embed タグで getElementById() を呼び出すと取得できます。
swfobjectであらかじめ渡しておいたidに対して設定をしていきます。
といっても今回はミュートさせるだけなので setVolume(0);を設定しただけです。
ustでも、コントロールバーを表示とかしたかったしミュートもさせたかったんですが、どうやらできそうにないので（できるのだろうか？）
flashvarsにちょっと設定を加えて自動再生しない形にしました。
こんなかんじ
いじょうおしまい
paypalの決済を導入したときにやったことまとめ
CSS Nite の申し込みにクレジットカード決済を導入したかったのですが、カード会社への申請やら毎月の最低使用料金やら、コストも手間も非常にかかるのであきらめかけたのですが、paypalだと月額使用料金もかからず申し込みごとのトランザクション費用しかかからないということで、さっそく導入してみました。
あんまり参考になる記事がなかったので、まとめとして残してみます。
手数料
月額のシステム利用料金とか最低利用料金とか一切なし。なんでこんなんできるの？ってかんじです。日本のシステム儲け過ぎじゃね？
ビジネスアカウントにすると、相手がpaypalアカウント持ってなくてもカード決済が可能です。
早速手順をかいていきます。
決済サービスに入る
まず決済サービスボタンをクリックします。
続いてウェブペイメントスタンダードを選択
販売する商品の種別を選択します。
詳細を設定する
ステップ1では基本設定を行います。以下が設定可能です。
・ボタンの文言
選択した項目がボタンの名称に反映されます。
・商品名
販売する商品名を入力します。
・価格
・オプションのドロップダウン項目を追加
今回はチケットの販売がしたかったので、1名様/2名様などのサブ項目を設定しました。
ステップ2では在庫の設定ができました。
在庫数を入力しておけば、売り切れの表示をすることが可能です。
今回はチケットの決済をしたかったのでこの機能は非常にありがたいです。
ステップ3では配送先の住所や完了画面の設定が可能です。
これで設定は完了です。
一番下のボタンを作成ボタンをクリックすれば、サイトにはるためのhtmlコードが表示されます。
このコードをサイトにはるだけで決済の入り口が表示できます。
ただ、日本語のサイト（ほとんどそうだけど）に導入する際には、文字コードを併せないとうまく表示されません。
以下文字コードの設定箇所です。
マイアカウント>個人設定を開きます。
言語のエンコードをクリックして表示される画面で詳細オプションボタンをクリックするとエンコード方式を選択できます。
この項目をサイト側の文字コードと合わせれば設定完了です。
WORDPRESS MUインストールはまったメモ
オープンソースカンファレンスで熱があがってるうちにやってみよう！
ということでWORDPRESSをインストールしてみました。
といってもこのブログもWORDPRESSなわけで、1インストールで複数ドメインのブログが作れるWORDPRESS MUをです。
結論からいいますとできました。
適切な設定ができているのか微妙に疑問ですが、まー動いてるからよいのでしょう・・
ブログ1 http://digital-assist.net/wordpress-mu284/
ブログ2 http://testblog.digital-assist.net/
ブログ3 http://testblog2.digital-assist.net/
でもすごくはまりました・・・
やりたいこと
・WORDPRESS MUをインストールして複数のブログを１つの管理画面で制御したい・管理画面は当然日本語化
・各ブログはサブドメインでアクセスする
WORDPRESS MUをインストール
まずこちらからダウンロードhttp://mu.wordpress.org/download/
解凍したら何も気にせずアップロードします。
wp-config-sample.phpやhtaccess.distなんていうファイルもありますが、気にせずドーン。
逆にこのファイルがないと動きませんでした。たぶんwp-config.phpや.htaccessの元ファイルなんですかね。
今回はdigital-assist.netのルート直下にwordpress-mu284というディレクトリ名でアップしました。
以下やることリスト
1.データベースを用意
2.インストールディレクトリとwp-contentディレクトリのパーミッションを777に変更
3.インストールしたディレクトリ（wordpress-mu284/index.php）にアクセスしてインストーラ画面を表示
4.ブログurlの設定をする
自分の場合サブドメインで各ブログを管理したいのでサブドメインを選択
5.データベース名／ユーザー名／パスワード／ドメイン（digital-assist.net）／サイト名／メールアドレス
を入力してぽちっとな。
6.インストール完了の画面が表示されユーザー名（admin）と仮パスワードが表示されるのでコピペしてログイン
7.管理画面表示
ここまですんなり。簡単簡単。
WORDPRESS MUを日本語化
1.日本語パッチを下記からダウンロード。http://code.google.com/p/wpmu-ja/
2.解凍したらwp-contentにlanguagesディレクトリを作ってja.moをアップロード
3.Settings→Generalで表示した画面の一番したBlog languageをjapaneseに変更
4.サイト管理→設定で表示s他画面の初期設定言語をjapaneseに変更
5.インストールディレクトリ直下のwp-config.phpをダウンロードしてdefine (‘WPLANG’, ‘ja’);と変更
ここもすんなり。簡単簡単。
DNS設定
今回はサブドメインでブログを立てたいのでDNSの設定が必要です。testblogもtestblog2もルートディレクトリをWORDPRESS MUのインストールディレクトリ（wordpress-mu284）に設定
ブログを新規作成
サイト管理→ブログからブログのアドレス（testblog）／ブログのタイトル／メールアドレスを入力してテストブログを新規作成します。
作成したブログのドメイン名をクリックすると設定画面が表示されます。
設定後はこんな↓
パスのところはデフォルトだとwordpress-mu284/ってなってますが、サブドメイン直下を公開URLとしたいのでtestblogとtestblog2の場合は空欄にします。
wp-config.phpを編集
ここまでで、
ブログ1 http://digital-assist.net/wordpress-mu284/
ブログ2 http://testblog.digital-assist.net/
ブログ3 http://testblog2.digital-assist.net/
以上3ブログの表示は完了です。
http://digital-assist.net/wordpress-mu284/
上記ブログの管理画面へのアクセスも可能になりました。
ただここで大問題！ここから今日の1日を費やした壮絶な格闘が始まりました。
http://testblog.digital-assist.net/
http://testblog2.digital-assist.net/
上記２つのブログの管理画面がどうしても表示されない！
ログイン画面は表示されますが、正しいユーザー／パスワードを入力しても同じ画面にリダイレクトされてしまう・・
なぜ？なぜなの？
下記ページの内容でようやく解決しました。
WordPress MU ブログディレクトリの変更
上記ページを参考にwp-config.phpの表記を変更して解決しました。
■変更前
define(‘DOMAIN_CURRENT_SITE’, ‘digital-assist.net’ );
define(‘PATH_CURRENT_SITE’, ‘/wordpress-mu284/’ );
■変更後
define(‘DOMAIN_CURRENT_SITE’, ‘digital-assist.net’ );
define(‘PATH_CURRENT_SITE’, ‘/’ );
ようやくこれで各ブログの管理画面にもアクセスが可能になりました。
最後に777で設定したパーミッションを戻してとりあえずインストール完了です。
オープンソースカンファレンス2009 Nagoyaにいってきた
こんな自分がいって講釈たれていいものかと思いつつ、新幹線の始発にのっていってきました。
参加したお題はこれ↓
地域系勉強会パネルディスカッション【2コマ連続】
どんな形で勉強会やってるの？っていうプレゼンが第一部。
質疑応答が第二部です。
プレゼンは持ち時間5分と言われているにもかかわらず、かたっくるしくて、しゃべりすぎなプレゼンをしてしまいました。
途中で腕時計みたらもう7分経過してた・・ありえない。
ちょうどタイムリーにこんなエントリがありました。
もっとはやくこういうの読んでいればよかったなぁぁ
WISH2009のプレゼンをどう作ったか？
第二部はなんとか緊張もとれて、日本一ゆるい勉強会というコンセプトを伝えられたのではないかと思います。
同じような志をもった方々に触れて、月並みですがなんていうかこう、意欲がわいたっての？
元気でました。感謝。
やっぱぎこちないか・・
携帯flashサイト
あまりの制限の多さと自分の無知に、もう２度とやらないぞ（このへんは潔い）と誓った携帯サイト用のflashコンテンツについてつまったところをまとめておきます。
まだローンチしてないけどね・・
ナレッジにもならないような基本的なことばかりですが、覚え書き。
flashコンテンツつくる仕事をしてて、なんとなく携帯flashつくる仕事をうけて、なんとなくな自分が心底嫌いになったという人が少しでも減りますように・・
だもんで基礎の基礎です、そんなことも知らなかったのか！！とか言わないように。
だってほんとに知らなかったんだもの。
外部データを取得するにはクリックが必要
与件のひとつにベースのswfはひとつだけど、更新が可能なように外部データを参照する仕組みにせよというのがありました。りょーかい。
できると思ってた勝手に。
できないんだね。。。仕様なんだね。
まー携帯ということですから、PCブラウザみたいに勝手にデータをあれこれロードされては困るというのは確かにわかる。
できないとわかったとき自分の書いた見積もりのあまりの安さに涙がでてきました。
結局swfmillだったかな？
ベースとなるswfを元にサーバサイドでswfを生成する仕組みが入ることになりました。
再生モードによる違いを最低限しっときましょう
すげー簡単に考えると以下のようなかんじかと（間違ってたら誰かおしえて）■インライン再生モード
flashバナー
winのネットブックにはいってるセキュリティーソフトはカスペルスキーです。
前はウィルスバスターを使ってましたが、検知能力が貧弱すぎるようなんで今はずっとカスペルスキーなわけです。
ただ、こいつがどうにも調子が悪い。
症状1
頻繁に定義データベースが壊れる・・
症状2
windowsがセキュリティソフトが動いてないよってアナウンスしてるのに、カスペルスキーが安全ですとか平気で抜かしていることがよくある。
ネットブックだからなの？
定義データベースの件は頻発するのでほんとにカンベンして欲しい。
定義データベースをしょうがなく更新し直しているうちに、また壊れたと言われる。もううんこ。
だもんで重要なデータとかメールの送信とかは極力winマシンではしません。
よくセキュリティソフトによる速度低下で生産性が落ちるのがストレスとか言いますが、
定義データベースが壊れたなんてしょっちゅう言われたら、生産性とかより前に起動できませんよ・・・
誰か対処方法しらないかしら。
一覧画面をページ分割するPageButeプラグイン
たまにはまじめなポスト。
movabletypeをcms的に使う際、一覧画面にエントリーが多くなることがあります。
でも動的なサイトにはしたくない。そんなときPageButeプラグインが便利です。
（動的ページにすると、mtifとかがなんかうまく動かなかったりするので、静的にしたい。俺だけか・・）
ページ数があまりに多くなりすぎると問題ですが、500とか1000とかいかなければ問題ないと思います。
で、覚え書き。
まずコンテンツ部分はこんな。
<MTEntries lastn=”100″>
<MTIf name=”__odd__”>
<div class=”voicelist_left clearfix”>
<$MTInclude module=”ブログ概要”$>
<div class=”bottom”><img src=”/img/second/back_voicelist_bottom.jpg” /></div>
</div>
</MTIf>
<MTIf name=”__even__”>
<div class=”voicelist_right clearfix”>
<$MTInclude module=”ブログ概要”$>
<div class=”bottom”><img src=”/img/second/back_voicelist_bottom.jpg” /></div>
</div>
<br style=”clear:both;” />
</MTIf>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
<MTEntries lastn=”100″>はデフォルトだと一覧は10件しか表示しないので、なんも指定しないとページがあってもカウントされないので。
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
もうこれはお約束でワンセット。こまいかいことはわからんでもいい。そんなかんじ。
今回は、左右で異なるスタイルシートをあてたかったのでif分で分岐してます。
<MTIf name=”__odd__”>は奇数のエントリー
<MTIf name=”__even__”>は偶数のエントリーで処理されます。
次にナビゲーション部分はこんなかんじ。
<MTIf name=”pagecount” gt=”10″>
<div class=”sub_navi”>
<MTIfPageBefore>
<p class=”btn_back”><$MTPageBefore delim=”<img src=”/img/share/btn_back.png” class=”png” />”$></p>
</MTIfPageBefore>
<MTIfPageNext>
<p class=”btn_next”><$MTPageNext delim=”<img src=”/img/share/btn_next.png” class=”png” />”$></p>
</MTIfPageNext>
</div>
</MTIf>
<MTSetVarBlock name=”pagecount”><$MTBlogEntryCount$></MTSetVarBlock>
<MTIf name=”pagecount” gt=”10″>
上記はブログのエントリー数をカウントして、11件に満たない場合は、ナビゲーションは表示しないようにしました。
配布元サイトだとmtifと組み合わせても動かないと書いてあったけど問題なく動作してるみたいです。
以上おしまい。
ヒウィッヒヒーじゃなくてね。
最初何がおもしろいのかさっぱりわからず、1年あまりなんもつぶやかなかった私でございますが、2月からつぶやきはじめました。
もうこのブログで肩肘はるのはやめたのでURLさらします。
http://twitter.com/dongame
なんか世間を騒がせまくってますが、なにがブレイクの要因だったのかさっぱりわかりません。
このへんの要因をつぶさにリサーチすると、ブログ的にもそれっぽくなるんでしょうが、なんせ洞察力がないので改めてにしてしまいます。たぶん改めて考えるとかないけど。
ひたすら、自分のおなかの具合とか、臭いとか、汚れ具合とかつぶやいていたので、真理がつかめないというのが本音です。
で、やっぱりこの流れはなんとか形にしなくてはと思うので、Uさんの書いた絵図を自分なりにも考えてみようと思います。
こっちでも書いておきます。
おかげさまで第11回を無事に開催することができました。
今回も18名様のご参加をいただきました。なんかこれってそこそこの規模感ですよね。
最近は自分で何かってよりも、こんなのどう？的な形でサポートしてくださる方が増え感謝です。
継続は力なりっていいますが、ほんとそうですね。
このパワーをそろそろ外向きに発信しないといけないなーと思います。
