jQuery Mobileを使ったスマートフォン用壁紙ダウンロード用サイト『WALLPAPER COLLECTION for スマートフォン』つくりました!

スマートフォン用の壁紙がダウンロードできるサイト、『WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery mobileを使用しています。
スマートフォンをお持ちの方、ぜひぜひアクセスしてみてくださいー!!

スマートフォン用の壁紙がダウンロードできるサイト
WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery Mobileを使用しています。

サイトのベースはWordPress+jQuery Mobile

いつものようにベースはWordPressを使っていて、WordPress+jQuery Mobileでできています。

ちょうどPC用の壁紙ダウンロードサイト壁紙カレンダーのガラケー/スマートフォン版を作ろうと、素材をちょこちょこ準備していたところにちょうど良く使ってみたかったjQuery Mobileが結びついた感じです。

画像を指定サイズに切り出すPHPの処理は壁紙カレンダーのものをアレンジすればすぐできそうだったのと、画像の加工、WordPressへの登録等はすでに行っていて、あとは表示部分を整えればいいだけになっていたのもあり、jQuery mobileを使ってのフロント部分の実装はあっという間にできました。

WordPress+jQuery mobileおそるべし。

作った動機と目的

今回の作った動機は

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

×

スマートフォン対応を勉強しておきたかったから

です。

新しいことを勉強するときはただ勉強するだけじゃ、ちーっとも覚えられないので、「とりあえずやってみる」っていうのを大事にしています。

た だやってみても表に出ないんじゃやる気があんまり出ないので、「勉強ついでに手間がかからずに作れて、管理も手間がかからないもので、やりたいこと(学び たいこと)がしっかり理解できて、且つ少しでもいいから誰かの役に立つ」ものを探し出して一応サービスとしてカタチになるようにしています♪

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

もともとPC用の壁紙ダウンロードサイトの壁紙カレンダーはPhotoshopの練習で写真加工したり、色味を強く現像してみたりいろいろ試しているのですが、たまーに「おぉ!これは!」と思うものができるのですが使い道がないのでもったいないので何かに使えないかなぁと思いつき、カタチにしたのですが、PC用の壁紙って横長な訳ですよ…!

縦長の行き場がなかったので、今回スマートフォン版で消化することができました☆(というほど世に出せるようなたいしたものではないのですが…)

スマートフォン対応を勉強しておきたかったから

スマートフォン対応って今後お仕事で増えてくるだろうなと思ったので今のうちにしっかり理解しておきたかったので


はじめてのjQuery Mobileでとても参考になったサイト

今回、はじめてjQuery Mobileを使用するにあたり、わかりやすくて参考になったサイトをご紹介します


今後の課題

  • 現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する
  • トップページの画像がスライドするところのアニメーションをCSS3でやる
  • 選べるデザインを増やす
  • スマートフォンを…

現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する

現在発売されているスマートフォン(Android端末)のスペック一覧をH2Oスペースのたにぐちさんがまとめて下さっていて(すばらしいまとめありがとうございます!!)→Android端末のスペックをまとめてみています

これをみながら一旦はすべて対応したのです…が。

壁紙のサイズ=画面解像度ではない機種がある

壁紙のサイズ=画面解像度ではない機種があることがわかり。

GalaxySは画面の解像度は480px x 800pxなのに壁紙のサイズは 960px x 800pxらしい…!ということが発覚したのです。

もしかしたらほかにもそんな機種があるのかも?と、今は私のほうで壁紙のサイズがわかった機種、iPhone,iPad,GalaxySのみ対応にしています。

いろいろ調べてみたのですが各機種の画面解像度は書いてあっても、壁紙サイズがあんまり書いてないのです…!数値さえわかれば1分で対応できるのに!!><

この機種を使っていて、この機種の壁紙のサイズはこれだよ!とか壁紙サイズの一覧があるよ!なんて情報をお持ちの方はぜひお知らせいただけるとうれしいです;;

トップページの画像がスライドするところのアニメーションをCSS3でやる

トップページのスライドしている画像の部分、今はjQueryを使って実装しているのですが、携帯端末にはきつい&何回かページ遷移してもどってくると消えてなくなるwのでCSS3アニメーションでなんとかしたいなー、と思っています。

ただなんかもう全っ然やり方がわからないので、twitterで5509のnoriさんがいつかブログに書くといってくれたのでそれを首を長ーーーーくして待っていようかと思っています(…)

選べるデザインを増やす

とりあえず勢いでリリースしてしまったのでまだあまり種類は多くないのですが、GWなどを使ってたくさんアップできればなーと思っています。がんばる!

スマートフォンを…

買おうかな、そろそろ…w


スマートフォンをお持ちの皆様、ぜひぜひご利用いただけるとうれしいです♪

スマートフォン用の壁紙ダウンロードサイト
WALLPAPER COLLECTION for スマートフォン

「jQuery Mobileを使ったスマートフォン用壁紙ダウンロード用サイト『WALLPAPER COLLECTION for スマートフォン』つくりました!」への4件のフィードバック

  1. はじめまして。いつも楽しみにエントリ拝見させていただいています。

    jQuery Mobileのサイト素敵ですね。
    横向きにしたときに、左寄せになってしまっているのが気になりました…。不快に感じられたらすみません…。

    今現在iPhoneなどお持ちでなければ
    iOSシミュレータを使われては?と思いました。

    今後も楽しみにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です