どうのこうの

動画を扱う案件があって、
「iOSやAndroidで見れるように」という要件だったので、
折角ならPCブラウザも含めてテストしてみるかってことで、
埋め込みや直リンクなどの動画の配信方法と、
PCブラウザ、iOS、Androidの動作テストをした内容を、
自分のメモ用に情報整理し、下記に公開しました。

どなたかのご参考になれば幸いです。

テスト動画と動画の表示テスト

結論は上記サイトにも書いているけど、

H.264エンコーディング、横960px縦540px程度の動画を1つだけ用意する。
動画は直リンクする。
埋め込む場合はMediaElement.jsを利用し、video要素に上記動画を指定する。

な感じが良いかと思います。

ただし、Windowsは未確認です。
どなたか確認されたら、ご一報いただければ幸いです。

テスト用の動画は、
トリミングしたり、
エンコードしたり、
好きに使ってください。

ウェブサイトを制作中で、
「動画は手配中、とりあえずダミーの動画を入れておいて。」などと言われたときに、
とりあえず入れておく動画として使ってもらえたらな、と思っています。

dummyimageの動画版、みたいなイメージです。

いろいろとテストしてみて思ったのは、
やっぱFlashは便利だってことです。

iOSにFlash Playerが載っていれば、
こんなテストもせずに済んだのにね。

僕のメインマシンの、
MacBook Pro 15-inch, Early 2011のメモリを16GBに増設しました。

購入したのは下記の商品。

シー・エフ・デー販売 ノートパソコン用メモリ DDR3-SODIMM PC3-10600 CL9 512x8Mbit 2Bank 8GB 2枚組 W3N1333F-8G

背面のフタを開けて、
体の静電気を抜いて、
メモリを交換して、
PRAMをリセット（「command」「option」「P」「R」を押しながら電源を入れて、「ジャーン」っていう起動音が2回鳴ったらキーを離す。）して、
Apple Hardware Test（MacBook Pro購入時に付属していたDVDの2枚目を入れて、「d」を押しながら電源を入れる。）を起動して、
全テストを実行して、
再起動して、
問題なく起動することを確認しました。

技術仕様を見ると「最大8GBをサポート」って書いてあるけど、
16GB載せれるっていう噂は本当でした。

ちなみに、アクティビティモニタでメモリの使用量を見てみると、
半分くらいは常に空いてる感じです。

ちなみに、同じメモリを2セット、合計4つ買って、
iMac Mid 2010に載せようと思ったんだけど、
Apple Hadrware Testでテストがこけて、載せられなかった。

iMac Mid 2010も8GBのメモリに対応してるっていう噂だったんだけどなぁ。

iMac Mid 2010 メモリ 32GB – Google 検索

PIE.htcを使ってて、
ちょっとハマったのでメモ。

PIE.htcってのは、
IE8以下にCSS3を適用するライブラリね。

• CSS3 PIE: CSS3 decorations for IE
• CSS3PIE（PIE.htc）が効かないと思ったら

で、いきなり結論なんだけど、
PIE.htcは「http://192.168.1.1/」みたいなIPアドレスでアクセスした場合に動作しない。

.example {
    position: relative;/* for PIE.htc */
    behavior: url(/PIE.htc);
    box-shadow: 3px 3px 3px #999;
    -webkit-box-shadow: 3px 3px 3px #999;
    -moz-box-shadow: 3px 3px 3px #999;
}

みたいなコードがあるとして、

http://www.example.jp/

では正しくシャドウがかかるけど、

http://192.168.1.1/

ではシャドウがかからない。

理由はわからないけど、
PIE.htc側で何か判別してるんですかねぇ。

新年、あけましておめでとうございます。

今日から新年の営業を開始します。
本年もどうぞよろしくお願いいたします。

個人用の年賀状は結婚式の写真でしたが、
事業用の年賀状はかなだつとむさんの一期一会の集いで書いた大字書をそのまま使いました。

筆文字つとむオンラインショップ

創作時の様子です。

弛まず、驕らず、こつこつと自分たちの出来ることを積み重ねていきたいと思い、
矻矻（こつこつ）の矻という字を書きました。

上の写真の紙ははがきサイズくらいですが、
年賀状に使った大字書用の紙は縦が1mくらいあります。

大字書を書いたのは人生で初めてだったので、
とても刺激になりました。

それでは、皆様方のご健康とご多幸をお祈りし、
年始の挨拶と代えさせていただきます。

本年も、私と妻とまほしをどうぞよろしくお願いいたします。

去年に引き続き（正確に言うと今年だけど）、
自作の「人の一生を時計一周24時間に例えると今何時？」でこの1年の振り返りってみます。

tagawaさんの一生を時計一周24時間に例えると、現在「午前9時9分」です。 #WhatTime via 人の一生を時計一周24時間に例えると今何時？ etc.dounokouno.com/whattime/

— tagawaさん (@dounokouno) 12月 31, 2011

今年の始め、2011年1月3日の29歳の僕は「午前8時52分」でしたが、
今日、2011年12月31日の30歳の僕は「午前9時9分」になりました。

約1年で18分進みました。
でも、そんなもんなんですね。

今年は、
個人事業を始める決意をして、
お互いの両親に挨拶して、
個人事業を開始して、
入籍して、
結婚式の会場を探して、
結婚式の準備をして、
腰痛で歩くことができなくなって、
結婚式の1週間前に交通事故して、
結婚式をして、
年賀状を個人用と事業用作って、
おかげさまで仕事もたくさんいただいて、
あっという間に1年が終わりました。

来年はもう少し穏やかに過ごしたいなぁと思っています。

たまにはガンプラでも作ってさ。

いつ買ったか忘れたくらい昔に買ったグフカスタムをやっとこさ作りました。

それでは皆様、よいお年をお過ごしくださいませ。

静的なウェブサイトにMTを組み込むときに、
僕は毎回、全てのテンプレートファイルを削除してから制作を始めます。

これって僕だけなのでしょうか？
デフォルトのテーマっていろいろ邪魔じゃないですか？

毎回毎回テンプレートファイルを削除するのはめんどくさいので、
それ用のテーマを作りました。

dounokouno/MT_BlankTheme – GitHub

なんてことは無いのですが、
このテーマを読み込むと、
テンプレートファイルが無い状態から始められます。

こんな感じ。

システムテンプレートは後で追加できないので残しておいていますが、
「ポップアップ画像」以外は空です。

まぁ、それだけです。
どなたかの参考になれば幸いです。

参考

• ウェブサイト管理の新標準。Movable Type 5 – Six Apart
• MTOS: Movable Type オープンソース・プロジェクト

僕はMTが結構好きです。

静的なウェブサイトの一部だけをCMS化できるし、
静的なHTMLを出力するっていう控えめな感じとか、
MT関連のファイルは一つのディレクトリにまとめられるのでpublic_html以下が散らからないところとか。

そんなわけで、Movable Type 5（MT5）をCMSとして組み込む時の個人的なメモです。

基本

• ウェブサイト管理の新標準。Movable Type 5 – Six Apart
• MTOS: Movable Type オープンソース・プロジェクト

拡張

• Movable Type タグライブラリ for Dreamweaver 機能拡張
  → DWでMTタグの入力補完。「mt:EntryTitle」が保管されないのはなんでだろ…。

リファレンス

• Movable Type 5 ドキュメント
• テンプレートタグリファレンス | MovableType.jp
• 日付に関するテンプレートタグのモディファイアリファレンスMovable Type 4 ドキュメント
  → <mt:EntryDate format=”" />の表記方法。なぜ4なのかは不明。

プラグイン

• AnotherCustomFieldsプラグイン(MTOS用カスタムフィールド風プラグイン)リリース – The blog of H.Fujimoto
  → MTOSにカスタムフィールド風なフィールドを追加。
• エムロジック放課後プロジェクト: UploadDir アーカイブ
  → アップロード先を「uploads」にしたりする。
• 静的ページ用ページ分割プラグイン:PageBute
  → ページ分割。
• MT > CustomDefaultFields – ToI
  → 「続き」フィールドを隠したりする。
• MT > QuickRebuild – ToI
  → 複数ブログを横断して再構築。
• DuplicateEntries – ogawa – エントリーやウェブページやテンプレートを複製するためのプラグイン。
  → テスト記事の量産に。
• ResizeImage – MovableTypeプラグイン | 森下屋
  → 画像サイズのmaxを指定。
• Default Toolbar Button Hide – Movable Type プラグイン | かたつむりくんのWWW
  → リッチエディタのアイコンを隠す。
• Movable Type 備忘録 – MTRemoveBlank プラグイン
  → 不要な改行を削除。
• 小粋空間: Split プラグイン
  → splitモディファイアを追加するプラグイン。
• MTAppjQuery – Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン | かたつむりくんのWWW
  → 管理画面にjQueryを追加してカスタマイズ。
• カテゴリ／フォルダ／ブログ記事／ウェブページを並べ替えるプラグイン（SuperSort）の使い方 – The blog of H.Fujimoto
  → ソートプラグイン。

使ってみたいプラグイン

• 小粋空間: カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02

Tips

タイトル等を一定の文字数でトリミングして「…」を追加する。

参考：MT5.1のちょっとE話：trim_toモディファイア – WolaWola

<mt:EntryTitle trim_to="40+..." />

JSON出力

flexibleSearch.js で読み込む JSON を Movable Type で出力する | かたつむりくんのWWW

コメント

MTIgnore | テンプレートタグリファレンス

if文

MTIf | テンプレートタグリファレンス

変数の算術演算

小粋空間: Movable Type 4.1 / MTOS における変数での算術演算子の利用方法

カスタムフィールドの1行テキストをマルチチェックボックス

$.MTAppMultiCheckbox() の使い方 – MTAppjQuery でマルチチェックボックスも簡単に作成 | かたつむりくんのWWW

カスタムフィールドで追加したtextareaの改行

nl2br | グローバル・モディファイアリファレンス

指定日公開

指定日投稿や公開キュー等のスケジュール処理の設定

定時再構築

Movable Type 備忘録 – MovableTypeを自動的に再構築する

メモ

MTLoopは入れ子にできない

Twitter / @45shiki: MTではハッシュの入れ子はできても、MTLoopの入 …

EC-CUBEを開発用サーバーでテンプレートとか機能追加を行って、
本番サーバーにデータをコピーして公開するまでの手順のメモ。

EC-CUBEのバージョンは2.11.3、DBはMySQLです。

各種データのエクスポート

1. 開発サーバーのDBをエクスポート
2. 開発サーバーのソースをエクスポート
3. .htaccessの情報を修正（開発用サーバーはBasic認証をかけていたので、それを削除）

各種データのインポート

1. 最新のDBをインポート
2. 最新のソースをアップロード
3. /data/config/config.php の情報を修正

管理画面の設定

1. /install/index.phpにアクセスし、パーミッションを確認
2. /admin/ にログインできることを確認
3. ［管理画面］->［デザイン］->［PC］->［テンプレート設定］から使用するテンプレートを選択
4. DBのテーブルを全て削除
5. DBを再度インポート
6. ［管理画面］->［デザイン］->［PC］->［テンプレート設定］から使用するテンプレートが選択されていることを確認

各種動作確認

• ユーザーログイン
• 買い物の一連の流れ
• 管理画面の操作

初回のインポートではテンプレートが「default」になっていて、
なぜテンプレート情報が移行できないかは不明。

でも、これでできたからまぁいいや。

個人事業を始めてすぐに、
必要にかられてメールフォームシステムを作ったのですが、
自分たちで使うだけではそんなに案件数もないし、
ただ眠らせておくのはもったいないと思い、
GitHubで公開することにしました。

• TransmitMail – Copyright表示不要のPHP製汎用メールフォームシステム
• dounokouno/TransmitMail – GitHub

Copyright表示不要でMITライセンスなので、
商用、非商用問わず自由に使っていただけます。

改造したり再配布していただいてもOKです。
いい改造ができたら、Pull Requestください！

お客さんのサイトに設置したり、
設置代行で手数料を取ったりしてもらってもOKです。

でも、可能であれば、
TransmitMail自体は無料で扱ってもらえるとうれしいです。
（個人的な考えですので、強制ではないです。）

TransmitMailの特徴

メールフォームシステムなんて、
ましてやPHP製なんて星の数ほどあると思いますが、
TransmitMailには「マークアップエンジニアに優しい」という特徴があります。

メールフォームの設置って、
大抵、マークアップエンジニアの仕事ですよね？

マークアップエンジニア（僕）が作ったので、
マークアップエンジニアに優しい作りになっています。

テンプレートの記法が少々難しいかもしれませんが、
慣れればかなり早く設置できるじゃないかと思います。

「予算の都合でCMSは設置しないけどメールフォームは欲しい！！」
なんてときにちょうどいいんじゃないかなと思います。

設置方法について

GitHubのWikiにマニュアルをまとめました。

ですが、メールフォームを設置したことがある方でしたら、
HTMLファイルとconfディレクトリの中を見ればだいたい理解してもられると思います。

Pages – GitHub

いろいろなメールフォームシステムを設置してきて思ったこと

マークアップエンジニアとしていろいろなWebサイト制作に携わり、
CMSだったりCMSじゃなかったりと、いろいろなメールフォームシステムを触ってきた結果、
「ここが使いにくいよなぁ。」とか、
「ここがこうだったら使いやすいのに。」とか、
日頃から思っていた不満やストレスの全てをぶつけて作りました。

そのせいで、
多少冗長な記述が必要になる場合もありますが、
汎用性を持たせるため仕方がないかなと思っています。

その時は多少時間がかかるかもしれませんが、
結果的には時間短縮になると信じています。

マークアップはWeb制作の一番最後の行程（運用は除いて）で、
大抵、設計やデザインやお客さん都合で押したスケジュールのしわ寄せがきているかと思います。

そんなマークアップエンジニアが、
TransmitMailを使って少しでも早く帰れることを願って止みません。

日本のマークアップエンジニアの皆さん、
一緒にがんばりましょう！！

また、不具合等発見されましたら、
GitHubのissueやこのブログにコメントいただければ幸いです。

Issues – dounokouno/TransmitMail – GitHub

Laquu.js の紹介記事を読んで、
僕はずっと yuga.js 派なんだよなー、ってことを再認識しました。

yuga.js :: Kyosuke.jp

yuga.js を個人的にカスタマイズして使ってるので、
公開したら誰かの参考になるかもしれないしと思い、
GitHubで管理することにしました。

オリジナルと同じMITライセンスです。

• yuga.js TT Custom – yuga.jsの個人的なカスタマイズ
• サンプル | yuga.js TT Custom
• dounokouno/yuga.js-TT-Custom – GitHub

nth-child は IE8 から対応してるみたいだし、
現状と合わなくなってきてる部分は、
随時修正していこうと思います。

yuga.js 派の方で、
「私はこんなカスタマイズしているよ！」とか、
「yuga.js にこんな機能があれば便利なのに！」とかありましたら、
Fork したり、Pull request くれたり、
ブログや Twitter や Facebook でコメントもらえたらうれしいです！！