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


スマートフォン用の壁紙がダウンロードできるサイト
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 スマートフォン


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト