ここでいうデザインとは
スキューモフィックデザイン
メリット
- 視覚的にリッチで魅力的
- 細かく作り込まれたデザインはそれだけでまず「触ってみたい」というユーザの興味をそそります。
- 操作方法を想像しやすい
- 現実にあるものがモチーフですから、操作方法が理解しやすい。
デメリット
- 操作性の悪さ
- 現実の操作を無理やり画面上で再現することで無駄な動作が必要となった。
- 再現性によるストレス
- 再現性がひくく、現実でできるはずのことができずストレスになった。
*H1要素にしたい **H2要素にしたい 文書にしたい! *H1要素にしたい **H2要素にしたい 文書2[text:"リンクになりたい",url:"http://blog.t-lab.cs.teu.ac.jp/"] 文書3にしたい! 文書4EOFで終了したい欲望の塊のようなテキストです。これをPHPのpreg_replace関数によって正規表現によるゴリ押しでHTMLに生成します。
$html = file_get_contents('./test.txt'); //欲望の塊を読み込む $html =preg_replace('/^\*{2}(.+)(\n|$)+/m',"正規表現部分がわかりにくいと思いますが、大体このような感じになりました。正規表現はまだまだ慣れていないので、全然キッチリしてないです。実行順で優先順位を付けてかなり誤魔化している部分が多いです。特にH1とH2の差はアスタリスクの個数だけなので、このままの構文ではアスタリスクが多い方を優先しないとおかしな事になってしまいます。こういった所は改善点だと思いました。パズルみたいでノータリンの自分には難しかったです。$1
\n",$html); //H2タグの生成 $html =preg_replace('/^\*(.+)(\n|$)+/m',"$1
\n",$html); //H1タグの生成 $html =preg_replace('/^((?!<).*?)(\n|$)+/m',"$1
\n",$html); //Pタグの生成 $html =preg_replace('/\[text:\"(.*)\",url:\"(.*)\"\]/m',"$1",$html); //Aタグの生成 print $html;
幾多のタグの暴走を経て(ただの失敗)、なんとか形になりました。これに宣言等のタグをくっつければHTMLファイルの出来上がりです。本来は複数改行されたらPタグで閉じる、というようにしたかったのですが(文書3と文書4が一つのPタグ内にまとまるように)複数行にまたがる正規表現はまだ自分には難しく、上手く行きませんでした。HTMLを書く時に「一部文書で改行コード入れるのがめんどくさい」と思っていただけに、ここが上手く実現できなかったのは悔しい所でした。H1要素にしたい
H2要素にしたい
文書にしたい!
H1要素にしたい
H2要素にしたい
文書2リンクになりたい
文書3にしたい!
文書4EOFで終了したい
var hoge ={ a:'xxx', b:0, c:function(){ return 'yyy'; } };
hoge.a = 'zzz';このようにやれば,'xxx'という文字列を'zzz'という文字列に書き換えられたり…
hoge.a;このようにやれば,オブジェクトを実行でき,「xxx」という文字列を出力してくれたり,
hoge.c();このようにやれば,関数化されたオブジェクトも実行でき「yyy」という文字列を出力できます.
hoge.d = function(){ return 'xyz'; }cと同様に実行できます.
(function() { var hoge ={ a:'xxx', b:0, c:function(){ return 'yyy'; } }; $(document).ready(function() { hoge.a; hoge.c(); }); })();
B13の大矢です。えんもたけなわですね。
小ネタレベルではありますがタイトル通りJavaScriptでaudioタグを扱ってみたいと思います。jQueryも利便上用います。
今回、WEBアプリケーション等において様々な音声ファイルを流したい場合を想定していじってみたいと思います。実用性は謎です。
html5から追加された音楽や音声などのオーディオが再生できるタグです(まんま)
タグを書く際にはaudioタグ内のsrc属性で音声ソースのアドレスを指定する事もできますが、ブラウザによって対応している形式が異なります。そのため、形式が違う複数のソースファイルを持たせたいのでhtmlを以下のように書きます。
このようにogg形式とmp3形式の同じ音声ファイルを揃えれば主要なブラウザには対応できるはずです。愛用のOperaで確認したらなんとmp3再生できませんでした!やっぱりOperaってク Opera最高!
例ではaudioタグにcontrols属性がついています。jsからでしか操作を行わない場合この属性は必要ありませんが、これの属性を付ける事でオーディオプレイヤーが表示されます。(ソース表示の都合上、controls属性に空の文字列が入ってしまっていますがこれは必要ありません)
このプレイヤーはブラウザによって異なります(画像はOperaのもの)。
audioタグの基本については以下のページを参考にすると良いと思います。対応形式の詳細なども見れます。
JavaScriptを使用してaudioタグをいじってみます。基本的な操作を列挙してみます。
var AudioTag = document.getElementById("AudioTag"); AudioTag.play(); //再生 AudioTag.load(); //読み込み AudioTag.pause(); //一時停止 AudioTag.currentTime = 0; //再生時間をいじる(これは0秒に戻す)
動作を列挙しただけなので当たり前ですがマトモに動きません。jQueryによるID指定では直接叩けなかったのでgetElementByIdを用いています。
様々な音声ファイルを再生するにはaudioタグ内のsourceタグを入れ替える事で実現できます。jQueryを用いると実装が楽になるので使います。
var AudioTag = document.getElementById("AudioTag"); function soundPlay(fileName){ $("#AudioTag source").remove(); //sourceタグの削除 //指定したファイル名のmp3形式ファイルとogg形式ファイルを用意している想定でsourceタグを追加 $("#AudioTag").prepend(""); $("#AudioTag").prepend(" "); AudioTag.load(); //ファイルの読み込みを行う AudioTag.play(); }
指定されたファイル名の音声を読み込み、そのまま再生したい場合は上記のような例が考えられます。
sourceタグの追加や削除を行っただけでは変更した音声は反映されず、load操作が必要になります。また、loadを行った段階で音声再生の停止が行われます。
今回作った例は主に効果音の再生に適しています。音楽を流す場合などは再生ボタンなどを別機能として持たせると良さそうです。
audioタグの操作に関するもっと詳しい情報や動作の紹介は以下のページを参考にすると良いと思います。
拙い紹介でしたが、アイデアがあれば面白そうなものが作れそうだったので紹介してみました。今回紹介しませんでしたが、videoタグも同様にjsで制御できるようですのでメディアを扱って様々な変な物が作れそうですね。
ただ、いきなり音声が流れるのも困るので、作る物にもよりますが音声のオンオフ機能を付けたりする必要はありそうです。
最近趣味で変な物を作ってなかったのでこの記事を書いたのを機に何か作ってみようかなというやる気が湧いて来ました。
$ git checkout -b [ブランチ名]
$ git push origin [ブランチ名]
$ git checkout [ブランチ名]
$ git merge --no-ff [ブランチ名] -m "マージメッセージ"
$ git branch -d [ブランチ名]
$ git push origin :[ブランチ名]
function hoge(){}
var fuga = function(){};
hoge(); function hoge(){ alert('ふぇぇ'); }
fuga(); var fuga = function(){ alert('ふぇぇ'); };
var fuga; fuga(); fuga = function(){ alert('ふぇぇ'); };
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> #editor{ height: 300px; width: 600px; border: solid 1px; } </style> </head> <body> <div id="editor" contenteditable="true"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> #editor{ height: 300px; width: 600px; border: solid 1px; } </style> </head> <body> <div id="editor" contenteditable="true"></div> <div id="options"> <button onclick='document.execCommand("bold");'>太字にする</button> </div> </body> </html>
$ git config --global user.name [ユーザ名] $ git config --global user.email [Eメールアドレス]このコマンドを打つことで情報が登録されます.
$ git clone 〜 //〜にあるリモートリポジトリからプロジェクトをクローン(ダウンロード?する) $ git pull origin 〜 //リモートリポジトリの〜ブランチ(指定分岐先)の情報を取得 $ git add . //ファイル・ディレクトリを新規追加 $ git rm 〜 //ファイルを削除(--cacheオブションをつけるとファイル自体は削除されない) $ git commit -am 'コメント' //変更の記録(コメントをつけて更新内容がわかるように) $ git push origin 〜 //リモートリポジトリの〜ブランチに変更をアップロード $ git status //現在の状態を確認(コミットしているか,Pushしているかなど)
$ git clone git@git.com:test/test.gitこれでtestディレクトリがクローンされてきたはずです.(実際に存在はしません)
$ cd test $ touch READMEこれでREADMEというファイルが作成されました.
$ git add .
$ git commit -am 'add README'
$ git push origin masterこれでmasterブランチ(メインとなるブランチ)にPushされました.
$ git pull origin masterこれでmasterブランチの変更を取得することができます.