piayo's blog

はっさみYO! 沖縄でまったりWeb制作

HTML5で三線作ってみた

【追記 2020.07.07】

URLを https に変更しました。

【追記 2017.02.01】
ホスト先をDropboxから自前のに変更しました。

【追記 2014.09.18】
iOS8 iPad mini でテストしたんですが、音が鳴らなくなってます。。。
しばらく様子見します。鳴るようになったら更新します。

－－－－－－－－－－－－

f:id:piayo:20130312193501j:plain

https://piayo.com/lab/html5_3shin/

三線の日（３月４日）でネタで作ってみようかと...
しかしバグだらけで終わった。
頑張ってもう一度１から作った。

・iOS6のiPhone,iPodTouch
・パソコンはChrome

でプレイできると思います。
音質が悪いですがよかったら使ってください。
あと、三線には詳しくないので悪しからず；

スマホOSとか

何がどうなってるのか知りたかったので、
現在と今後でるであろうスマホOSをいろいろと調べてみた＋メモ。

（↑間違ってたらゴメン；）
しかし多すぎ・・・どうなるの。

個人的には自分がWeb屋なんでHTML5(JS+CSS)でやりたい派です。
なので、FirefoxOSには期待したいところ。 

▼参考にしたソース
http://d.hatena.ne.jp/samril/20121229/1356834835
https://www.tizen.org/about
http://www.tizenassociation.org/ja-JP/about-jp/board-of-directors-jp
https://dev.mozilla.jp/2012/12/hacking-firefox-os/
http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/

あと、

家電やゲーム機はNetFrontなんだって。
http://jp.access-company.com/news_event/archives/2013/130108/

新しい画像がほしい

pictureタグとimg.srcsetの話。
http://24ways.org/2012/responsive-images-what-we-thought-we-needed/

 

まだ標準化されてないけど、サイト作ってて思うこととか。

 

キャンペーン系とかならタグはどうせ手打ちでコーディング。
なので、別にどっちでもいい。CSS側でレスポンシブsrc変更でもいい。

 

しかし、CMS系サイトとかなるとWYSIWYG editor。
編集者はある程度HTML知識必要だけど、エディタで画像upload＆挿入は当たり前。
その時、エディタがどうタグを挿入してくれるかだと思う。
でも、編集者がレスポンシブ配慮して、

  • 何個も画像をリサイズ＆作成保存、
  • 何個も画像をupload、
  • 何個も画像を選択挿入、

なんて現実的でない・・・。

 

今まで作ったサイトの中で対応したのは、画像をGD化。
URLはmodパスにして、src="/GD/240x320/src/path/～.jpg"とか
JS側で/240x320/を書き換えるとか、～.jpg → ～_m.jpgとか。

 

やっぱ1行でsrc内は1ファイルにしたいよ...。（楽したい

 

(以下妄想)

 

理想的な画像とゆか、希望は、新しい画像フォーマット。

 

ファイルバイナリ内に画像が何サイズも入ってる1個の画像ファイル。
となると、1ファイルのファイルサイズが数MBになりそう。
だけど、ここはブラウザ側が空気を読んでくれて、デバイスの画面サイズとかみて、
ファイルの読み込み開始位置を変更してload＆描画。

 

 ブラウザの縦横サイズを変えたり、スマホを横にしたりしたら、
野郎写真が美人のビキニ写真へ！！！

 

・・・あったらいいなぁ。ドラえもん。

 以上、妄想でした。
 
[追記: 2014.03.03]　めも。
似た感じの動き。
http://hail2u.net/blog/webdesign/combine-multiple-images-with-svg.html
 

サービスハンドラ

Gmail開いたら、URLバーに見たことのないアイコンが・・・。

f:id:piayo:20121016182603p:plain

「サービスハンドラ」というものらしい。

≫Google ChromeでメールリンクをGmailで開く設定が可能に
http://www.itmedia.co.jp/news/articles/1202/29/news036.html 

≫サイトが特殊なタイプのリンクを開くことを許可する（ハンドラ）
http://support.google.com/chromeos/bin/answer.py?hl=ja&answer=1382847 

JavaScriptでは
「window.navigator.registerProtocolHandler」
とゆうのを使ってuserに登録依頼するみたい。

初めて知った。めもめも。

えいちてぃーえむえるゴってどぉなのよ。

 

header,section,article使ってない。div,p,spanがほとんど。
結局JSでごにょごにょしたり。。。SEO無視（ロボット頑張れ）。

CSS、もう複雑すぎ。p{reset:all;} p{reset:padding,line-height;}など継承clearが欲しい。

変数、入れ子、for、[regex]セレクタとかも。

レスポンシブ、さすがにデバイス毎にDOM順番を変更するの無理、XMLみたいな構造にして表示順はcssとかで指定できたらいいなぁ。

...

自分が時代についていけてないところもアレだけど。
うまく言えないけど、XML, JSON最高。

 

久々のアップデートとかを

chrome extensionのアレを久々に・・・。
大事なmanifest2への対応です。

f:id:piayo:20120823205149p:plain

querySelectorでカレンダーを監視したり、input:type=colorにしたり。

別に大きな変更や追加機能は無い。

他のextensionをmanifest2化して、その後一緒にupdateします。

iframeにpostを覚えた。

 

とあるサイトの構築でのこと。

 

画面に出された内容をテキストファイルとかに保存(download)するボタンを実装

jQueryとか使ってHTMLを解析して、いったんobjectツリーに保存。

 

var form = document.createElement("form");
で一時的にformやhiddenを作成。そんで、window.open＆POSTでphpに飛ばす。
参考：http://d.hatena.ne.jp/ujiujise/20081218/p1

 

header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="HOGE_TEXT.txt"');
print $text_all;
exit;

 

でやればダウンロードが始まる。よっしゃ完成！

 

と思っていたが、IEでこけた。・・・ブロックしやがる。

 

いろいろ調べまくっても解決できない。

お隣の人（先輩）が一言、「iframeでやれば？」。

 

！！！

 

空のiframeを準備しとく。

<iframe id="KARA_IF" name="KARA_IF" width="0" height="0" border="0"></iframe>

CSSでは#KARA_IFでz-index:-1とかしとく。

form.targetは“KARA_IF”で飛び先をiframeへ。

 

すんなりおっけーでした。

IE, Chrome, Firefox, Opera, 大丈夫でした。

めでたしめでたし。iframe好き。