Category ‘制作日記’

Instagram APIでフレブルBUHI画像閲覧

Instagramでフレブル画像閲覧BUHI

InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると
Instagram APIから画像データを取得する方法
Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた
と猫を集めてるのがあり、12のメジャーなSNSのアクティブ率を比較してみた – App Ape Labによると昨年末の国内Android端末ではInstagramがアクティブ率2位になっているので、とりあえずフレブル系の犬を集めるためハッシュ名を「#buhi」と考えてたら既にありました。(海外でもブヒっていうんですね。)
ハッシュがあるなら、Instagramから画像を引っ張ってきて表示するサイトを作るだけなんでやってみた。
(さらに…)

Preprosが有料化したので乗り換えた

PreprosからSASSへ

Preprosが有料化したようで起動の度に「金払え」、定期的に「金払え」とうるさくなり、暴走する頻度が増えた。
使用頻度は高くなってるので金を払ってもいいレベルかもしれないけど、超多機能なPreprosのSCSSとjavascript最小化にしか使って無く損した気分になるので乗り換えることにした。
かといってWindowsなので乗り換え先が少ない。以前はSCOUTを使っていたが最近人気が無いようなので、コマンドライン式のコンパイラーを使うことにした。
(さらに…)

外部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%/」

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


投稿名「/%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個のスプライトを描画させるのは難しいのかもしれない。