Category ‘制作日記’

外部Javascriptの読み込み方法あれこれ

繋がれたjQuery https://www.dlmarket.jp/products/detail.php?product_id=95032&ref=4963

jQueryなど外部Javascriptの読み込み方法はいくつかあるし流行もある。

設置場所は
・headタグ下部に入れる
・bodyタグ下部に入れる
・bodyタグ上部に入れる

URLは
・ファイルを同サーバー上に設置する。
・Google等のCDNを指定する(//開始)。
・Google等のCDNを指定する(https://開始)。

レトロな方法は「headタグ下部に入れる」「ファイルを同サーバー上に設置する」の組み合わせで、モダンな方法は「bodyタグ下部に入れる」「Google等のCDNを指定する(https://開始)」の組み合わせになるが、単純にこの方法が良いとか悪いとかは言えない。
(さらに…)

パーマリンクをシンプルに

http://www.photo-ac.com/main/detail/22499

ログによると、このブログを始めたのは2005年11月で今で10年近く運営してる事になる。
Movable Typeからやっている関係もあってか、Wordpressのパーマリンク設定がURLに年月が付いてるものになっている。

例えば下記の感じのURLになる。
http://uda2.com/blog/2005/11/favicon/
月と投稿名「/%year%/%monthnum%/%postname%/」

最近の流行は投稿名だけのスタイルだ。

favicon:ホームページのアイコン


投稿名「/%postname%/」

芸能人のブログやニュース系のブログなら年月がある方がいいかもしれないが、ウチのように閲覧者の殆どが調べ物を探す為に使われてるブログでは年月は重要ではないので変更したい。変更するのは「設定」「パーマリンク設定」でラジオボタンを選択するだけで簡単だけど変更してしまうと10年の蓄積された被リンクが切れてしまうのが悩みどころです。
そういった方の為にPermalink Redirect WordPress Pluginなんていうプラグインもあるらしいけど古いしシンプルに年月取るだけなので.htaccessのredirectで飛ばす事にした。

そもそもWordpressをインストールすると.htaccessが作られるので、ダウンロードしてきて一番上に転送用の記述をした。
うちのブログ全体を「blog」フォルダに入れてるので転送先が「/blog/$1」になってるがルートに直置きはしてたら「/$1」になる。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^20[0-9]{2}/[0-9]{2}/(.*)$ /blog/\ [R=301,L]
</IfModule>

これで「月と投稿名のパーマネントリンク」から「投稿名だけのパーマネントリンク」に転送されて、レスポンスコードを301にしてるので転送された事を検索エンジンとかに通知するようになりした。

文字コードを疑え!

毎回では無いがPHPのようにサーバで生成されるページのデザイン等を修正するのに一旦HTMLとして保存し、静的ページとして保存してスタイルシートやJavaScriptを修正を進めたりする事もある。
今日もログイン後のページの修正でログインが面倒なのでダウンロードしたHTMLをInternetExplorerで確認しながら修正を進めていき一段落が付いたのでFireFoxとChromeで確認してみると「SyntaxError: illegal character」(OperaだとUncaught SyntaxError: Unexpected token ILLEGAL)というエラーが現れスクリプトエラーになって動作しなくなった。
ネットで検索しても解決法は見つからず小一時間ほど悩んでいたが、ふとエディタのウインドウ下のバーに見慣れない文字に気づいた。
「UTF-16LE」
作ったのは「UTF-8」でHTMLの宣言も「UTF-8」にしてるが、Internet Explorerで「ソースの表示」から「ファイル」の「上書き保存」とするとUTF-16LEで保存されるようだ(ちなみにOSはWindows2000から内部文字コードがUTF-16らしいが、少なくともInternetExplorer8までは正常な文字コード(UTF-8)で保存される)。
IE以外は「UTF-16LE」のHTMLから見て「UTF-8」の外部ファイルを「UTF-16LE」と勘違いして読み込もうとして文字化けしてそれが不正な文字(illegal character)としてエラーになっていたようで、エディタにて「UTF-8」に戻したら直った。

ちなみにInternetExplorerでもソースを表示せずに「ファイル」「名前を付けて保存」からだと文字コードを選択可能ですし、標準でソースの文字コードが選択されてるので問題無いです。

HTML・CSSで刀で斬るようなアニメーション

リンゴを斬る

最近LIGのブログを見る機会が多くなった。LIGは面白法人カヤックバーグハンバーグバーグの流れを汲んだキワモノ系の制作会社で、そのLIGのブログが技術系の記事が増えてきたので毎日読んでる。昨日も刀でズバッと斬るようなアニメーションをHTML・CSS・JS(jQuery)で実装する方法 | 株式会社LIGを読んで「さすがLIG、このタイミングで首をはねるアニメーションを作るとは・・・」とも思ったが俺も作ってみた。
(さらに…)

iPhoneに元号アイコン

元号アイコン
WEBは西暦表記が多いですが書類を書いたりする際には未だ元号(年号)で記入する事が多々あります。
Siriに「今年は平成何年?」と聞いたらも答えてくれますが恥ずかしいです。
IT4コマ漫画:今って平成何年だっけ? – ITmedia ニュース
によるとそういうアプリがあるとの事ですが年号がバッジ(右上の数字)で表現されていて見た目が微妙です。
そこで、巷にあるアイコンをカスタムするアプリの方法を使って元号の書かれたアイコンを貼れないか試してみた。
(さらに…)

ソーシャルメディアボタン「忍者おまとめボタン」


このブログのソーシャルメディアボタンは数年前に導入した改造版SexyBookmarksで改造してしまったので更新する事が出来ず、古いバージョンのまま利用していたが、確認してみるとサービスの終了したものが多くなっていたので設置し直すことにした。
(さらに…)

Pixi.jsで千切りした画像を動かしてみる

Pixi.js
ブラウザでゲームとか作ったりアニメーションさせる時に便利なcanvas系のJavaScriptライブラリはいくつかあるが最速の描画JavaScriptライブラリは!? パフォーマンスの検証 – ICS LABによるとPixi.jsはWebGLを使ってFlashよりも速いらしい。

以前揺れるキリンで高さ1pxの要素(li)の背景にしてjQueryで動かしてみたがとても遅かった。
そこで、このpixi.jsを使えば早くなるかもと考えやってみた。
kirin wave by Pixi.js

前回同様、高さ1pxにスライスするが今回は要素では無くスプライトに貼り付ける感じだ。
作ったはいいが、WebGLを有効にするとFirefoxでは動かず(参考にしたPixi.jsを初めて触って簡単にアニメーションを作成してみた話(その3) | 株式会社LIGも動いてない)
Google Chromeは動くけどWebGLを有効・無効にかかわらず以前より重くなってしまった。

720個のスプライトを描画させるのは難しいのかもしれない。

まだ間に合うかもしれない新しめのアプリ開発


iPhoneやAndroidはアプリ開発を特定の会社じゃなく一般の開発者にさせることで発展した。
最近では一般の開発者がヒットを飛ばすことが少なくなったが、最初の頃は一攫千金を得た人も多かった。

アプリで乗り遅れたオレは頑張ってPassBookを覚えてサービスを開始したがPassBookは人気が出なかった。

そこで一般の開発者でも参加できそうな新しめのテクノロジーをまとめてみた。

(さらに…)

○○で始まる文字列検索の速度比較

PHPにて「○○で始まる文字列」を検索する場合、一番に思いつくのは正規表現だけど重いのでstrposで検索していたがstrposは検索位置を返すし全体を検索するのでなんとなく遅いかなと思い別の方法を模索してみた。

PHPのパフォーマンス改善(3) | Selfkleptomaniac
という記事にstrncmpを含んだ3つの方法が書かれていたので計5つの方法のベンチを取って比較してみた。
(各秒数は約8万行を検索したしたベンチの10回分の平均値。)

strncmp版(先頭から特定文字数分検索する関数)
if (!strncmp($myvalue, $searchstr, 5)) ~
0.0312 sec

substr版(文字列を部分抽出する関数)
if (substr($myvalue, 0, 5) == $searchstr) ~
0.0447 sec

preg_match版(正規表現を利用した検索)
if (preg_match(‘!^’.$searchstr.’!’, $myvalue)) ~
0.0578 sec

substr_compare版(特定部分から特定文字数分検索する関数)
if (substr_compare($myvalue, $searchstr, 0, 5) == 0) ~
0.0415 sec

strpos版(文字列の開始位置を検索する関数)
if (strpos($myvalue, $searchstr) === 0) ~
0.0297 sec

おっしゃる通り「strncmp」は速く「preg_match」は遅いが「strpos」が予想以上に速く、単純な文字列の検索も今回のような特定位置の文字列検索も「strpos」が最速という結果になった。