サインポール風アニメーションjQueryプラグイン
首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。
デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。
そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル
〝サインポール風アニメーションjQueryプラグイン〟の続きを読む
ウダ2.comリニューアル
数年前から準備していたウダ2の新しいトップページを公開しました。
作った順番はスイングバナー→サークルバナー→フッター→ヘッダーの順で最初にとりかかったスイングバナーは2012年に作ったもので最後に作ったヘッダー部分とは約3年の隔たりがあります。
一番上は最近よく見る動画の背景のヘッダー、上にざらついた縦縞のフィルターをかけて低画質の動画を誤魔化せるようにしてる。（使える動画が見つからなかったので公開時点では著作権放棄(CC0)の画像になってます）
ロゴのアフロスカルは前のがレンズが透けすぎだったので「死がふたりを分かつまで」の反射の感じをパクって透け具合を調整した。動きも以前はFlashで笑っていたのをjQueryでアニメーションに刷新しました。
スイングバナーはCSS3のtransformでカーソルを重ねたり、タブレット端末を傾けたり、ブラウザのウインドウを移動させると反応して揺れる。
サークルバナーは「PopCircle Vinmein」をベースにパララックス化したり出方を回転させながらにしたりしてます。
パララックス化したのはパララックス全盛の頃に作ったからです。さらにカーソルを合わせるとCANVASで書かれてタイトルとツールの説明が表示される。
フッターは予定ではパララックスのパラパラアニメを描こうと思ってましたが手が掛かるので放置してたらパララックスのパラパラアニメ自体を最近見なくなったので中止しました。
代わりにCSS3のtransformで角度を付けた長方形をjQueryでスクロールと同期させる事で微妙なパララックスにしました。
中身は新コンテンツ（？）のTシャツを掲載してます。
Instagram APIでフレブルBUHI画像閲覧
InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると
Instagram APIから画像データを取得する方法
Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた
と猫を集めてるのがあり、12のメジャーなSNSのアクティブ率を比較してみた – App Ape Labによると昨年末の国内Android端末ではInstagramがアクティブ率2位になっているので、とりあえずフレブル系の犬を集めるためハッシュ名を「#buhi」と考えてたら既にありました。（海外でもブヒっていうんですね。）
ハッシュがあるなら、Instagramから画像を引っ張ってきて表示するサイトを作るだけなんでやってみた。
〝Instagram APIでフレブルBUHI画像閲覧〟の続きを読む
Preprosが有料化したので乗り換えた
Preprosが有料化したようで起動の度に「金払え」、定期的に「金払え」とうるさくなり、暴走する頻度が増えた。
使用頻度は高くなってるので金を払ってもいいレベルかもしれないけど、超多機能なPreprosのSCSSとjavascript最小化にしか使って無く損した気分になるので乗り換えることにした。
かといってWindowsなので乗り換え先が少ない。以前はSCOUTを使っていたが最近人気が無いようなので、コマンドライン式のコンパイラーを使うことにした。
〝Preprosが有料化したので乗り換えた〟の続きを読む
外部Javascriptの読み込み方法あれこれ
jQueryなど外部Javascriptの読み込み方法はいくつかあるし流行もある。
設置場所は
・headタグ下部に入れる
・bodyタグ下部に入れる
・bodyタグ上部に入れる
URLは
・ファイルを同サーバー上に設置する。
・Google等のCDNを指定する（//開始）。
・Google等のCDNを指定する（https://開始）。
レトロな方法は「headタグ下部に入れる」「ファイルを同サーバー上に設置する」の組み合わせで、モダンな方法は「bodyタグ下部に入れる」「Google等のCDNを指定する（https://開始）」の組み合わせになるが、単純にこの方法が良いとか悪いとかは言えない。
〝外部Javascriptの読み込み方法あれこれ〟の続きを読む
スマホでWordPressへ写真をアップするオススメな方法
WordPressをCMS（更新システム）代わりに使ってる企業サイトが多くある。
その更新作業で画像を掲載するときは、数年前まではデジカメで撮影した画像をSDカード等を使ってパソコンにコピーして「藤 -Resizer-」なんかの簡易画像編集ソフトで縮小し、WEBブラウザでWordPressにログインしてアップロードという手順だったが、最近はスマホ一つで画像のアップが可能になった。
ただ、そのままアップすると容量が大きすぎたり顔色が悪かったりするだけで無く、不要な情報（位置情報やサムネイル）も公開してしまい住所がバレたり、モザイクが外されたりするという危険もあります。
そこでスマホからスマートに安全にアップする手順を解説しようと思います。
〝スマホでWordPressへ写真をアップするオススメな方法〟の続きを読む
パーマリンクをシンプルに
ログによると、このブログを始めたのは2005年11月で今で10年近く運営してる事になる。
Movable Typeからやっている関係もあってか、Wordpressのパーマリンク設定がURLに年月が付いてるものになっている。
例えば下記の感じのURLになる。
http://uda2.com/blog/2005/11/favicon/
月と投稿名「/%year%/%monthnum%/%postname%/」
最近の流行は投稿名だけのスタイルだ。
投稿名「/%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、このタイミングで首をはねるアニメーションを作るとは・・・」とも思ったが俺も作ってみた。
〝HTML・CSSで刀で斬るようなアニメーション〟の続きを読む
iPhoneに元号アイコン
WEBは西暦表記が多いですが書類を書いたりする際には未だ元号（年号）で記入する事が多々あります。
Siriに「今年は平成何年？」と聞いたらも答えてくれますが恥ずかしいです。
IT4コマ漫画：今って平成何年だっけ？ – ITmedia ニュース
によるとそういうアプリがあるとの事ですが年号がバッジ（右上の数字）で表現されていて見た目が微妙です。
そこで、巷にあるアイコンをカスタムするアプリの方法を使って元号の書かれたアイコンを貼れないか試してみた。
〝iPhoneに元号アイコン〟の続きを読む