Optimus brightのTouch&Tryイベントに参加させていただきました!

Optimus brightの製品発表イベントが福岡で行われるとのことで
お誘いいただいてイベントにお邪魔させていただきました♪

Optimus brightのTouch&Tryイベントに参加させていただきました☆

↑私のガラケーとOptimus bright(笑

場所は国体道路沿いのCherry。
かわいいお店です☆

こういうイベントに参加するのははじめてなのでちょっとドキドキします…。

若い女の子向けのイベントだったようで、
会場に着くと、モデルさんのような女の子であふれていました…!!!

テレビに出ている子もいたり…!

明らかに5個以上下であろう女の子たちに囲まれてイベントスタート。

場違い感が漂っていましたが
強い心で気にしない…!!

イベントは
・Optimus brightの製品紹介
・INGNIのお洋服コーディネート対決
の2本立てで行われました。

なるほど、それでみんなこんなオシャレでかわいいのか…!!!
(ここでさらに場違い感を自覚するも耐えるw

Optimus brightの話

で、まずはOptimus brightの製品紹介だったのですが、
『明るい・軽い・最初からカバーが3つついてくる!』
というのがウリとのこと。

Optimus brightホームページ

いろいろと説明を受けながら
一人一台端末をお借りしていろいろいじり倒します。

ディスプレイの明るさ

外でディスプレイを見比べてみたり…。
「世界最高輝度のディスプレイ」らしいです。

確かに明るい。

CM通り炎天下でも見やすかったです。

これだけ明るくて視野角も広いので
みんなで動画とか見れたりしますよ!との説明だったのですが、

明るすぎて丸見えすぎると電車とかは逆にちょっと困るな…と思ってしまいました。

が、ホーム画面のメニューのショートカットから簡単に明るさ調整できました。

おぉ、ちゃんと考えられていた…!!!w

見せたいときと見せたくないときの調整が
簡単にできるかどうかは個人的にとても大事なポイントなのです。

薄さとか軽さ

持ちやすい大きさでした。
重さも軽くてやや小さめで、形もまるっこく、
片手で操作しやすかったです。

女の人向けで開発されたらしく、
女の人の手のサイズにはとても扱いやすい大きさかも。

デザインとかカバーとか

気分で選べるようにーと最初からカバーが3個ついてます。

カバーというか、リアカバーを取り替えられる感じ??
カバーなしでは使えません。(外したら機械的なアレが丸見えなので)

最初から3個ついてるので、
1個は思い切りデコって、会社用と休日用とかで使い分けできそうだなーと思いました。

買うと以外と高いので最初からついてるのはうれしいかも。

そのほかいろいろ

裏返すと音が切れたりアラームとめたりできるとか、
ギャラリーで画像を見ている時本体の横を指でカツカツ叩くと画像が前後に動くとか、

爪が長いとフリックしにくかったりするので、
画面さわらないでいろいろできるところはホント女の子向けだなーと思いました。

んで、ガンガンアプリで遊ぶ

時間内、いろいろさわってみる時間があって、
写真を撮って、入っているアプリで加工して遊んでみました。

さわった中で面白かったのをいくつか。

PhotoFunia

びっくり!これ無料なのね…!
手軽にサクサク加工できました。
スマホ買ったら絶対入れよう。

PicsIn

これも無料だった…!
写真がいろいろ加工できて面白いのはもちろんのこと、
kaleidoscopeってメニューがあって、
画面をタッチしてドラッグするとおもしろい幾何学模様が簡単にかけるのが
なんかすごく楽しかったw

レトロカメラ

これは無料版と有料版があるみたい。
無料版は保存した画像にロゴが入るそうです。

こんな感じでガラケーもなんかかっこよく…w

ほかにも結構知らなかったアプリが入っていました。
このあたりのアプリ楽しそう…!

休憩を挟んで後半戦へ。

おやついただきました。もぐもぐ。

ファッションコーディネートの話

テーブルごとに好みの携帯のカバーの色を決めて、
いろいろと用意された服の中からそのカバーに合うコーディネートを作る、というものでした。

モデルになる子をテーブルごとにひとり決めて
その子がお洋服を着てくれます。

私たちのテーブルはとっても色白で細いかわいーーー女の子を
モデルさんにチョイス☆

とてもセンスのいい女の子たちがたくさんいて
ガンガンコーディネートしていってくれました。

お洋服はすごくいろいろ用意されていました!

INGNIのものみたいです。

INGNIのホームページ↓

PCサイト

モバイルサイト

テーブルごとに1つ、計4コーディネート完成。

どれもとーーーーってもかわいかったです!

てかみんなスタイルいい…!!!><

セール期間中ということもあり、
洋服欲しい熱が高まるコーナーでしたw

そんな感じであっという間にイベントも終わって解散☆

一緒に行ってくれた友達と
その足でドコモショップ行ってスマホ見まくって帰ってきましたw

パソコンとiPadをいつも持ち歩いているので、
ふつうの携帯でも事足りていたのですが、
写真をその場でアプリで加工してtwitterとかにアップできるのはやっぱいいなーと思いました。

まわりのIT系じゃない友達も結構スマホに変えはじめたので
私もいい加減スマホにしようかなぁー…と思った土曜日の午後でした。

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 スマートフォン

ようやくこのブログ用の スマートフォン用テーマ作りました

ようやくこのブログ用の スマートフォン用テーマ作りました!
今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、今使っているPC用のテーマをベースに、テーマを作ってみました。

このブログのスマートフォン用テーマ作ってみましたー!

現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。
(※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました!)

今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、
今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。

とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆
(あといろいろコード見直してもうちょいスムーズに表示されるようにします><たぶんいろいろと無駄なことしてるはず。)

で、スマートフォン用デザイン。

やらなきゃやらなきゃと思いつつ、
なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。

スマートフォン用デザインの基本などに関しては、
今回以下のページがとっても参考になりました!

また、このブログはWordpressを利用しているのですが、
WordPressのスマートフォン対応と言えばwp-touchなどプラグインで一発で対応できるものが有名だったりするのですが、

今回は上にも書いた通り、このプラグインは使わず、普段のテーマ作り方でスマートフォン用テーマを作りました。
wp-contents内にpc用とスマートフォン用のテーマを置いている状態です。

2つのテーマの切り替えには、 iPhone theme switcherというプラグインを使用しています。

プラグインを有効化し、使用したいテーマを選ぶと、iPhone・iPadからのアクセス時に設定したテーマを読み込むようになります。

ただ、このプラグインだとiPhoneの時しかこのデザインにならない上、iPadでもこちらのテーマが有効になってしまいます。

なので、twitterで@rintaxさんにアドバイスいただいた方法で、端末の判定を変更しました。
このプラグインの端末判定の箇所の判定条件を書き換える方法で、Androidを追加、iPadを削除しています。

ただ、スマートフォン向けの表示のさせ方に迷っていて、スマートフォンってPCサイトも問題なく見れるのがいいところでもあるような気がするので、一律強制的にスマートフォン用デザインを出すのってどうなのだろう?と思っています。

というのも、PC用とスマートフォン用でまったく同じ内容が乗っているならいいけど、PCサイトにはあるなにかがスマホ用だと足りない…とかあったらPCサイトの方がみたい!って時もあると思うし…。

はじめはPC用サイトを出す
→スマートフォンからのアクセスの場合はヘッダーにメッセージをだして、スマートフォン用テーマがあって切り替えられることを告知
→一度切り替えたらもう一回切り替えるまでそっちのテーマ

の方法もいいのかなーとも思ったり。

その場合だとWordPress theme switcherあたりを使うことになるでしょうか。

いや、スマホもってないんでよくわからないんですけどね…!(笑)

もうちょっと他の対応サイトなどを見て、いい方法を考えようと思います!

あと、考えるにあたっていろいろと参考になるサイトやプラグインの情報を頂いたのでメモ。

いろんなやり方ができそうです。

…さて。

今回テーマ自体はさくさく順調に作れたのですが、

WordPressのiPhone用テーマを作るにあたって困ったことがひとつだけありました。それが記事に張り込んでいる画像…!

PCで見ることを前提に、記事中には幅500pxぐらいの画像を埋め込んでいるので、難の指定もないそのままの状態では、画像がはみ出してしまいました。

でもmax-widthが使えるので、max-width: 100%で枠内に納められるじゃん!と喜んだのもつかの間、はり込んでいる画像にheightとwidthが入っていたため、横幅はいいのですが縦は指定されたピクセル数で表示されてしまって、横幅はいいものの、今度は縦に長くなってしまいました…。

javascriptでごにょごにょすれば消せるみたいなのですが…※

最初から本文にwidthやheightが入っていなければ表示させるときになにも気にしなくていいので、そっちのほうがいいなー?ということで、今回は本文からwidthとheightを消すことにしました。

※追記:かちびと.netのシロさんにjQueryで.removeAttr(“width”).removeAttr(“height”)で取ったらいいよ!と教えていただきました!ありがとうございます!!

とりあえず過去のエントリーの分は、一括でheightとwidthを削除してしまうとして…。

これから記事を書くとき、はじめからwidthとheightが入らないようにしたい…!(そもそもheightとwidth書かない派なので前々から気になってた)

そしてできればコアファイルはいじりたくない…

誰かいい方法知らないだろうか?と思いツイートしてみたところ

@jim0912さんが、functions.phpに書くだけでWordPressの画像挿入時にwidthとheight指定が入らないようにする方法を教えてくださいました!

本当にありがとうございます!!!

WordPressの画像挿入時にwidthとheight指定が入らないようにする
http://www.warna.info/archives/700/

動作もばっちりでした!

これで画像の幅問題も解決しました☆わーい☆

実は今お仕事でもいろいろとスマートフォン用のデザインを作っていたりするのですが、IE気にしなくていいってことがこんなに楽しいことだとは思わなかった…!w

いろいろできてとっても楽しいです(笑)

☆おまけ

実はtwitterで画像や動画が簡単に共有できるサービスのシャッターのサイトもスマートフォン用のデザインを最近やっと用意しました!(サムネイルのところなど一部まだ対応中のところもありますが)

よかったら見てみてくださいねー!