Web

はてなブログのデザインテーマを作りました

2013年2月20日、はてなブログにテーマストアという機能がリリースされたのをご存知でしょうか? まだ知らないという方は一度見てみてください。リリースされた時よりもテーマ数も増えていますので、一度見たという方ももう一度みてみるとおもしろいと思いま…

B!KUMAテーマの画像にリボンをつけて、かわいいわたしを演出する。…ことができなくなった…けどちょっと何とかした

.entry-content object,.entry-content iframe,.entry-content span[itemtype] img,.entry-content .hatena-fotolife img,.entry-content .http-image img {max-width:628px;border: 6px solid #fff !important;-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.…

スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル(font size自動調整をきるなど)

前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対…

With by MapionとWebサービスのコミュニティについて

今回はあまりメディアにも露出されていないアプリに関してちょっと紹介してみようと思います。皆さん好きなアプリは多々あると思いますが、3G初期からのiPhoneユーザーとして私がもっとも重要だと思っているアプリはやはりマップアプリだと思います。これは…

Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して

Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがありま…

IE6のoverflow:hiddenとposition:relativeで起こるバグの解消

タイトル通りですが、 jQueryとかを使って横にぬるぬるスライドするギャラリー的なものを作るときに、何となく頭の中で考えると たぶん横に並べておいて、overflow:hiddenでマスクかけて、leftパラメータをいじってヌルヌル動かすんだろうなぁと想像する。 …

時刻入力をスライダーでAJAXに行えるようにするjQuery Plugin「timeSlider.js」作りました。

「よくカレンダーとかで日付入力を補助するJavascriptUIはあるけど、時刻入力でそういうのないの?」 そう言われて探してみたけど、いまいち「コレッ!」っていうのが見あたらなかったので作ってみました。 TimeSlider.js jQueryで書いてるのでjQueryは必須…

スクロールバーやチェックボックスなどのブラウザパーツでいろんなUIを作ってみた

先日見たthe389.comというサイトを受けて、自分でもスクロールバーやチェックボックスなどのブラウザパーツを使ったUIをjavascroptで作ってみた。 作ってみたのは、スクロールバーを使ったProgress Loading BarとX/Y Slider、それからチェックボックスなどで…

jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携

前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化し…

jQuery Form Pluginの解説と画像のAJAXアップロード

ExtJSの勉強もしてるんですがね、jQueryの方が楽ちんすぎて今でも使っているんです。 jQueryでは.load()とか.post()とか.get()とか書けば簡単にAJAXが書けますが、フォームをAJAXで扱いたい場合は「jQuery Form Plugin」を使うわけです。 これを使えばAJAXフ…

Google Analytics MobileをPHP4で使えるようにする

先日発表され、正式に使えるようになったGoogle Analyticsの携帯版ですが、用意されているPHP版のトラッキングコードはPHP5に対応していてPHP4では動かない関数がまじっている! これに気づかずに1日ログが取れなかった…orz今時PHP4はつかってねぇーよ!って…

WHATWG で HTML5 が Last Call へ

WHATWG にて HTML5の仕様がいよいよLastCallの発表をしましたね。 http://groups.google.co.jp/group/html5-developers-jp/browse_thread/thread/5350a59f6181670c/8f36c51b830aeb76?show_docid=8f36c51b830aeb76 http://blog.whatwg.org/html5-at-last-call…

iPhone用のWebApplication開発あれこれ

最近は勤めてる会社の運営しているポータルサイトをiPhone用WebApplication化しようとあれこれやっています。 ショップ検索サイトなのでショップ検索WebApplicationを開発しているわけです。 もう、粗方できているのですが、せっかくなのでiPhone独自のもの…

最近読んだ本とか勉強したこと(CakePHP, Javascript, jQuery, ExtJS)

全然書いてないので、久しぶりに早く出社した日ぐらいブログを書こうと思います。 ここ一ヶ月はJavascriptの勉強を重点的にやっていたんですが、 あ、その前にPHPのフレームワークをもう少し勉強しておこうと思ってCakePHPを勉強していました。CakePHP1.2ガ…

簡単にiPhone用サイトを構築するJQuery用のプラグイン「JQTouch」

少し前はiPhoneWeb閲覧者向けのサイト最適化が流行ってましたが、最近は別にそうでもないんですかね。 iPhoneのようなUIを構築するのはいろいろと面倒なことが多いですが、David Kanedaさんという方が、「JQTouch」というiPhoneライクなUI構築ツールJQueryプ…

Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード

何となく「できるか?」と聞かれたので作って見ました。 Feedはサーバサイドで処理してもいいけど、それだと取得先のレスポンスがないときにページが表示できなかったり、エラーが出たりするんですよねー。 ということで、Google AJAX Feed APIでやるんです…

CSS画像リサイズを使用する際のIE8のバグ修正について

また、このネタですが、だいぶ前に書いた「CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版」を使ってWebページを作成していたところ、IE8でおかしな動作をするということが分かりました。具体的には、下の画像の用に変…

CSSによる画像リサイズに切り替えたら表示スピードが3秒縮まった!

会社で運営しているショップ検索サイトで、ショップのリストを表示するページがあるわけです。 そのページの表示スピードがやたら遅いわけで(7〜8秒)何とか改善しようといろいろ見ているのですが、 ショップのリストを表示するページには、それぞれのショ…

Google Mapにも位置情報通知がついた(Chromeと最新Firefox)

先日、いろいろと試していた(前回試していたときの記事)最新版Firefox3.5についた位置情報通知機能だけど、ようやくGoogleMapが対応した。 Chromeと最新Firefoxの場合だけ、GoogleMapの左上に丸いボタンがついて、それを押すと位置情報を通知するかという…

最新のFirefox 3.5 正式版の位置情報通知機能を試してみる(javascript)

Firefox3.5の正式版が公開されましたが、最新の3.5には位置情報通知機能が追加されたんだそうで、 Webサイトで位置情報の使用に関してユーザーへの問いかけがあったとき、OKですよとすれば Google Location Serviceを使用してユーザーの何となくの位置情報が…

CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版

よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-…

ケータイで周辺情報取得。モバろけとモバなび

半年ぐらい前に作ってずっと忘れていた。 iPhoneのマップはGPSで今どこにいるか分かるし、 近くのお店とか検索できるし、 ルート案内もできるから ケータイでもそういうの作ろうと思って、 いろいろAPIを組み合わせて作ったのが、「モバろけ」と「モバなび」…

GoogleAnalyticsAPIをPHPでたたくクラス

少し使ってみようと思い、GoogleAnalyticsAPIをPHPでたたくクラスを書いてみる(相変わらずのPHP4…orz)。具体的にはHTTP_Requestを使って認証〜データ取得までしようということ。 GoogleAnalyticsAPIのドキュメントは全て英語ですが、あれこれやってみれば…

IE6でmin-Widthやmax-heightを適応させる

前回のエントリー「ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる(IE6対応)」でヘッダー・フッターを固定させるレイアウトを作ったのだけれど、どうせならリキッドレイアウトにさせようと思い。width:100%でカチャカチャ作っていた…

ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる(IE6対応)

バリエーションとして覚えておこうと思う。 HTMLとCSSだけで、ヘッダーとフッターを固定して表示させるにはCSSのpositionプロパティでfixedを設定する。 これは閲覧者のブラウザに対して固定した位置に配置することができるので、スクロールしても配置がずれ…

RSSフィードを読み込み処理する

PHPかJavascriptで外部RSSファイルの処理プログラムを書こうと思ったら、Googleがいいの提供してる。「Google AJAX Feed API」フィードを表示するぐらいならこれで十分。 <html xmlns="http://www.w3.org/1999/xhtml"><br> <head> </head></html>

またGoogleMapについて。逆ジオコーディング…うーん…。

モバイル向けのGPSアプリを作って、取得した位置の住所を取得するのにinvGeocoderを使わせてもらっていたんですが、500エラーが出まくる。 肝心の住所が1/2ぐらいの確率でしか取得できないので、他にないかなぁと思っていたら、なんとGoogleでも逆ジオコーデ…

Google Mapについて

無料の地図といえばGoogle Map。 携帯で使えるGoogle Static Mapはケータイでも使えるので便利だなぁと思うのですが、リンクを押して移動しているように見せようとするとき、どれくらい緯度経度をずらせばいいのだろうか? http://sephiebrain.jp/blog/diary…

各キャリアごとに携帯のGPSを取得するPHP

お仕事で使うということもあって、携帯でGPSを取得して処理するためのPHPクラスを作りました。 PHPならPEARでもあるくらいのものですが、自分用に作りたかったので一から作ることにしました。 参考にしたのはこちら http://www.phppro.jp/phptips/archives/v…

背景画像のCSSテクニック

最近ではどのCSSテクニックを見ても、「あーこれこうなってるんでしょー」ぐらいにしか思わなくなっていたのですが、久しぶりに面白いテクニックを紹介していたので紹介。 http://bizcaz.com/archives/2009/01/18-055214.php http://www.askthecssguy.com/20…