ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
YouTubeを効果的に見せるための12の隠しパラメータ
YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されている訳ではありませんが）をつけることで見栄えや動作を変更することができます。 以下の動画はパラメータを付与してみたものです。テーマおよびプログレスバーの色の変更して、セピアカラーの動画にマッチしたデザインにしています。再生後の関連動画の非表示や再生開始位置の変更なども行っています。 ということで以下、隠しパラメータの紹介です。すべてのパラメータは、次の設定例のように、src属性に設定したURLの末
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
Facebookがテストユーザー作成・編集画面をリリース
Facebookがテストユーザーの作成・編集画面をリリースしました。 これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。 テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項・３項や「Facebookページプロフェッショナルガイド」の96～102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ（＝登録のみ）で大丈夫だと思います。 テ
Movable Type 4.1 / MTOS における配列とハッシュの利用方法
公にアナウンスされていないようですが、MT4.1/MTOS では変数で配列とハッシュの操作が可能になり、変数処理がよりプログラマブルになりました。 ということで、以下に利用方法をまとめてみました。 １．配列 配列とは、同じ型のデータを連続的に並べた集合を指します。同一の変数名にインデックス（添え字）を付与することでデータを識別することができます。 例えば、week という変数に、Monday から Sunday までの文字列を設定するには、 week[0] = 'Monday' week[1] = 'Tuesday' week[2] = 'Wednesday' week[3] = 'Thursday' week[4] = 'Friday' week[5] = 'Saturday' week[6] = 'Sunday' という感じになります。 MTSetVar による配列の設定 MTSetV
Split プラグイン
Movable Type 4 でPerl の split 機能を提供するグローバルモディファイアを作りました。 １．Split プラグインのダウンロード 下記の Split.zip をクリックして、プラグインアーカイブをダウンロード。 Split.zip ２．Split プラグインのアップロード・インストール プラグインアーカイブを展開し、中にある Split フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロード。 システム管理画面のプラグイン一覧で、「Split ～」が表示されればインストール完了です。 ３．使用例 split モディファイアの値に区切り文字を設定すれば、区切り文字で split した配列変数を返却します。 次のサブテンプレートを例に示します。これは変数 foo に設定した、「a AND b AND c」とい
JavaScript で文字をトリミングする（改善版）
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字（2バイト）を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字（"M"とか"W"のような幅の広い文字）を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を
小粋空間: Movable Type で再構築エラーになる場合の原因と対処
Movable Type 3.2-ja-2 で再構築エラーに関する質問を頂くことが多いので、本エントリーにまとめました。 １．エラー現象 「再構築エラー」とは、主に下記の現象を指します。 500エラーが表示される テンプレート内で MTLink タグを使用していると、そこでエラーとなる（場合がある） いわゆる「500エラー」とは、 Internal Server Error つまり内部サーバエラーのことで、CGI等のプログラムが何らかの理由で実行できない、あるいはプログラムにエラーがある場合に発生します。 MTLink タグのエラーも500エラーと同様で、MTLink タグのエラーに見えるのは、たまたまそこでエラーメッセージを表示できる実装になっているからではないかと推測しています。 ２．再構築エラーの原因 Movable Type で再構築エラーが発生する原因としては、これまで頂いたご質
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
