2013.05.21
最近はIE6、7に対応させることが減ってきました。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE6 , js
2013.05.15
WEB制作に役立つデザインアーカイブサイトは数多くありますが、
その中でも見出しやメニューなどの「パーツ」ごとにまとめられているサイトです。
デザインしていると細かいあしらいで悩むことが結構あるので、
1つ1つサイトを見て回らなくてすむのはありがたいですね。
■Webデザインの"ブブン"を集めたブブンデザインアーカイブ
http://bubundesignarchive.jp/
メインビジュアル、見出しなど部分ごとにアーカイブされています。
かなりの数があります。
■見出しデザイン.com -Webデザインの"見出し"を集めたサイト-
http://midashi-design.com/
見出しのみを集めたデザインギャラリー。
■フッターデザイン.com -Webデザインの"フッター"を集めたサイト-
http://footer-design.com/
フッターのみを集めたデザインギャラリー。
■MephoBox
http://box.mepholio.com/
海外。カレンダーや404ページまであったりします。
■Elements of Design
http://www.smileycat.com/design_elements/
海外。数が多いです。
以上。
この他にも海外のサイトだと結構ありますが、
かっこよくても日本のサイトに合わなかったりして結局
使えなかったりするんですよね。
その中でも見出しやメニューなどの「パーツ」ごとにまとめられているサイトです。
デザインしていると細かいあしらいで悩むことが結構あるので、
1つ1つサイトを見て回らなくてすむのはありがたいですね。
■Webデザインの"ブブン"を集めたブブンデザインアーカイブ
http://bubundesignarchive.jp/
メインビジュアル、見出しなど部分ごとにアーカイブされています。
かなりの数があります。
■見出しデザイン.com -Webデザインの"見出し"を集めたサイト-
http://midashi-design.com/
見出しのみを集めたデザインギャラリー。
■フッターデザイン.com -Webデザインの"フッター"を集めたサイト-
http://footer-design.com/
フッターのみを集めたデザインギャラリー。
■MephoBox
http://box.mepholio.com/
海外。カレンダーや404ページまであったりします。
■Elements of Design
http://www.smileycat.com/design_elements/
海外。数が多いです。
以上。
この他にも海外のサイトだと結構ありますが、
かっこよくても日本のサイトに合わなかったりして結局
使えなかったりするんですよね。
デザイン , 参考
2013.04.03
Google Chromeのデフォルト機能である「デベロッパーツール」ですが、
ソースを見る以外にも役立つ機能が結構搭載されていることを知り、
ちょっとずつ使っていっています。
そのうちの1つにユーザーエージェントの変更があります。
1.デベロッパーツールの右下の設定アイコンを押します。
2. Settings画面が開くので、「Overrides」内の「User Agent」にチェックを入れて環境を選びます。
これだけで変更することができます！
拡張機能を入れる必要もないのでお手軽に使えるのが良いですね。
ソースを見る以外にも役立つ機能が結構搭載されていることを知り、
ちょっとずつ使っていっています。
そのうちの1つにユーザーエージェントの変更があります。
1.デベロッパーツールの右下の設定アイコンを押します。
2. Settings画面が開くので、「Overrides」内の「User Agent」にチェックを入れて環境を選びます。
これだけで変更することができます！
拡張機能を入れる必要もないのでお手軽に使えるのが良いですね。
2013.03.26
MTのグローバルモディファイアで、"sanitize"というものがあります。
ブログ設定の「HTMLを許可」に当たるもので、1（有効）と0（無効）で
指定できるのですが、特定のタグ以外を取り除く使い方もできます。
<$mt:EntryBody sanitize="b,br"$>
上記のようにすると、bタグとbrタグを残し、
それ以外のHTMLタグは全て消去して出力されます。
あまり使っていませんでしたが、
事故防止に使えるかも？
ブログ設定の「HTMLを許可」に当たるもので、1（有効）と0（無効）で
指定できるのですが、特定のタグ以外を取り除く使い方もできます。
<$mt:EntryBody sanitize="b,br"$>
上記のようにすると、bタグとbrタグを残し、
それ以外のHTMLタグは全て消去して出力されます。
あまり使っていませんでしたが、
事故防止に使えるかも？
2013.03.14
先日、Google Chromeでいくつかのログインフォームにて
ログインできなくなる問題が発生しました。
結果的にはChromeだけの問題ではなかったのですが、
自分のようにChromeの問題と思って調べている方のために
このように書いてみました。
■症状
Chromeでいくつかのログインフォームにてログインできなくなった。
他のブラウザでは普通にログインできる。
■原因
Kaspersky Internet Security 2013の「入力情報の漏えい防止機能」のせい。
http://support.kaspersky.co.jp/kis2013/error?print=true&qid=208291095
ここに書かれているように、Kasperskyの「入力情報の漏えい防止機能」には
銀行や決済システム以外のフォームでも起動してしまう場合があります。
また、起動中はShiftキーが効かなくなる不具合（？）もあるようです。
今回はデータベースにログインしようとしたのですが、
データベースのログインフォームでこの機能が起動してしまい、
しかもShiftキーが効かないためパスワードの大文字が入力できず
ログイン失敗してしまっていたんですね。
さらに、そのフォームで漏えい防止機能が起動したのはGoogle Chromeだけだったため、
原因を見誤って無駄に苦労しました。。。
■解決方法
Kasperskyの入力情報の漏えい防止機能をオフにするだけです。
「設定」＞「データ入力の保護」と進んで、
「物理キーボードの入力をキーロガーから保護する」のチェックを外せばOK。
ログインできなくなる問題が発生しました。
結果的にはChromeだけの問題ではなかったのですが、
自分のようにChromeの問題と思って調べている方のために
このように書いてみました。
■症状
Chromeでいくつかのログインフォームにてログインできなくなった。
他のブラウザでは普通にログインできる。
■原因
Kaspersky Internet Security 2013の「入力情報の漏えい防止機能」のせい。
http://support.kaspersky.co.jp/kis2013/error?print=true&qid=208291095
ここに書かれているように、Kasperskyの「入力情報の漏えい防止機能」には
銀行や決済システム以外のフォームでも起動してしまう場合があります。
また、起動中はShiftキーが効かなくなる不具合（？）もあるようです。
今回はデータベースにログインしようとしたのですが、
データベースのログインフォームでこの機能が起動してしまい、
しかもShiftキーが効かないためパスワードの大文字が入力できず
ログイン失敗してしまっていたんですね。
さらに、そのフォームで漏えい防止機能が起動したのはGoogle Chromeだけだったため、
原因を見誤って無駄に苦労しました。。。
■解決方法
Kasperskyの入力情報の漏えい防止機能をオフにするだけです。
「設定」＞「データ入力の保護」と進んで、
「物理キーボードの入力をキーロガーから保護する」のチェックを外せばOK。
2013.03.12
これまで、
・記事が所属しているカテゴリー
・記事が所属しているメインカテゴリー以外のカテゴリー
この2つはMTタグで取得できましたが、
何故か「記事が所属しているメインカテゴリー」を取得するタグは
ありませんでした。
（メインカテゴリーの名前とパスだけなら取得できました）
かなり不便に感じていたのですが、
実はMT5.1からはそのタグが追加されていたようです。
<mt:EntryPrimaryCategory> </mt:EntryPrimaryCategory>
または
<mt:EntryCategories type="primary"> </mt:EntryCategories>
上記のいずれかで、その記事が所属するカテゴリーの中で
メインカテゴリーのみを扱うことができます。
この調子でどんどん便利になってほしい。
・記事が所属しているカテゴリー
・記事が所属しているメインカテゴリー以外のカテゴリー
この2つはMTタグで取得できましたが、
何故か「記事が所属しているメインカテゴリー」を取得するタグは
ありませんでした。
（メインカテゴリーの名前とパスだけなら取得できました）
かなり不便に感じていたのですが、
実はMT5.1からはそのタグが追加されていたようです。
<mt:EntryPrimaryCategory> </mt:EntryPrimaryCategory>
または
<mt:EntryCategories type="primary"> </mt:EntryCategories>
上記のいずれかで、その記事が所属するカテゴリーの中で
メインカテゴリーのみを扱うことができます。
この調子でどんどん便利になってほしい。
MT5
2013.02.12
テキスト（複数行）のカスタムフィールドを出力するときの、
改行やpタグの制御についてです。
まず、テキストフィールドには下記のように入っているとします。
あいうえお
かきくけこ
さしすせそ
これを改行を活かして出力するには、
下記のようにします。
※本文の「改行を変換」と同様になります
<$mt:customField convert_breaks="1"$>
出力
--------------------
<p>あいうえお<br />
かきくけこ<br />
さしすせそ</p>
--------------------
逆にpタグやbrタグが入らないようにするには、
convert_breaks="0" とします。
<$mt:customField convert_breaks="0"$>
出力
--------------------
あいうえお
かきくけこ
さしすせそ
--------------------
pタグで囲まれずに改行が<br>になるようにするには以下のようにします。
<$mt:customField convert_breaks="0" nl2br="1"$>
出力
--------------------
あいうえお<br />
かきくけこ<br />
さしすせそ
--------------------
参考にしたサイトはこちら。
カスタムフィールドの段落と改行の制御について | タグ：カスタムフィールド | MovableType | いろいろコードスニペット
改行やpタグの制御についてです。
まず、テキストフィールドには下記のように入っているとします。
あいうえお
かきくけこ
さしすせそ
これを改行を活かして出力するには、
下記のようにします。
※本文の「改行を変換」と同様になります
<$mt:customField convert_breaks="1"$>
出力
--------------------
<p>あいうえお<br />
かきくけこ<br />
さしすせそ</p>
--------------------
逆にpタグやbrタグが入らないようにするには、
convert_breaks="0" とします。
<$mt:customField convert_breaks="0"$>
出力
--------------------
あいうえお
かきくけこ
さしすせそ
--------------------
pタグで囲まれずに改行が<br>になるようにするには以下のようにします。
<$mt:customField convert_breaks="0" nl2br="1"$>
出力
--------------------
あいうえお<br />
かきくけこ<br />
さしすせそ
--------------------
参考にしたサイトはこちら。
カスタムフィールドの段落と改行の制御について | タグ：カスタムフィールド | MovableType | いろいろコードスニペット
MT
2013.02.06
●カテゴリーA
・サブカテゴリーA
・サブカテゴリーB
・サブカテゴリーC
●カテゴリーB
●カテゴリーC
上記のような構造で、例えばサブカテゴリーAのアーカイブページに、
親であるカテゴリーAの「カテゴリ月別アーカイブリスト」を出力しようとしても、
サブカテゴリーAのものが出力されてしまいました。
ソースは下記のような感じです。
<mt:TopLevelParent>
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:TopLevelParent>
散々悩みましたが、最終的には次のようにすることで解決できました。
<mt:BlogID setvar="blog_id">
<mt:Blogs include_blogs="$blog_id" ignore_archive_context="1">
<mt:IfCategory name="カテゴリー名">
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:IfCategory>
</mt:Blogs>
ブログIDからの指定にして「ignore_archive_context="1"」と入れることで、
アーカイブページでも全ての記事を参照できるようになるそうです。
・サブカテゴリーA
・サブカテゴリーB
・サブカテゴリーC
●カテゴリーB
●カテゴリーC
上記のような構造で、例えばサブカテゴリーAのアーカイブページに、
親であるカテゴリーAの「カテゴリ月別アーカイブリスト」を出力しようとしても、
サブカテゴリーAのものが出力されてしまいました。
ソースは下記のような感じです。
<mt:TopLevelParent>
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:TopLevelParent>
散々悩みましたが、最終的には次のようにすることで解決できました。
<mt:BlogID setvar="blog_id">
<mt:Blogs include_blogs="$blog_id" ignore_archive_context="1">
<mt:IfCategory name="カテゴリー名">
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:IfCategory>
</mt:Blogs>
ブログIDからの指定にして「ignore_archive_context="1"」と入れることで、
アーカイブページでも全ての記事を参照できるようになるそうです。
MT
2013.01.08
製作用メモ。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。
jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801
実践できていたのは1つ目と5つ目くらいでした。。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。
jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801
実践できていたのは1つ目と5つ目くらいでした。。
jQuery , JS
2012.12.26
ボタンクリック時などのイベントハンドラの中で、
イベントが発生したムービークリップ自身を扱う書き方。
_btn.addEventListener(MouseEvent.CLICK, xClick);
function xClick(evt:MouseEvent):void {
var target_mc:MovieClip = evt.target as MovieClip;
}
上記のように書くことで、
_btn（クリックしたボタン）を「target_mc」として扱うことができます。
AS2からの移行で結構悩んだとこだったりします。
イベントが発生したムービークリップ自身を扱う書き方。
_btn.addEventListener(MouseEvent.CLICK, xClick);
function xClick(evt:MouseEvent):void {
var target_mc:MovieClip = evt.target as MovieClip;
}
上記のように書くことで、
_btn（クリックしたボタン）を「target_mc」として扱うことができます。
AS2からの移行で結構悩んだとこだったりします。
as3.0 , flash
