[js,css] テンキーがついているスマートフォンの罠

by

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定的に印象づけた
３〜４インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか？

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはauやdocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

続きを読む

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

by

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

続きを読む

[css,js] Retinaディスプレイ対策

by

スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。

500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。

続きを読む

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

by

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

続きを読む

[jQuery] ユーザエージェント(userAgent)判別プラグイン

by

ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。
パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。


直接見る

続きを読む

[HTML5] アプリケーションキャッシュの使い方

by

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

続きを読む

ScanSnap1500とPhotoshopでコミックスの電子書籍自炊メモ

by

まるっと業者に頼めばいっかーと思って数えてみたら漫画の単行本だけで３００冊…
1冊150円が相場の業者に５万近く払うなら周辺機器揃えて自前でやっつけた方がオトクじゃないか？と思ったので
自炊に名高いスキャナーFUJITSU ScanSnap S1500と裁断機を手に入れましたヽ（´∀｀）ノ

続きを読む

ZeroMail ver 1.4.6～1.4.7

by

元々1.4.6として公開するつもりだったのですが、新しい機能がちょっぴり増えたので1.4.7にして公開しました。
変更点は以下の通りです。

未入力項目の表示スキップ

私自身ZeroMailを利用してアンケートフォームや予約フォームなど、項目が多いメールフォームを作る機会があったのですが
そういうフォームだと入力されていない項目が並ぶと非常に見にくいんですよね。
コメントでそれについて指摘頂いたのですが、その際「表示しないようにしたらどうか」と提案頂きまして
ソレダ！！と思ったので実装してみました。

設定はinit.phpの「inputのnameとその名称設定」の下に新しく追加してあります。
デフォルトはfalseです。これをtrueにすると有効になります。

マルチバイト文字を含むメールが送れるようになりました

そもそもこれは翻訳機能も付けないと意味が無いのでは…と思ったのですが、サポートの為に前倒し実装しました。
init.phpの先頭に文字コード設定があるのですが、これは確認やエラーなどのzeromail.phpが介して表示するページの文字コードのことで、メールエンコードには関係ありませんでした。

で、今回新しくその下にメールエンコードの設定を設けました。
初期は ja　になっていてISO-2022-JPで送信しますが、これを uni　にするとメールエンコードがUTF-8になり
中国語、韓国語、アクセントが付いたフランス語などのマルチバイト文字の送信が出来るようになります。

※サーバーによってはzeromail.phpが行う設定変更を受け付けてくれない場合があり、
機能が有効にならないことがあります。

続きを読む

【初音ミク】 フルCSSでみくみくにしてあげる♪ 【してやんよ】

by

3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。

そういえば3/9はミクの日だな～ (ﾟω｀)ﾁﾗｯ 3/9はミクの日だよなあ～(ﾟω｀)ﾁﾗｯ

その昔、マクパペットをフルカスタムしたり…

あの楽器を再現したり…

あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS

…した過去があるのでつい反応。

CSSで初音ミク祭りですね分かります

したらすかさず煽られた。

いや〜いくらCSS3がスゴイとはいえ初音ミクは難しいですよねえ？(ﾟω｀)ﾁﾗｯ

…………CSS3に不可能はない！！

心の中で啖呵を切った。そして釣られた事に気付いた午後６時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。

※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね！
（IE6-8で見るのはダメ！絶対！）

jsdo.miku forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ブラウザ起動するのﾏﾝﾄﾞｸｾという人の為の画像はこちら。（左はノーマル素体）

jsdo-miku はちゅねミク

我ながら変態なソースだなと思いました。だがそれがいい。

髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて３つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。

CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。　や　The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。

来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます 😀

ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中！

続きを読む

HTML+CSS+JavaScriptでバトルゲーム（のバトルシーン）作ってみた

by

jsdo.itのSPECKというイベント？第一弾のお題がゲームに関するものだったので、
ゲーム好きとしては何か作っとかないかんやろ！と思ってMooToolsで組んでみたのがこれです。
動作確認はFirefoxとChrome、Safariで。IEでは見れないです。

forked from: GYAOS_sample – jsdo.it – share JavaScript, HTML5 and CSS

目新しい演出はなにもありませんｗｗｗｗｗ
参考の動画見てて思ったのは、戦うのがプレイヤーが飼育しているモンスターなら
ボタン押して即行動っていうのは不自然じゃないかしら？ということで
指揮して動かすっていう感覚を作れたらそれでよかったんや…。

目指したのはターン制ではなくリアルタイムバトルなんですけどね、妄想するのと実際組むのとでは難易度が雲泥の差過ぎ。
ゲームプログラマーってすげぇや！と改めて尊敬した次第です。
細かいところまで作るには大分時間が足りなかったけど
HTML+CSS+JavaScriptでバトルゲームは作れるってことが分かったのでよしとします。

続きは中身についてのメモ（MooToolsのマニアックな話）です。

続きを読む