便利なサイトを見つけたのでご紹介。
Make the Web Faster — Google Developers
調査したいURLを入力するとそのページをPC、スマホ別に細かく診断してくれます。
といってもLint的なものではないようで、どちらかというと表示スピード重視。
参考までにYahooさんの診断結果を貼っておきます。
ちなみにGoogleさんのページはモバイル：92点、PC：98点でした。
さすがです。（まぁ要素が少ないのですが）
PageSpeed Insights：https://www.google.co.jp/
カテゴリー: Develop
CSSなどのPC/スマフォの切り分けはCSS内で対応したのですが、GoogleのAdsense、AmazonのアフェリエイトバナーなどはJSなどで切り分けるとNGのようなので、サーバ側での切り替えを行うことに。
WordPressには”wp_is_mobile()”などという便利な関数があるらしいのですが、MTにはそれらしいものが見当たらず。MTIncludeなどを調べてみましたが、どーも対応できないっぽい。ダイナミックパブリッシングに関しての記述は多々あったのだけど、結構トラブル多いみたいなのでスタティックのまま、PHPインクルードで対応する方法を模索。
Googleさんで検索しても、マッチする情報が無かったので一応メモしておく。
まずはhtml拡張子で、phpが動作するように.htaccessを設定。
hetemlの場合はヘテムルレンタルサーバー｜よくある質問：拡張子 .html で PHP を動作させたい。ということで、以下のみを設定してアップ。（他のBlogではgzip解除とか記述がありましたが、こちらは以下のみで稼働した）
AddHandler php5-script .html
次にブログ側の設定。
MT管理画面内対象ブログの「全般設定/モジュール設定」内
- 「サーバーサイドインクルード」を「PHPのインクルード」に設定。
- 「モジュールのキャッシュ：再構築の速度向上のために、テンプレートモジュール毎のキャッシュ設定を有効にする」はとりあえずOFF。（このへんはまた後日最適化）
これでブログの設定は完了。
HTML上に記述されたソースコードを整形、強調表示してくれるJSライブラリSyntaxHighlighterを、MT5にインストール。
MT3の時から利用していたが、しばらくみないうちにFlash連携によるコピペの機能などが割愛され、完全JS駆動になっておりました。（スマホ展開などが理由でしょうけど）
で、MT4のプラグイン化されたものがあり、これを使うと記事作成画面のフォーマットから制御できるらしい。
SyntaxHighlighter for Movable Type | kwLog
便利そうではあるが、コード部分の指定労力が最新版SyntaxHighlighterのと大差ない感じだったので、本家の最新版をインストール。
インストールは特に悩むことも無く、JSとCSSを一式アップロード。
利用する言語のブラシJSだけを読み込み処理して、Styleも適当に。
これで終わり。
ただなぜか縦スクロールが表示されて不格好な感じになっていたので、CSSを以下のように調整。
これで縦スクロールはでなくなった。（どっかの外人がoverflow-y: hidden !important;だ！とか書いていたけど・・）
/* syntaxhighlighter */
.syntaxhighlighter {
margin: -1rem 0 1rem 0 !important;
font-size: 1.4rem !important;
padding: 1rem 0;
}
CSSの設定など大枠はYoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 ｜ HTML5 – CSS3 magを参考に。
ここではMovable Typeでのタグの置換方法について。
記事内に埋め込まれているタグは
<iframe width="519" height="264" src="http://www.youtube.com/embed/uFoe0kcKGFg" frameborder="0" allowfullscreen></iframe>
な感じ。これをサイズ制御用のdivで囲む必要がある。
Movable Type管理画面の検索|置換では検索しか正規表現が使えないため、WordPressの様に記事自体の変更はできないが、グローバルモディファイアとしてregex_replaceというのがあるのでそれを利用する。
（つまりビルド時に置換処理を行ってHTMLを生成するということ）
カテゴリー
スマホからの写真メモ with OCR
読書中「ここメモ！」なんて場面は多々あります。
参考書であれば蛍光ペンでマーク、一般書籍であれば付箋をペタリ。
借りてる本ならノートにメモなんてこともあるかもしれません。
本能的な感覚ですが「書く」行為が記憶への定着を促進するイメージは強くあり、若い頃はガリガリとノートに解釈した結果を複写することで自身の血肉としていたように思います。
しかし40歳を超え、自身の記憶力に疑念が産まれつつある状況に対し、ITの力でそこを乗り越える術はないのかしら？ということでちとリサーチ。
要件は以下
Functions
- スマホで撮影してクリップ
- OCRでテキスト化
- 保存、アップロードなどの操作で読書を妨げない
- あとでテキスト検索できる
- ネタ元書籍情報と関連付けできる
- メモに対してメモを付けれる
- 保存先はEvernote、Google Driveなどでもいいかぁ・・
利用イメージ（Save）
- 本を読み始める前に書籍データを登録（ISBNやらバーコード撮影で自動参照とか）
- 読書中にメモしたい部分に遭遇
- スマホを取り出しパチリ
- 写真の中でメモしたい部分を指でなぞってマーキング
- 保存（事前に保存先は設定済）
利用イメージ（load）
- 記憶の断片にある単語で検索
- 文章＋保存日時、書籍タイトル、表紙のリスト表示
- 参照回数を記録。自身の中での重み付け
- 共有してペア読書みたいなスタイルができたら学習過程における認識の同期なんて出来て面白そう
- 思考プロセスの傾向なんてものも比較できるかも（ペアマッチングに利用可？）
ということでリサーチ。
これまでSPAMフィルターで表出していなかったSPAMが、バージョンアップ（Movable type 3.35から5.161へバージョンアップ – apeirophobia）に伴い全て表出する事態が発生。
これまでの学習が継承されていないのかは不明。
とりあえず1000件/日ペースで投下されるため、学習させるのもしんどいな～ということで、幸いサーバにImage:Magickがインストール済だったのでMT純正のCAPTCHAを利用することに。
ただしカスタムテンプレートがCAPTCHA非対応だったので、MTデフォルトのテンプレートに変更。
これでガツッと投稿レベルで全部ブロックできました。
[追記 20140117]
どうもCAPTCHAでは投稿自体をブロックできる状態ではないようなので、違う対策を検討することにしました。
Movable type バージョンアップに伴うSPAM対策(2) – APEIROPHOBIA
7年ぐらい前からver.3.35のままだった本ブログのシステムを、やっとこアップグレードしました。
途中ver.4を経由してアップグレードを試み失敗したりと右往左往しましたが、なんとか無事アップグレードできたのではないかと・・・（ただテンプレートがそのままってのはちょっと意外でしたけど・・・テンプレートってDBに入っているのかしら？）
いや、まだ詳しく確認してないので、なにか途方も無いバグを内包しているのかもしれません。
余力があったら詳細書きます
カテゴリー
Aqueous surface
Videoタグを書いて貼り付けていたけれど、Instagram謹製のEmbedタグが用意されておりました。
ま、iframeな訳ですけれど。
ということでテスト
カテゴリー
Lorem ipsum
英語のダミーテキストとして有名なLorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
な感じですが、まぁ日本語サイトで英語ってのもイメージ遠いので日本語のLorem ipsumの方がイメージしやすいわけですが、自分で作るのは大変なので、
すぐ使えるダミーテキスト – 日本語 Lorem ipsum
を使います。
宮沢賢治「セロ弾きのゴーシュ」を元に生成されたもの
よくこの手の問題が表出するのでメモ
この正式名称はなんていうのかわからないけれど（弊社社長からnetwork-pathという呼称だと教えてもらいました。）、意味的にはプロトコルレベルドキュメントルートみたいな感じかな？
JS、CSS、Imageなどに利用できます。
当然参照先がhttps、httpの両方に対応している必要がありますがーー。
ただgoogle analyticsとかそういうメジャーどころの埋め込みタグにはこの手法が使われてないので、何か問題があるのかもしれないですが・・・
参考：Google Analyticsの判定式
弊社社長から参考文献を教えてもらったので追記
RFC 3986 – Uniform Resource Identifier (URI): Generic Syntax
A relative reference that begins with two slash characters is termed
a network-path reference; such references are rarely used. A
relative reference that begins with a single slash character is
termed an absolute-path reference. A relative reference that does
not begin with a slash character is termed a relative-path reference.
バグもあるらしいよ
IEでCSSが2回ダウンロードされるパターン | 開発・SE | マイナビニュース
5a Missing schema double download | High Performance Web Sites
GitLabとRedmineを連携させる #Redmine #gitlab – Qiita
In this time, we made a choice accessing with “deploy key”.
I don’t know setting details for server side…
Now, we could sync them and manage on Redmine integrally.
It seems as cool way to managing tasks and sources.
- At first, clone repository on SSH. you will get a error message like below.
- Select “Tools / Create or Import SSH key”, then PuTTYgen dialog open.
- set parameters “SSH-2 RSA” and click “Generate”.
- PuTTYgen start to Generate key.
It tells”Please generate some randomness by moving the mouse over the blank area”.
If you don’t do it, generate process doesn’t progress. so move mouse on it.(I don’t know the reason…)
- The key generated. and enter “key passphrese” (it’s used to login SSH gateway), and save private Key and copy public key and save it.
- Select “Tools/Launch SSH Agent(Pagaent)”, then input dialog for passphrese opened, so enter passphrese and OK.
- If you use it to connect Git service, visit service setting page and register it.
- Clone repository on SSH and now get no errors.
- That’s done!
サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
I selected Git client software “Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree“.
Never too old to learn…
I will do my best to master it…
Sometime, you wanna check or preview some data from subversion directly.
but it couldn’t show correctly, cause it’s Mime-type defined “text” or “binary”.
At times like that, you can change Mime-type on subversion.
below is example for Tortoise SVN for Windows.
- Select file you wanna change, and open context menu on file explorer.
- Access “Properties” in tortoise sub menu
- Properties dialog will open.
- Click “Edit”, then Mime setting dialog will open.
- Input Mime-type you wanna set and commit.
- That’s done! good developing!
カテゴリー
Web Component概要
正直詳しいことはよくわからないのだけど、AS3的な概念になりつつあるんだろうな・・・。
しかしHTML＋JSでいつもネックに感じるのはJSのクロスドメインの問題。
これ何とかしてほしいなっていつも思う。
セキュリティの問題は当然解決しないといけないのだけど・・・。
最近話題の「Lean Startup」
リーンスタートアップは「構築」「計測」「学習」を迅速に繰り返して、新たな製品やサービス、事業を実現する。構築段階では必要最小限の機能を搭載した製品やサービスを素早く提供する。計測段階では顧客の反応を細かく調べる。学習段階では測定結果を基に現状と顧客ニーズとのギャップなどを学習し、製品やサービスを改良していく
従来の「The Web site」で通用していたかもしれないペルソナ手法が、近年のコミュニティ、サービス、情報の混在したサイト設計に有効に作用させるのは無理があると感じている人は多いのではなかろうか？（時間、予算的にというマスボリュームの違いを踏まえないで海の向こうのお手本を盲信するやり方は自滅するだけ）
実装前に結果予測＋保証された多機能な企画を立てるのが企画屋の一つの矜持だとするならば、「おれはホームランか三振だ」というギャンブルフレームにおける打率の高さが、彼らの格付けの根拠になる。
もしかしたらそれは確率の結果論というだけの話であり、時代としてのハンディキャップがほぼゼロの現状で、打率は間違いなくHC分下がり、相反してリスクは高まっている状況だと言えるだろう。
時代は機動性をもとめ、その手本となるものを探している。
それは間違いなく80年代の広島東洋カープの古葉竹識政権なのである。
「Windows 8のUI、ユーザビリティを抑圧」：UI専門家が批判 – CNET Japan
まだ実際にWin8を触っていないので、なんとも言えないですが、書いてある内容は事前に得ていたWin8の情報から想像していた印象と同じ。
ただこれから将来どの方向性にシフトしていくか？踏まえると現在は過渡期とも言える状態なわけで、ヤコブ氏の10箇条
- システム状態の透過性
- システムと実世界の調和
- ユーザーコントロールの自由度
- 一貫性と標準化
- エラー防止
- 記憶より認知
- 柔軟性と効率性
- 美的で最小限のデザイン
- ユーザによるエラー認識、診断、回復を援助
- ヘルプとドキュメンテーション
を順守していると、ここ数年のスマホ、タブレット出現にともなう劇的な変化スピードについていけず死に絶えるしか無いんじゃないか？という印象です。
じゃあどーすればヤコブ氏に文句言われないのか？っていうと、Windowsの名前を継承しないで新しいOSとしてリリースしろってことなんでしょうけど、マーケティング的にWindows名を継承しないデメリットは計り知れないわけで、そういう部分に関しては、こういう時代の変革にはその将来のメリットも踏まえユーザがその二重性に対して納得するかしないか？なんじゃないかしら？とおもいます。
iPhoneでUIの浸透を済ませ、それをPC側にシフトしていくAppleのやり方は評価すべき戦略ですが、残念ながらMSはWindows Phoneも後発で、時間が無い。
ユーザビリティ視点で評価するとこういう結果になるのは当然だろうなと思いますけど、世の中はそれだけで成立しているわけでもなく、クジラが5000万年前にやっぱ海に戻るわって思ったように、その瞬間非効率で、無意味な行為だったとしても、遠い将来生き残るためには必要な行為だったかもしれないことってあるんじゃないかしら？と感じる勤労感謝の翌日であります。
注）ヤコブ氏の分析を否定するわけではなく、それも踏まえてね・・って話です。
あとアマゾンのWin8のサムネイルのカッコ悪さは何とかしてほしいなとも思います。
なんにしても、事務所の新しいWin8が到着しているので、それを触ってみようと思います。
（当然作業用マシンに導入するか？は要検証・・・）
Ref.
Windows 8 — Disappointing Usability for Both Novice & Power Users (Jakob Nielsen's Alertbox)
Flash critic to coach Macromedia – CNET News
カテゴリー
GIFアニメの再生速度
実は違う。クロスブラウザでの gif アニメーション再生速度の合わせ方。 (フェンリル | デベロッパーズブログ)
なんとなくうすうすは気づいていたけれど、ここまで詳細に研究しててすごい。
15年ぐらい前、YahooバナーなどがGIFアニメ全盛だった頃に、カラーパレットの調整とあわせて、尺調整もミリ秒単位で作りこんでいたけれど、その時の時間基準って曖昧だったのだろうか・・・と今更ながら不安になります。（当時はIEぐらいしか対象じゃなかったというだけかもしれないですが・・・）
あれから時代はFlashへとシフトし、今hmlt5だとかで再びGIFアニメも復権しているから、このタイミングでのこういう記事なのかもしれませんが、CSS Sorite＋CSSアニメ？みたいなプレイヤーシステム必須の形ではなく、ファイルスタンドアローンでのアニメーション画像フォーマットが出てくれればいいのにとおもいます。（単純にプレイヤーがブラウザの画像レンダーに内蔵されているだけって話ですが）
自分の記憶の中ではPNGのアニメーション形式とか存在してたんですが、どーも携帯だけの対応だったり（PNGアニメ作成法）、PNGを拡張した別フォーマットAPNG（Animated Portable Network Graphics – Wikipedia）だったりしたようです。
一応ソフト（フリーソフトの活用 Paint.NET プラグイン APNG ～アニメーションPNG作成～）も存在しているようですが、未対応ブラウザが多いようであまり現実的ではない感じ。
まぁLZWの特許期間が満了した現在、新しくAPNGに取り組むっつー必要性もないということで、APNGが普及しない2つの理由、2つの望み | YATA BLOGな状況なのでしょう。
ただ個人的にはフルカラーでのアニメーション画像はやっぱ欲しいし、仕様的にさらにもう一歩踏み込んで、時間軸で変化していないピクセルの情報を割愛した変位部分だけの情報を積層させるような動画的志向をもったフォーマットができたらなぁって思ったりもしします。
ざっくり言うと最終コマを基点とした差分情報だけを保持したレイヤーを上方向（時間の若い方）に積層させていくような構造で、時間の進行とともに、上からレイヤーを除去していくようなイメージですけど・・・。（すでにそういう作り方になってるのかもしれんけど）
ということでちょっとメモ
html5のvideoタグでmp4何かを再生するようにしてた場合、DivXとかを入れていると勝手にDivXプレイヤーが起動して、「DivXビデオじゃない」という警告がでて再生されなかった。
色々設定を変えてみたものの改善しなかったので、DivXを一式アンインストールしてやっとこ正常に動作するようになった。
何故にDivXをインストールしたのかよく覚えてないのだけど、多分動画書き出しの検証をしているときにインストールしたんだろうな・・。最近はおとなしくAdobeさまのVideo Encorderを使うようにしております。
動画のコーデックは種類も多いし、正直良くわからない部分も多い。
youtubeやらVimeoなどの動画サービスで処理してもらうのが一番シンプル。
（動画の上書き置換ができたらいいのだけどなぁ・・）
ブラウザ上で標準フォントや言語属性を検証していたところ気づいたのだけど、Chrome上のFlash PlayerはデバイスフォントがChromeの設定を継承する場合がある。
Chromeの[設定/ウェブコンテンツ/フォントサイズ/フォントをカスタマイズ]の中で[Sans Serif]で指定したフォントがFlash Playerのデバイスフォントに継承される。
ただしこの継承が発生するのはChrome専用Playerの特定のバージョンの場合っぽい。確認したPlayerは一つ。
[user]\AppData\Local\Google\Chrome\Application\21.0.1180.79\PepperFlash\pepflashplayer.dll
開発の人でDebug Playerを独自に入れている場合は従来のデバイスフォントで表示される。
ちなみにFirefoxでは継承は発生せずこれまでどおりのデバイスフォント表示。
PepperFlashってのはChrome V21からのPlayerらしいけど、海外サイトを見てるとCPU負荷や日本語入力（ニコ動？）に問題などがあるっぽい。
ちとこれから先ChromeのFlash Playerが独自の進化をしていくのかよくわからないけれど、デバイスフォントが変更になるのが開発者、ユーザにとってどういう影響を与えるのか見守りたい。