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

一ヶ月くらい前から MotoVloger(モトブロガー)デビューした(笑)

チャンネル自体は以前から持っていた。
お客さんと「どうやって YouTube に動画上げるん?」みたいな話になって、「うむ。私がやってみましょう」とチャンネルを作って、短い動画を何個か上げた。

もう 16年も前のことだ。2008年から YouTuber だぜ、俺!!(笑)

それからも、メモ的に(他人に見せることをそんなに意識しない感じで)短い動画を上げることはあった。
しかし、オートバイを DUCATI MONSTER に変えたら、L型2気筒エンジンのドカドカ音が楽しくて、なんか「ドカで走ってるところを動画で撮りたい」とか思ったんよね。
で、撮ったら公開したいじゃん(笑)。てことで、モトブロガー(オートバイライフを発信する YouTuber)デビューをしたのである。

登録者、現時点で 26人しかいないけど(笑)
まだ、モトブログ動画は 6本くらいしか上げてないし・・・(^^;


まあ、それはそれとして、VideoPad のキャッシュの話。
俺は動画編集に NCH Software の VideoPad っていうのを使ってるんだけど・・・

動画編集に使っている PC は、500GB の SSD がついてるだけ。だいたい、残り容量が半分ほどって感じだったのに、今朝見たら残り 150GB みたいになってる。
調べてみたら、ユーザディレクトリの下の AppData\Local\Temp\VideoPadCache ってディレクトリの容量が 120GBもある。

うーむ・・・VideoPad って自動でキャッシュクリアされないの?

20240309_videopad1.jpg

調べたら、「オプション」→「ディスク」で「不使用のキャッシュファイルを削除」ボタン押下で削除できるとのこと。
手で消してしまおうと思ったが、ソフトの機能で消せるのならそれがいいだろう。

20240309_videopad2.jpg

押したら、「125956.75 MBのキャッシュファイルの削除が完了しました。」のメッセージが。
ファイルエクスプローラで確認したら、Cドライブの残り容量が 270GB まで回復してた。

ソフトを閉じるときに自動でキャッシュクリアとかするのかと思ってたよ。

ちなみに VideoPad、何年か前に動画のモザイク処理をするのに、自動で対象を追いかけてモザイクかけてくれる機能が便利で使ったことがあったので今回もチョイスしたんだけど、2万円くらいするので複数の PC に入れられないし、操作性も例えば「文字をフェードインする」みたいな簡単なことをするのに何段階か手順を踏まなくてはいけなかったり、高機能故なのかいまいちなんよね。

なんか良い動画編集ソフトあるかね?
気がつけば、1時間くらい悩んでた・・・

なにかというと、ajaxzip3 という「郵便番号から住所を引っ張ってきて form の項目にセットしてくれる」ライブラリである。
もう、今やほとんどの Web サイトで使われてるんじゃないやろか?開発元の株式会社人気組さんには感謝しかありません。

詳しい仕様については公式ページをご確認くださいませ。

で、今回、お客さんから「県名しかセットしない」という要件があって、ほんじゃ、県名をセットする項目名だけ書いとけばいいんかな・・・と思って、郵便番号入力欄に

onKeyUp="AjaxZip3.zip2addr(this, '', '都道府県', '');"

なんてイベントを書いてみたんだけど・・・

まったく動かず・・・。動かずっていうのは、郵便番号を入力しても

<input name="都道府県" type="text">

に都道府県名がセットされないということ。

試しに、

AjaxZip3.zip2addr(this, '', '都道府県')

とか

AjaxZip3.zip2addr(this, '', '都道府県', null)

とか書いてみたんだけど駄目やねえ。

AjaxZip3.zip2addr(this, '', '都道府県', '都道府県')

って書いてやると、「都道府県」欄に県名と市町村名がセットされる。
市町村は絶対どこかにセットするようにせんと駄目なんか?

で、仕方がないので、

AjaxZip3.zip2addr(this, '', '都道府県', '市町村')

として、

<input type="hidden" name="市町村" value="">

という表示されない隠し項目を作って対応。

まあ、これでとりあえず動いたけど・・・なんか泥臭いやり方やなあ(^^;
県名だけ必要(市町村名はいらない)な場合の、正しい引数の渡し方ってどうやるんじゃろ?

JavaScript なんでコードを読めばいいんだけど、難読化がされてるし・・・読む気がせんわ・・・(^^;;;
識者の方からのアドバイスを待つ(笑)
最近、無料の Web サービスを利用することにハマっているので(笑)、「Wix ロゴメーカー」というサービスを使ってみた。

ただ、実際にはこのサイトは今まで俺がこのブログで紹介してきたような、「無料でWeb上のツールを使わせることで広告収入を得る」系のものではなく、「いずれ自社の有料サービスの客になるであろう潜在的ユーザを囲い込むための餌」的サービスである。

Wixという会社は簡単に言えば Web 制作の請負会社であり、この「Wix ロゴメーカー」も「ああ、もう、自分で作るのってやっぱり面倒臭い!Wix に頼もう!」というものを狙ったものであり、また、結論から言うと「Wix ロゴメーカー」は「Wix ロゴメーカー | 無料でロゴを作成しよう | Wix.com」と title ヘッダに設定されているが「無料ではない」。

無料で作れはするが、それは小さな使い物にならない大きさのサンプル画像だけで、しかも商業利用はできない規定となっている。
つまり、本当に「Wix ロゴメーカー」で作ったロゴを使おうと思うと、使い方によって違うが数千円の使用料を払わないといけないのである。(当然の対価だが)

そういうサービスなので、利用開始時にアカウントの登録を行う必要がある。
実際に Wix に将来 Web ページデザインを依頼する可能性の無い人は、まあ、試しに使ってみるのもやめておいたほうがいいだろう。使いもしないサービスにアカウントを登録するのはセキュリティレベルを下げる行為だ。

ま、俺は使ってみたけど(笑)。Wix の Web ページ制作サービスを利用することは将来に渡ってもないけど、こういうのって、どの程度の実力なのかな?って興味があったので。

作ってみたのは、最近活動を開始した(いや、まだ開始してないけど)「フィッシング紳士の会」のロゴである。

質問に答えながら進んでいくと、最終的にいくつかのデザイン候補が提示され、その中から気にったのを選ぶ。
どれも気に入らなければもう一度最初からやり直し、少し質問への回答を変えてみればいい。最後に選択したロゴに色を変えられるが、色によってけっこう雰囲気が大きく変わって面白い。ちなみに、デザインを確定してしまったあとは色は変えられない。変えたければお金が発生する。

ま、そういうわけで、最終的に作成した「フィッシング紳士の会」のロゴがこんな感じ。

Free_Sample_By_Wix.jpg

魚釣りクラブのロゴなので「Mellow Salmon」という色のセットで作成してみた。

うーん、まあ、このくらいなら高校時代は美術部部長だった俺は自分で作れるけど(笑)、まったくそういう素養のない人には作れないレベルのデザインではあるかな。なので、デザインは苦手だけど、自分の Web サイトが作りたいって人にはいいかも。数千円でこういうロゴが作れるんならね。(ちゃんとデザイナに依頼すれば、こういうロゴで数万円から数十万円する)

ちなみに、「フィッシング紳士の会」は休日もバタバタと仕事をしているのでなかなか釣りの時間が取れないような(つまり俺のような(笑))、中年、熟年の紳士が「近場でパパッと釣りをしてストレス発散する」ことを目的に結成された秘密結社です(笑)

英語では、Dandy Fishermen's Club と表記することにした。

実際のところ、紳士は Gentleman だし、釣り人は Angler だ。間違ってるだろう!!という指摘もあるだろうが、ちゃんと意味があってあえて「Dandy Fisherman」と名乗っているのだ。そのあたりの話は、今後(たぶん)掲載されるであろう活動報告の中で(笑)
お客さんのところでのデモ用に作った「ラーメンサーチャー」(笑)

問い合わせフォームもちゃんと作るのが面倒だったので、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 で追加/修正された処理がヘッポコだったんだろうな。

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

このアーカイブについて

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

前のカテゴリはPodCastingです。

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

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

月別 アーカイブ

電気ウナギ的○○ mobile ver.

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