パターンA(簡易版)
以下のようなケースで使います。
Sample
HTML
<div id="gauge" style="-moz-background-size: 70% 100%;-webkit-background-size:70% 100%;-o-background-size: 70% 100%;background-size: 70% 100%;">Loading...70%</div>
CSS
#gauge {
width: 100px;
height: 12px;
padding: 1px 4px;
border: 1px #000 solid;
font-size: 10px;
line-height: 12px;
color: #fff;
text-shadow: 1px 1px 0 #000;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
-moz-transition: background-size 1s;
-webkit-transition: background-size 1s;
-o-transition: background-size 1s;
transition: background-size 1s;
}
javascriptでゲージの長さを変える時はHTMLのbackground-sizeの”70%”の部分を書き換えます。
横幅を0%にした時、iOSのSafariではゲージの色が1px見えてしまうため1pxのborderを付加しています。
(backgroundはborderの背面に回り込むので、1pxのゲージが見えなくなる)。
そのため見た目上は±2%の誤差が出ますが、0%が1%になるよりは誤解されにくいのでこうしています。
より正確な表示をするならBパターンを使った方がベター。
パターンB(詳細版)
以下のようなケースで使います。
Sample
HTML
<div id="gauge-wrapper">
<div id="gauge" style="width: 70%;">Loading...70%</div>
</div>
CSS
#gauge-wrapper {
position: relative;
width: 100px;
height: 14px;
border: 1px solid #000;
background: #666;
background: -moz-linear-gradient(top, #666 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#000));
background: -webkit-linear-gradient(top, #666 0%,#000 100%);
background: -o-linear-gradient(top, #666 0%,#000 100%);
background: -ms-linear-gradient(top, #666 0%,#000 100%);
background: linear-gradient(to bottom, #666 0%,#000 100%);
}
#gauge {
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 1px 4px;
font-size: 10px;
line-height: 12px;
white-space: nowrap;
color: #fff;
text-shadow: 1px 1px 0 #000;
background: #6db3f2;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
javascriptでゲージの長さを変える時はHTMLのwidthの”70%”の部分を書き換えます。
position: relative; と position:absolute; は省略可能ですが、
widthの書き換え時にブラウザのリフローが発生して描画の負荷が大きくなるので付けます。
HTML
<ul id="tabs">
<li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
<li>タブB</li>
</ul>
<section class="content">
<!-- タブAの内容 (初期状態では表示) -->
</section>
<section class="content" style="display: none;">
<!-- タブBの内容 (初期状態では非表示 -->
</section>
javascript
var $tabs = $("#tabs li");
$tabs.click(function(){
$(".content").hide().eq($tabs.removeClass("on").index(this)).show();
$(this).addClass("on");
});
タブと内容はHTMLソース上での並び順を合わせる必要があります。
2番目の#tabs li が選択された時に2番目の.content が表示される仕組みです。
タブの増減はhtml側の編集のみ。
<ul id="tabs">
<li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
<li>タブB</li>
<li>タブC</li>
</ul>
<section class="content">
<!-- タブAの内容 (初期状態では表示) -->
</section>
<section class="content" style="display: none;">
<!-- タブBの内容 (初期状態では非表示) -->
</section>
<section class="content" style="display: none;">
<!-- タブCの内容 (初期状態では非表示) -->
</section>
こうするとみっつになります。
]]>ul (list-style-type:desc; の代替)
ul {
list-syule-type: none;
}
ul li {
position: relative;
padding: 0 0 0 1.4em;
}
ul li:before {
content: "・";
position: absolute;
left: 0;
}
ol (list-style-type:decimal; の代替)
ol {
counter-reset: num;
list-syule-type: none;
}
ol li {
counter-increment: num;
position: relative;
padding: 0 0 0 1.4em;
}
ol li:before {
content: counter(num)".";
position: absolute;
left: 0;
}
]]>内部キーワードリンクは以前「SEO smart link」で作成していましたが、いつの間にか外れてしまった(あと、日本語も使えなくなっていた)のでWP Keyword Link で張り直しました。
以下、手順メモ。
1.プラグイン導入
プラグイン画面から「Export to Text」「WP Keyword Link」で検索、
または各配布サイトから入手してインストール&有効化。
2.記事名とURLのセットをTXT形式でエクスポート
Tools > Export to Text から エクスポートしたいデータを選択します。
私の場合はブログ記事内に美術用語が出てきたらその記事にリンクしたいので、
・「Category」で「美術用語」以外のチェックを外す
・「Select And Reorder Data To Generate:」で「Title」と「Permalink」以外のチェックを外す
の設定にし、その他の設定項目は全て「All」としました。
「Generate Preview」で出力イメージを確認できたら、
「Download as TXT file」から記事名とURLが対になったtxtファイルをDLします。
3.エクスポートしたデータをWP Keyword Link に流し込み
2.で生成したテキストファイルをWP Keyword Linkの形式に書き換えます。
私の場合はテキストエディタで以下の作業を行いました。
・拡張子を.csvに書き換え
・設定項目(nofollowとか)を追加。日本語で使うためには「zh_Cn」を1にする
・1行目と最後の2行をサンプルデータからコピペ
・区切りのタブをコンマに置換
・URLとキーワードをダブルクオート(“)で囲む
あとは「Import and Export File」から「Import from file」を選択し、
作成したCSVファイルをアップロードして完了です。
後から追加した用語に対して自動でリンク追加はできませんが、
用語が増える予定もないので一旦これで済ませることにしました。
油彩用の地塗りには、シルバーホワイトが適している。
ジンクホワイトは亀裂や剥離につながる可能性があるので使わない。
チタニウムホワイトは地塗りにも使用できるが、人工的な白色があり乾燥も遅いため扱いにくい。
またフレークホワイト、ミキシングホワイトのように複数の白色を混ぜてつくられた絵具は、それぞれの白色の特性に左右される。
アクリル絵具や透明水彩等の水性絵具へは、アクリルジェッソが適している。
アクリルジェッソは多孔質でざらざらしているため、上から透明水彩を塗ってもはじかない。
でんぷん糊には炊いた白米を潰した糊や、強力粉や上新粉を煮た糊が使われる。
硬さを増すために砥の粉を加えたり、防腐剤としてホルマリンが添加されることもある。
そのため専用のツールや実機を使用して検証を行います。
この記事では3パターンの確認方法を書いています。
PC上でのエミュレーション | 実機確認 | デバッグ用のツールを使用する | |
---|---|---|---|
メリット | 様々な環境でどう動作するか見られる | PC上では再現しきれない不具合もカバーできる | 不具合の原因箇所がわかりやすい |
デメリット | 実機と動作が完全に一致しない場合がある | 本体や確認環境を用意しないと検証ができない | 扱うのに知識が必要 |
実機でswfファイルをダウンロード&再生する方法は、各キャリアごとに異なります。
docomo | swfをサーバーにアップロード後、DL |
---|---|
au | PCからswfファイルをメール添付 swfをサーバーにアップロード後、DL 待受として設定したり、データフォルダからすするには、実行できます。 |
Softbank | swfをサーバーにアップロード後、ブラウザで開く Softbankはデータフォルダ内でキー入力を拾えないため、ASでoncommandを使用している場合の動作検証はブラウザで行います。 |
・trace関数を使う
ActionScriptの関数のひとつで、動作確認に使われます。
ASの動作がわからない時、変数にどんな値が代入されているかが見られます。
・Flash Decompiler Trillixを使用する
swf内部の画像やシェイプ、AS等を見られるツールです。
動作がおかしい場合の不具合箇所を見つけるのに使います。
携帯向けのFlashです。待ち受け、Flashゲーム、きせかえ、携帯向けサイト、デコメなどで使われています。
バージョンが1.0から3.1までありますが、古い機種にも対応させるため1.1が主流。次に2.0。
この記事はだいたい1.1向けに書いています。
Flash(swfファイル)を作成するためのソフトと、作成したデータを確認するためのソフトを用意します。
●作成ツール
・Flash MX 2004以降のFlashが、FlashLite1.1に対応しています。
MX2004またはFlash8では、Professional版を使用してください。
お手持ちのFlashがBasic版かMX2004以前の場合は、Flash4でパブリッシュすると携帯でも動きます。
これはFlash Lite1.1が、Flash4を基にして携帯用のスクリプトが動くように拡張されたものだからです。
Flash4で携帯向けのActionScriptを書くとパブリッシュ時にエラーが出ますが、書き方さえ合っていればちゃんと動作します。
・フリーソフトで揃えるならPalaFla、またはSuzukaが使えます。
この記事ではFlashMX 2004以降での参考URLを貼っていますので、適宜読み替えてください。
●動作確認用のツール
・Adobe Device Central
端末上での動作をシミュレーションでき、Heapメモリ消費量も見られます。
FlashCS3以降に付属しています。
・iモードHTMLシミュレータII
携帯向けFlashのシミュレーションができます。
電池電波や時刻表示関連の値を変更することができ、待受Flashのテストに最適。
電池電波は最大値の変更ができますので、auやSoftBank向けのActionScript検証にも使えます。
・FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト Flashの枝
パソコンで再生するためのFlashの作り方を説明しているサイトですが、基本的な操作方法を覚えるのに便利なので挙げています。
こちらの目次の「シンボルとインスタンス」から「マスクとは?」までを一通り読んで、更に余裕があれば「ActionScript とは?」から「gotoAndStop() gotoAndPlay()」までを読んでください。
上に挙げなかったページは、Flashの操作に慣れるまではまだ読まないことをおすすめします。
パソコン向けのFlashと携帯向けのFlashでは、少しずつできる事が違います。
このサイトには携帯Flashで出来ないことも書いてありますので、全てのページを読むと混乱してしまうかも。
動く待ち受けはFlashの操作を覚えれば作れますが、
電池残量によって絵柄が変わる待受や、時計付きの待受を作るにはActionScript(AS)という簡単なプログラムを書く必要があります。
・Design Flash Wall Gallery!
FlashLite1.1でサンプル付きのActionScriptリファレンスがあります。
最新機種に合わせるにはちょっと記述が古い(09年11月現在)ので、_level0.KAYACのまとめ記事や、このブログの記事もあわせて読んでください。
ここまで挙げた記事よりも、もう少し細かいことの書いてある入門記事です。
・Flash Lite 1.0/1.1メモ
・Flash Lite入門講座 第1回 日本のFlash Liteの仕様
・Flash Lite 1.1 の基本が分かる8つのポイント