with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

CSSだけでつくる、アニメーションするネオンキューブ

久しぶりに、ブラウザへの実装がだいぶ進んできたCSS3のfilterプロパティを使って、 勉強がてら1作品作ってみることにしました。できたのがこちら。See the Pen CSS3 Neon Cubes by hiro (@githiro) on CodePen.JavaScriptは使わず、動きと回転はanimationプ…

SVGでドーナツ型チャートに特化したjQueryプラグインを作った

予告通り、このチャートをSVGで書き直しました。 前バージョンとは違って、マウスオーバーするとTooltipが出て数字がわかるようになりました。 作ってみた感想: グラフはSVGで作ったほうがいい。但しcanvasより面倒。 SVGで円弧を描くのはなかなか大変。。。…

Canvasでドーナツ型チャートに特化したjQueryプラグイン作った

ドーナツ型チャートに特化したjQueryプラグインを試しに組んでみました。 Chart.jsのソースを大いに参考にさせてもらいました。 (Chart.jsは読みやすくてお勧めです)・初期段階でドーナツ状のグラフが通るレールを予め描画するようにした。 ・色つきグラフ部…

マウスオーバー時にアニメーションするボタン Part2 作った

CSS

CSSだけで頑張るシリーズ、アニメーションボタン編 Part2http://www.oregongridiron.com/ ←このサイトのボタンがかっこよかったので どうやってるか調べて自分なりに実装しなおしてみた。かっこいいエフェクトができるけど、html側で必要なタグが多い。。。

マウスオーバー時にアニメーションするボタン Part1 作った

CSSだけで頑張るシリーズ、 アニメーションするボタンに挑戦中。 マウスオーバーでアニメーションします。 ボタンだけだとつまんないのでぼかした画像+図形パターンという最近の 流行デザインの背景もつけてみた。transformだけでいろんな表現ができること…

Canvasでjpgを透過PNGに変換するjQueryプラグイン作った

背景を透けて見せる等ができる透過PNGを、canvasで作成できる(グラデーションアルファマスクを作る)jQueryプラグイン作った。透過PNGはRGB+Alphaチャンネルなので、今回みたいに写真の透過PNGだと 普通にサイズが1M近くになっちゃう。でもデザインの都合上透…

Sass(Compass)でRetina用backgroundを同時に書き出すmixinを作った

Retina(に限らず高解像度)用の画像を背景画像として書き出すとき、 今までは全部手作業でやってたんだけども、 高解像度向けの@mediaのベストプラクティスが日々変化(進化)するので、毎回grepして修正するのが面倒。 @mediaの記述位置はCSSの末尾にまとめて…

Input type="radio"をCSSだけで装飾する

CSS

CSSだけで頑張るシリーズ、今回はradioボタンに挑戦。FirefoxでもIE10でも非対応なので、完全にスマホ用です。 といってもプロダクションで使うのはまだ気が引けますね。 これをベースにfallbackをきちんと作れば、何とかいけるかもってレベル。。。iOS6, An…

Mobile Safariのフォームからのfile uploadで、png24/32がjpegになってしまう

結論から。 iOS6から可能になった、ファイルをアップロードするinput type="file"ですが、 表題にもあるように、PNGを送信する前に強制的にjpegに変換されてから送信されるようです。今のところ解決策は見つかっていません。 ※iOS7は未確認。解決してるとい…

Androidの2.X系だけでJavaScriptのParseErrorが起こった時の対策

PC向けだけに作製していた画面を、 スマホ向けに修正していた時にぶち当たった問題。 解決したので共有します。Android2.Xでだけ、JavaScriptの特定の行でParseErrorが起こって、 それ以降のスクリプトが読み込まれないという現象が。。8/2発表の最新の統計…

CSSのappearanceがFirefoxで効かない場合の解決策

CSS

# 2014.8.25 重要な追記 このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。 元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論&試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使…

CSSのみで作るスタイリッシュなボタン

最近CSS3を使っていろいろ試行錯誤してるけど、 そのうちの一つを放出。

Canvasで雪っぽい表現を作る

Canvasの勉強をしたかったので、以下のコードを参考に、 雪が降ってるっぽい表現を作ってみました。 http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles要するに、canvasで 1:画面をすべて黒く塗り…

input type="file"をCSS3で装飾 改善版 IE7〜対応。

すごく昔に書いた、input type="file"をCSSとJavaScriptで綺麗に装飾するものの改善版を作りました。Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。■内容 ・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。 ・…

RFC非準拠(@前にドット、ダブルドットがある)のアドレスにメールが送れない問題を解決する(PHPのSendmail編)

PHPのSendmail関数でメール送信しているWEBアプリで、 稀に送信自体がされないという現象が起こっていた為、原因を探っていたら分かったことです。。結論としては、 ・メールアドレスの@直前にドットがある ・または@より前のどこかにダブルドットがある 場…

主にiOSで入力補助機能をオフにする(スペルチェック, 自動補完,先頭文字の自動大文字化)

以下のコードで可能。 <input type="text" name="hoge" autocorrect="off" autocomplete="off" autocapitalize="off"> デモ: 以下を実際にiOSなどでフォーカスしてみて下さい。 先頭文字の大文字化はAndroidでは行われないことが多いのでiOS限定で効果を発揮する場合がほとんど。autocorrect: スペルチェック機能 autocomplete: 自動補完 autocapitaliz…

Android実機から自PCのlocalhost(開発環境)へアクセスするには?

結論から書くと、調べた限りでは以下の方法しかなかった。。。・Android実機→(セキュアなWifiネットワーク)←ローカルPC・Android実機→WEBサーバ→(SSHでポート転送)→ローカルPCAndroid実機からUSBケーブルでPCにつなぐことは出来るけど、 そもそも開発環境が…

CSS3の-ms-linear-gradientが、いつの間にかいらない子になってた

CSS

最近はCSS3のlinear-gradientをよく使うようになってきたこともあり、 今linear-gradientはどう書くのが適切なのかを調べてみました。 今までは、毎回コツコツ書いてられないので、ColorZillaのCSS Gradient Generatorを使ってたのですが、いかんせん長い! …

シンプルなマウスオーバー時のツールチッププラグインを作ってみた

最近勉強してるjQueryでプラグイン作ってみた。 作り方などは以下を参考に。。。 http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/↑「jQueryプラグイン、まだ作れないんですか?」と、NET TUTSにしては挑発的なタイトルだった…

jQueryでhover時の処理を指定時間だけ遅らせる方法

jQueryを使っているサイトで、以下のことをやりたいときにどうすればいいのか、調べてみました。 ・特定要素にmouseenterした時に、別途作ったプルダウンで情報を出したい。・そのプルダウン内には、マウスオーバー時にDBへAjaxでリクエストし、動的に取って…

text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応

まんまです。使えるようになってるのを最近知りました。text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それ…

iCloudを使おうとしたら「このAppleIDのメールアドレスは確認できません」と認証で弾かれる場合の解決法

Mac

iPhone4Sの受け渡しがSBのシステムダウンによって遅れに遅れてて、 当然、予約開始数日たってノコノコ予約した私なんかに順番が回ってくるはずもない(涙)ため、気分だけでも味わうかってことで、OSをLion 10.7.2にアップグレードしました。 恒例の1.4Gくらい…

jQueryでのDOM操作にはfilter()が便利ということに今更気づいた

お世話になることの多いNETTUTSで、jQueryのDOM検索効率化を上げるためのTipsが紹介されてました。 Quick Tip – jQuery Newbs: Stop Jumping in the Pool 内容はすっごく基本的なことなのだけど、 filter()の便利な使い方について言及されてたので自分用メモ…

iPhone4S予約した

近くのSoftBankショップでiPhone4Sの予約してきました。孫さん自身「ムチャクチャ」と言っていた3G/3GSの割賦残り分を実質無料にするキャンペーンの対象者に見事に当てはまっていたため。 ※キャンペーンは10/14からと書いてありますが、当然それ以前の予約分…

php+mySQL+jQueryで、コメントフォームのajax化を試す

jQueryの簡易ajax通信関数、POST()を使った処理を色々試してみたくて最近やったことを放出します。php+mySQL+jQueryで、コメント投稿をajaxで表示するのを作ってみた。 ネタ元はNETTUTS。ってか、ほぼそのまんまやっただけw Learn how to AJAXify Comment F…

RedmineをMacOS X Lionにインストールする=BitNami::RedMineが使えた!

持ってるMacをボロPPCからLion搭載のMacにかえたのをきっかけに、俄然開発意欲が復活!前から気になってたプロジェクト管理のWEBアプリ、Redmineを入れてみました。 (※ちなみに本家では見つからなかったPPC Mac用Bitnami::redmineはここで配布されてたので…

jquery.maximage.jsで、画像に最小サイズを指定する機能を追加する

よくFlashサイトなどで見られる、写真をフルスクリーンに表示する機能をJavaScriptで実現するjQueryプラグイン、"jquery.maximage.js"。 そこそこ軽くて、おせっかいな機能もあんまりついてない、お気に入りのプラグインです(スライドショー機能はクロスフェ…

jQTouchのフォームをページ遷移でsubmit

iPhoneやAndroid向けのサイトを簡単に作れるフレームワークと言えば、最近話題のSencha TouchとかjQuery Mobileとか、いろいろありますが。動作が速くてjsコードも短め、手軽に実装できるのはやはりjQTouchなのではないかと。最近jQTouchの担当者がSencha To…

input type="file"をCSSで装飾(複数input対応版)。

【追記】よりコンパクトに、デザインも改善した新しいものとして作り直しました。 http://me.hateblo.jp/entry/20121226/1356479631 せっかくブログ作ったので、 趣味でやってるhtmlやCSS、php関連のものを 書いていきます。まずは表題のもの。 やってみたら…