基本編で適当に作ったショートコードを改変してマーカーを増やす。
ショートコード間に書いたHTMLとかがそのまま出力されるのは同じで、
- マーカーを増やす
- タブ表示
- 最大化表示
- style属性でheightの設定
- showMapBlowup()
以上を追加。
1記事1MAPで複数表示は(使う用事がなかったので)未対応。
気ままに綴る独学メモ帳
締切後のソース公開OKらしいんで晒しておきます。
応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は4日くらい。
例によってMooToolsをしこたま多用してます。
ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…!
transition.cssのカオスさは必見かもしれない。
一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
clearFixでお馴染みなCSSの擬似セレクタ::before
と::after
ではcontentプロパティというものが使えるわけですが、
::before
と::after
がIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
大きく分けると3つです。
各記事ごとにマップを埋め込むのはプラグイン使えばいいんだけど、
地図のポイントと記事を連動させる必要がない場合もあるし、
WordPressのページ機能で作成されたページ(例えば会社概要だとか)にだけ埋め込みたいとか、
地図に表示するマーカーが複数あるとか、タブで表示する情報を自由に制御したい…なんてケースもあるわけで。
プラグイン使うほどでもないならショートコード自作して埋め込めばいいじゃないか! 😀 という記事です
ちょっとPerlが必要になったので、Hellow worldからの過程をメモることにします。
このエントリーの最終目標は、[Ajax + PHP] Web2.0的にHTMLソースを隠す方法 で晒した Request.phpでやってることで、
です。
Perlが使えるとさくらインターネットのライトプランみたいなPerlのCGIしか許可されてない鯖で強い。
安価な鯖だとPHPダメって所は多いです。
現時点での自分の状況を書くと…
設置は経験あるけど作ったことはないっていう状況。
自分の中で消化する為にPHPと比較しながら覚える手を使ってます。
ZeroMail作り始めた時もこんなんでしたわ。
PerlはDreamweaverでサポートされてないので、テキストエディタMeryを使用した。
Exchangeに何かあるかと思ったけどさっぱりだった。
ローカル環境はXAMPPです。パスはxamppデフォルトそのまんまで、文字コードはUTF-8。
#!/xampp/perl/bin/perl print "Content-type: text/html; charset=UTF-8\n\n"; print "Hello world!!\n";
拡張子cgiのファイル作って上のソースコピペしてブラウザで開けばHello worldが出力されるのだが、
content-typeが無いとmalformed header from script. Bad header云々のエラーが出る。
文字コードの扱いに関してはPHPよりも厳しいんだよな、確か。
質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。
新しく書き直したものはこちら▼
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた
AjaxのPOST送信に対応!
MooToolsのForm.ValidatorとかForm.Requestに向けての対応なんだけどjQueryとかでも使えます多分 😀
セッションを使った送信が相変わらずメインなので、Ajax使わないと送信できなくなったというわけではないです。
AjaxでPOST送信されなかった場合は通常のページ遷移による送信を行うため、
フォームタグの属性にactionを入れてあればJavascript無効でもメールフォームの送信ができます。
なのでAjaxでメールフォームを送信する場合と普通にセッションで送る場合とが混在していても、これまで通りコアファイルは1セットあればOK。
Ajaxで送受信を行う場合、デモが置いてある@PAGESのような広告が挿入されるサーバーだと
大抵zeromail.phpからのレスポンスにも広告が挿入されてしまうので、
JavaScript側でそれらを削除する設定が必要になってきます。(scriptだけでも削除しないと最悪フリーズする)
これについては解説ページの方に書きますのでそちらをご覧ください。
ダウンロードは準備中です。来週再開予定。
リポジトリにはうpしてあります。
Ajaxサンプル
通常送信サンプル
(設置場所は@pages鯖です)
丁度2年前に書いたZeroMailになる前のソース(通しバージョンでいうと0.1)が発掘されたので、これも来週あたりにリポジトリで晒す予定。
実はそれが初の自作PHPスクリプトだったり。
MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。
Form.Validator.addAllThese([ ['isJpOnly', { errorMsg:'全て半角英数の文字列は使用できません。', test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');} } ], ['isNoAlp', { errorMsg:'全て全角で記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);} } ], ['isHirakana', { errorMsg:'全てひらがなで記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');} } ], ['isKatakana', { errorMsg:'全てカタカナで記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');} } ], ['isZNum', { errorMsg:'全て全角数字で記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');} } ], ['isZAlp', { errorMsg:'全て全角英数字で記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');} } ], ['isKana', { errorMsg:'カタカナもしくはひらがなで記入してください。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');} } ], ['validate-zipcode', { errorMsg:'郵便番号の書式に誤りがあります。', test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);} } ], ['validate-tel', { errorMsg:'電話番号の書式に誤りがあります。', test:function(el){ var value = el.get('value'); if(value.length == 0) return true; if(el.get('value').test("-")){ if(value.test(/^(090|080|070)/)){ return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/); }else if(value.test(/^(0080|0120)/)){ return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/); }else{ return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/); } }else{ if(value.test(/^(090|080|070)/)){ return value.test(/^(090|080|070)\d{8}$/); }else if(value.test(/^(0080|0120)/)){ return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/); }else{ return value.test(/^\d{10}$/); } } } } ] ]);
電話番号の正規表現修正
暇だったのでファイル添付に対応してみました。 添付可能なファイル数に上限は設けていません。 添付可能なファイル: 拡張子:gif, png, jpg, pdf, swf, txt, xls, doc, ppt ファイルタ … 続きを読む