コンテンツ制作のことの最近のブログ記事

お客さんのところでのデモ用に作った「ラーメンサーチャー」(笑)

問い合わせフォームもちゃんと作るのが面倒だったので、Google Forms を使ってちゃっちゃと作った。
組み込み用の iFrame 用のソースを吐いてくれるんで、それを

<iframe src="https://docs.google.com/forms/d/1Ql5Lqkq-<略>snmL1s4D0/viewform?embedded=true" width="320" height="1500" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>

みたいに自分のページ内に貼り付けるわけだけど、iPhone 以外で見た時に幅、高さを最適化するように、

<iframe src="https://docs.google.com/forms/d/1Ql5Lqkq-<略>snmL1s4D0/viewform?embedded=true" width="100%" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>
<script>
jQuery('iframe').iframeAutoHeight();
</script>

みたいにしてみた。でも、

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://ramen.nandf.jp" from accessing a frame with origin "https://docs.google.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

ってエラーになっちゃうな。

これは http のサイト内から https のサイトを iFrame ではめ込んでいるから出てる SecurityError だけど、プロトコルを http に合わせても、

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://ramen.nandf.jp" from accessing a frame with origin "http://www.exsample.co.jp". Protocols, domains, and ports must match. 

ってなって駄目。どっちみち SecurityError だ。

クロスドメイン(親ページのドメインと、iFrame 内のページのドメインが違う)にはまだ対応してないんだなあ。
jQuery のバージョンは 1.11.0 だから十分新しい。いずれ対応するという話をずいぶん前に聞いたことあったけど、まだまだしてないってことなんだろう。

動的にデザイン変更したい場合は、Google Forms 使わずに自前でフォームを書けってことだな。

仕事で受注できたらそうしよう。
取り敢えず、デモサイトは「iPhone 限定。他のスマホで見るとレイアウト変かもよ。デモなんでごめんちゃい」で行くこととしよう。

・・・と思ってたら、PC や Android じゃ駄目だったけど、iPhone だけは自動でいい感じに高さ調節できてるな(^^;

20140529_google_forms1.jpg

ま、iPhone だけじゃ、意味がないんだけどな(^^;
20140410_map2.jpg

今、自分がいる場所を中心にしたマップを表示するのも、HTML5 の Geolocation API が使えると楽勝やね。

Google Maps API キーっていらんのんよね?」というエントリーに載せてる HTML ソースの script のところを、

<script type="text/javascript">

function initialize() {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
map_set(position.coords.latitude, position.coords.longitude);
}

function errorCallback(error) {
//とりあえず何もしない
}

}

function map_set(latitude, longitude) {
var latlng = new google.maps.LatLng(latitude, longitude);
var opts = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
 
  </script>

っていう具合に直すだけや。

google.maps.LatLng に固定値をセットしてたのを、position.coords.latitude, position.coords.longitude をセットするように修正しただけ。

そう言えば、

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

の sensor は false のままだけど、これってどういう時 true にするんだろう?
Geolocation API みたいなのを Google でも用意してて、true にしたらそれが使えるんかなあ???
一回いらんて話になって、それからまたいることになったような気がしてたんだけど、API キー無しで Google Maps の JavaScript 読み込んでも特に問題ないみたいなんだけど・・・

またいらなくなったんかね?

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>地図テスト</title>
<meta name="description" content="テストです">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.397557, 132.448014);
var opts = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
  </script>
</head>
<body onload="initialize()">
<p>十日市周辺地図</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<footer>
<p>&copy; Copyright by shinoda</p>
</footer>
</body>
</html>

これで表示されるから、API キー必要ないんだろうなあ。
以前、SLやまぐち号の動画を、FLV(Flash Video)で MovableType に貼り付けてみたが、その後、Apple が iOS で Flash をサポートしないという暴挙(完全に Adobe への嫌がらせ)に出たので、iPhone なんかでの閲覧を考えると他のフォーマットの方がいいんだろうねえ。

そこで、今回は YouTube に動画をアップして、MovableType の本文に YouTube が用意した「埋め込みコード」を埋め込んでみることにする。


さて、どうかな。iPhone でも見れるかな。

ただ、やっぱ、外部のサイト任せというのは、俺ら世代の技術者にはどうにも気分がザワザワしてしまう。YouTube って、大丈夫なの?いつまでも変わらずサービスしてくれるの?・・・って(^^;

ちなみに、今、暫定的に、 http://blog.netandfield.com/shar/i/ という iPhone 向けページを作ってみている。
ただ、そのうちにリンク切れすると思うので、この URL をブックマークとかしないでね。(してもいいけど、後で「リンク切れとるで」とか文句言わないでね(^^;)
う~む・・・

何か、俺のプログラムで吐いてる Cookies に問題があるんだろうが、InternetExplorer 以外(Firefox と Chrome)では問題が発生しないのでよくわからんわ。
まったく、InternetExplorer はどこまでプログラマ(&Web デザイナ)泣かせなんや・・・
早く Internet の世界から撤退してくれんかなあ>Microsoft

問題の症状というのが、「2回目以降の Cookies を受け取ってくれない」というもの。
Cookies を吐くページを二度目に開こうとすると、受信中の状態のまま何も表示されないのだ。
色々調べた結果、(Cookies を受信する時、ダイアログを開くようにしてるんだけど、それも開かないので)Cookies を受け取ってない(拒絶ではなく、例えば Cookies の終了がわからなくて、ずっと続きのデータが来るのを待っているような)様子。
上に書いたように、同じページを Firefox と Chrome で開いた時は一切出てこない症状なので、何か、InternetExplorer 的に気に入らないデータなんだろうな、俺の Cookies(^^;

ちなみに、その Cookie は検索ページの検索条件をセットしたもの。

search=prg=hoge.php<>h1=1<>h2=0<>h3=1<>kw=<>new_flg=;

って感じだ。
何の問題があるのやら。
ちゃんと日本語や、';'のような記号が入る時は URL エンコードしてるしなあ。

で、よくわかんないので、本来、Cookies の仕様的にはエンコードの必要が無いはずの「prg=hoge.php<>h1=1<>h2=0<>h3=1<>kw=<>new_flg=」の部分を丸ごとエンコードしたら、今のところ InternetExplorer での変な動作もしなくなった。
む~ん・・・

・・・と思って、今やってみたら、何度かやってるうちに同じ症状出ちゃったなあ・・・

・・・と思って、もう一度やってみたら、まったく同じデータで同じ操作しても症状出ないなあ・・・

いい加減にしろよ、InternetExplorer・・・
お前のせいで、Internet の世界はホントつまんなくなってんだよ!
まあ、お客さん用のサイトでは絶対やらないんだけど、特定の人間だけで使う CGI で、FORM の HIDDEN 項目に直接メールアドレスをセットして、そのアドレスに対してメールを送るってものを作ったのよ。
一般の人はアクセス出来ないサイトなんで、セキュリティがどうこうなんて無駄な論議はやめてね(笑)

おっと、話がずれかけた(^^; 話を戻す。

だらだらっとメールアドレスが並んでて、横のチェックボックスをチェックした宛先にだけメールするって感じで。

<input type="checkbox" name="hoge1@aaa.exsample.com">山本ヨーコ<br>
<input type="checkbox" name="bbbb@exsample.jp">しずかちゃん<br>
<input type="checkbox" name="hogehoge@exsample.co.jp">大村益次郎<br>

・・・みたいな。

これ、InternetExplorer なら正常に動くんだけど、Firefox や Safari だと駄目なんだよな。

で、届いたフォームデータを見てみると、IE 以外はちゃんとフォームデータが URL エンコードされてるんだね。そりゃ当然だよね。いやあ、Internet Explorer で動いたので、すっかり URL デコードするの忘れてたよ。

しかし、よく考えたら、なんで IE はエンコードせずそのまま垂れ流すのかね。
相変わらず、よくわからん強気な態度(笑)

ほんと、まいっちゃうなあ。

去年の秋に製造が終わってるのに、未だにエンドユーザが検収やってる(検収終わらないと金払わないとか言いながら、バグ報告と一緒に要望上げてくる質の悪さ(--;)という最悪の Web システムがあるのだが(^^;、今日になってまた「この間までちゃんと表示されていた画面が崩れて表示されるようになった。そっちで何かやっただろう!?」と言いがかりが。(^^;

調べてみると、<td></td>タグ間で</form>を打ってるところで表示が崩れてる。

う~む。</form>タグを外に出せば簡単に直るけど、「このプログラム及びHTMLテンプレートの最終更新日は 2009/9 である(つまり、うちでは何もやってない)」「Firefox3.6 では正常に表示され、崩れているのは InternetExplorer8 のみである」「スタイルシートは元請けの会社で作ってて、俺の与り知らない部分である」ということで、「そっちでスタイルシートを修正してください」と元請けに返したのだが、結局関連するスタイル指定がどの部分かよくわからないということもあって、今回はHTMLテンプレートを修正した。

やれやれ。(^^;

何か、InternetExplorer の CSS の適用って独特・・・つーか、変!だよなあ。
</form>タグなんてどこに打ってあろうが本来表示には「まったく影響ない」ものでしょうが。つーか、「影響しちゃいかん」でしょうが。
何か、スタイルシートを適用したら、改行ひとつで表示が乱れたりするようになったり・・・

今回、ついこの間まで表示の乱れはなかったらしいので、IE8 の update で追加/修正された処理がヘッポコだったんだろうな。

ま、それより、早く検収終わらせんかい!こんなの(ブラウザの仕様変更による障害)、本来なら有償対応やで!とめらめらと今も怒りの炎を燃やしているところであります。

Flash ムービーを Web 画面に貼り付ける方法の話。

何年か前から、Flash の実行に Internet Explorer が警告を出すようになったので、以下のように外部の JavaScript で HTML をはき出すようにする。

index.html の記述

<script type="text/javascript" src="lib/flash_movie_player.js"></script>

lib/flash_movie_player.js の記述

// Flash Movie Script
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="250" height="200">');
document.write('<param name="movie" value="movie/hoge.swf">');
document.write('<param name="quality" value="high">');
document.write('<embed src="movie/hoge.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="250" height="200"></embed>');
document.write('</object>');

これでばっちし。
Web ページへの動画ファイルの貼付」で作成したムービーファイルが、画面表示後すぐに再生される。

お客さんから、CM動画をWebに貼り付けて、アクセスしたら広告動画みたいに再生したい・・・との話があったので対応した。
日頃、あまり動画は扱わないので(VideoStudio でプライベートなビデオを編集したり、YouTube にアップしたりという程度)、どうやって貼り付けるかというところから調べないといかんのよね。

最初は FLV に変換してそのまま貼り付けてしまおうと思ってたんだが、どうも、ビデオデータとして貼り付けると再生ボタンの表示されたビデオプレーヤーが使われてしまうようじゃね。(もちろん、再生用のプレーヤーを変えればいいようだけど、そこまで細かく調べている時間が・・・)
そういう形ではなく、よくある広告FLASHみたいに「画面表示即再生開始」させたいので、ビデオ埋め込みSWFの形で作成してしまうのが良さげである。(違ってたらご教示ください。>識者の方)

2004年に買って以来、ほとんど使うことがなかった STUDIO 8 の出番がやっとやってきたよ。今まで、お遊びでちょっと触った以外、インストールしただけで全然使ってなかったもんなあ。(^^;
「これ、高かかったでしょ?これ買って、使わずにほっておくなんて、ずいぶん儲けてるんですね」という誤解の元になっていたソフトを、やっと仕事で使うことが出来るよ。(笑)

で、手順のメモ。

1.Flash 8 Video Encoder で、hoge.wmv ファイルを hoge.flv に変換

(1) hoge.wmv をキューにドラッグ。
(2) 「キューの開始」ボタンをクリック。
    ビデオコーデック On2 VP6
    オーディオコーデック MPEG Layer III(MP3)
    でエンコードされた hoge.flv が作成される。
(参考:13MB の WMV ファイルが、だいたい 6MB の FLV ファイルになった)

2.Flash Professional 8 で新規 Flash ドキュメントを作成

(1) hoge.flv をドラッグ。ビデオの読込画面が表示される。
(2) ビデオの選択画面で、そのまま「次へ>」ボタン押下。
(3) 展開画面で、「SWF にビデオを埋め込み、タイムラインで再生」を選択して「次へ>」ボタン押下。
(4)埋め込み画面では、そのまま(シンボルタイプ:埋め込みビデオのままで)「次へ>」ボタン押下。
(5) ビデオの読み込みの終了画面で「終了」ボタン押下。
    これで読み込みは終了。
    この時点で、表示サイズとか変更したければ編集するなり。
(6) 「ファイル」メニュー→「書き出し」→「ムービーの書き出し」で、Flash ムービー(SWF ファイル)を書き出す。
(7) Flash Player 書き出し画面で、そのまま「OK」ボタン押下。
(参考:6MB の FLV ファイルが 5MB の SWF ファイルなった)

しかーし、これだと、1分40秒の動画が、何故か 4分もの長さに・・・。動きもカクカクしてるし・・・。なんで???

よく見ると、フレームレートが 12fps になってる。ええ?フレームレートって、自分で設定しないといかんの?実際、フレームレートを 12fps から 30fps に上げると、ちょうど良い感じに。

フレームレートって自動調整してくれるわけじゃないんだ。
オリジナルデータに情報を持ってそうだけどなあ。

あ、展開時に、「埋め込みによる展開では、オーディオの同期の問題が発生する可能性があります」と警告が出るなあ。なるほど、つまり、そういうもんだということか。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちコンテンツ制作のことカテゴリに属しているものが含まれています。

前のカテゴリはPodCastingです。

次のカテゴリは面白Webです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら