タグ: とき

フリーランスの仕事、外出先でデータを確認するときのスマホ活用法

Kentaro Kitagawa

複数の案件を抱えていると移動中にメールでデータやダウンロードのURLが届き、その場で返事が必要なこともしばしば。

数100MBを超えるデータはスマホで受信するのは辛いのでパソコンでとなりますが、数10MBぐらいの容量であればWifiがあれば楽に受け取れるので、移動中にデータを受信して確認→返事までできるとレスポンスがいいので次の仕事にも繋がりやすくなります。ということで実際自分が使っている方法をまとめました。

いろいろなファイル形式を扱うならAndroidで

 iPhoneは確立され使い勝手がいい反面、扱えるファイル形式に制限があるため、添付したファイルが開けなかったり、保存できなかったりするので、仕事でスマホを最大限活かそうと考えるとAndroidに。できれば解像度の高い、ファブレットサイズで容量に余裕があるものが最適。GALAXY Noteシリーズはペンが使えるので長文のメールや文章も手打ちと比べるとかなりやりやすいです。

あると便利なアプリはファイルマネージャーアプリ。メジャーなアストロやESであれば、ファイルの移動やコピー&ペーストから圧縮ファイルの解凍等もできるので一種類入れておくと便利。

またoffice系のアプリがあるとその場で見れるので、ない場合は入れておく。そして大事なのは実際にファイルが開けるか必ず試す。実際と表示にずれがあったり、ワードアート等が表示されなかったりする事があるので事前の確認を。

DropBox+DropSyncでスマホにもデータを保管

 クラウドサービスのアプリはほとんどのサービスで提供されているのですが、基本的にパケットや速度の問題もあり、スマホ本体とは同期化しないのでDropBoxの場合は同期化するフォルダを設定できるDropSyncを使う。有料のキーを買うと制限なしですが、無料のままだと設定できるフォルダ数等に制限があります。

進行中の案件のフォルダを設定したり、スマホでダウンロードしたファイルを入れるフォルダを同期化したりすることでファイルの容量に左右されますが、パソコンを開いてすぐスマホでダウンロードしたファイルをパソコンで開くといったことが容易になります。

 スマホでWebサイトのソースコードを見たいときはChrome

 出先でパソコンが開けないけれど、ソースがおかしいといった指摘がきたとき、ソースコードを一番手っ取り早く見る方法はChromeのソース表示を使う方法。アドレスバーに「javascript:window.open(“view-source:”+location.href);」と打つと今表示しているページのソースコードが表示されるのでコピー＆ペーストできるようにしておくか、「javascript:var url=prompt(“url:”,””);window.open(“view-source:”+url);」をブックマークしておくと押したときにURL入力欄が出るのでそこにアドレスをコピー＆ペーストするとソース表示されるようになります。

  • 【新品★海外版SIMフリー】HTC+ONE+Dual+SIM+802W+dual+デュアルSIM+[並行輸入品]+(ホワイト)
  • HTC+One+SIMフリー+海外携帯+(32GB%2C+シルバー)
  • GALAXY+S4+SC-04E+docomo+[White+Frost]
  • GALAXY+S4+SC-04E+docomo+[Black+Mist]
  • 【バーゲンブック】+Dropboxポケットガイド
  • Dropbox+WORKING
  • クラウドからサーバー、セキュリティまで失敗しないIT導入をサポート+クラウド時代の製品･サービス選び+Vol.1+(アスキームック)
  • iPhoneやAndroidでも使えるGoogleクラウドサービス活用術―全て無料で利用できる!+(メディアボーイMOOK+ビギナーズPC)

linked by blog-tools

ドコモでiPhoneを使うときにやっておくと便利なことメモ

Kentaro Kitagawa

NewImage

ドコモからもついにリリースされたiPhone。SPメール等、まだ使えないサービスもある中で、昨年の11月から使っている中で役に立った便利なこと等をまとめてみました。

連絡先はGmailで一括管理

Androidを使っていた場合はそのままiPhoneの設定からメール/連絡先/カレンダーのアカウント追加からExchangeを選択してGoogleアカウントを入力すれば連絡先の同期が可能でカレンダーなども使えます。

自分はガラケーからiPod touchへ連絡先のデータを移行するときにGoogle contactを使うようになったのでAndroidやiPhoneへの移行はかなり楽でした。Gmailから連絡先を登録すればすぐにiPhoneにも同期されるので非常に便利ですが、セキュリティ対策を考えるなら2段階認証などを導入するのがベスト。

SPメールがそのままでは使えないのでその対策

SPメールをドコモでiPhoneを使う際は使えないので使いたいときにSIMカードをAndroid端末に差し替えて使う、もしくは別途i-modeの契約をしてi-mode.netを追加。パソコン等でi-modeメールを受信できるよう、App Storeで購入できるi-mode.netメールが受信できるアプリを使うといった方法があるものの、iモードのメールアドレスの変更や設定にはガラケーからiモードに接続してやらないとできないことが多いので、オススメできず。

一番のオススメはキャリアメールから別のIMAP対応のメールサービスへの移行。自分はGoogle Appsを使っています。

おサイフケータイが使えないのでその対策

EdyなどはiPhoneに対応していないので今使っている端末のポイントは使い切る。マクドナルドやヨドバシカメラのアプリはかざす機能が使えないのでバーコードやクーポンの表示ができるようになっています。自分はGALAXY Note2と2台持ちなのでFelicaが必要なものは基本的にAndroid。Edyはカードが便利ですが、オートチャージ機能が使えないのが少し面倒・・・。

Chromeはブックマークの同期機能が便利

Chromeはアカウント上でブックマークが利用でき、その中のモバイルのブックマークがモバイル向けのブックマーク領域になります。よく使うサービスのモバイルサイトなどを登録しておくと便利です。

ガラケーからiPhoneへ替えるパソコンヘビーユーザーにオススメのツールなど

気になるサイトや記事をブックレットで保存してあとから読むことができるpocketやRSSリーダーのFeedlyはあとからまとめてニュースをチェックしたいときにオススメで、どちらもパソコン、iPhone,Androidなどに対応。通勤時間などにサクサクチェックできます。

その他定番のYahoo!アプリやジョルダンなどの乗り換え案内、全国タクシー配車、ウェザーニュースなどは仕事の移動中などで役に立つことが多いので使うときに入れておくとよいと思います。

何処からアプリを探す？

Androidと比べると質の悪いアプリは少ないですが、最初、何処で探すかは悩みどころ。

App Storeのおすすめにあるアプリはベストセラーが多く、レビューも多く書かれているのでそういったところからはじめてみるのがオススメ。有料のものはクレジット決済のほかコンビニ等で買えるiTunesカードをつかって決済ができます。アプリや音楽、映画にも使えるのでプレゼント等にもいいかもしれません。

タブレット向けサイトのサイズがうまく出来ないときの対処法

blog.cdbk.net

この１年、タブレット向けのサイトを作る機会が増えてきたので実際の解像度とブラウザーの表示サイズが異なることで起こる問題の対処法をまとめました。

ランドスケープ表示とポートレート表示、双方できれいなレイアウトで見せたいとき

ターゲットとするタブレットのアスペクト値によって多少変わりますが、CSS3のmediaqueriesを使い、２サイズをだし分けるのが最も簡単で失敗しない方法だと思います。JavaScriptで回転した際にviewportを書き直してもよいのですが、端末によって挙動や動きが異なる場合が多いので、mediaqueriesなどプログラムをなるべく使わない方法でレイアウトを変更するのが得策。
書き方は

@media screen and (max-width: 820px) {/*820pxまでのサイズのとき*/body{}...}
@media screen and (min-width: 820px) {/*820px以上のサイズのとき*/body{}...}

といった書き方になります。

実際の解像度で作ったところ、拡大表示されてしまうとき

viewportをwidth=device-widthで設定したにもかかわらず、拡大表示される場合があります。
その場合はinitial-scaleを1以下の数字にして縮小表示させることでタブレットのサイズに合わせます。
たとえば
<meta name=”viewport” content=”width=device-width, initial-scale=0.66,minimum-scale=0.66,maximum-scale=2” />
といった書き方。

微妙に横幅が大きくなり、スクロールしてしまうとき

viewportやmediaqueriesを使い、サイズを合わせたものの、微妙に幅が合わず、スクロールが出てしまうときはCSSでbodyや一番外側のブロック要素にoverflow-x:hiddenの設定を追加します。
そもそもの改善にはなりませんが、横スクロールしなくなり、ユーザビリティが多少改善されます。

リキッドレイアウトを活用して様々なサイズに対応させる。

スマートフォンやタブレットでは出来る限り画面サイズ幅いっぱいにコンテンツを表示させたいので、幅指定を100％にすることを前提に、スマートフォンとタブレットでのコンテンツ表示を共有する場合やレスポンシブデザインを行う場合にはmediaqueriesを使い、全体幅とブロック要素の回り込み、表示非表示を制御します。

アドレスバーを非表示にする＋ひと工夫

スマートフォンでもよく使われる方法ですが、JavaScriptを使い、アドレスバーを消すことで画面の高さーステータスバーの高さをコンテンツに当てることが出来ます。ランドスケープの場合ファーストビューの領域がアドレスバーで削られてしまうときの弊害が大きいので下のようなスクリプト(jQuery)を追加することで対処します。

function onloadpage(){
	setTimeout(function(){
	var h = $("body").scrollTop();
	if(h==0){
	setTimeout(function(){ window.scrollTo(0,1); },110);
	setTimeout(function(){ window.scrollTo(0,0); },111);
	}
	},100);
}

読み込み中にユーザーがスクロールしているときには動作しないよう、スクロールを検知するようにしています。
気になるところはご指摘いただければ対応します。また何かわかれば追記します。

AndroidアプリでWebViewが異様に重いときの解決Tips

blog.cdbk.net

仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。
そのときの解決法が思いのほか簡単だったのでメモがてら記載。
動作がもたついてしまう主な原因は
1.アニメーションのコンテンツがある。
2.CSSの設定が複雑。
3.CSSのエフェクトを使っている。
といったところが主な原因。
自分が仕事でぶちあたったのは３つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。
その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。
今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100％信頼できる動作もWebViewでは動かない場合があるので、認証や決済時に使う場合は注意が必要です。

  • Google+Androidアプリケーション開発入門+画面作成からデバイス制御まで――基本機能の全容
  • HTML5とJavaScriptによるiPhone%2FAndroid両対応+アプリ開発ガイド
  • アプリ%2FWeb開発者のための+フラットデザインガイドブック【iOS+7・Android・Windows+8対応】
  • Androidアプリ開発実践ノウハウ128
  • スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone%2FiPad%2FAndroid対応

linked by blog-tools

スマホサイトを作るときに気をつけているところ

blog.cdbk.net

NewImage
スマホサイトを作るときに気をつけているところをまとめてみました。

片手、親指だけで操作できるナビゲーション配置

ボタンやタブのサイズは狭すぎず、細すぎず、リンクとリンクの間にマージンを設定して誤操作を防ぐといった配慮をしてレイアウトしたい。横に並べる数は３〜５が理想的。それ以上は押しづらい。

ヘッダーには要素を並べすぎないようにする

たまに目にするアクセスすると画面の3/4がヘッダー＋メニューのサイト。コンテンツが増えるとヘッダーのメニューが増えるといったことは避け、ページへアクセスした際にヘッダーで画面が埋まるといったことのないようにしたい。ナビゲーションメニューはプルダウンやダッシュボード化などで数が増えても対応できるようにするのが望ましい。

ページ遷移はできるだけ階層を深くしない

スマートフォン向けサイトはできる限りシンプルな遷移を意識して2,3クリックで目的のページへいけるような構成を心がける。「自分はどのページにいるのか？」「自分は何処のページを見たいのか？」ユーザーが意識して動けるようなナビゲーションリンクの配置にすることで離脱されないようにする。できればブラウザーの戻るボタンを押さずに完結できるようにしたい。

高解像度ディスプレイ×リキッドレイアウトを意識したデザインを行う

スマートフォンは回転すると横幅が変わるため、それを見越したデザインをする。たとえば、iPhone4は幅は320×480が基本ではあるが解像度は300dpi以上なので普通に画像をおいただけでは滲んだりして見えてしまう。画像は高解像度のdpiでもきれいに見えるサイズで用意して縮小させてレイアウトしたり、CSS3でアイコンの角丸やグラデーションを作る。縦横でも対応できるようにオブジェクトの配置は％指定やinline-blockを活用して不意なレイアウト崩れがおこらないようにする。などPC向けよりも気遣いが必要になる場面が多い。

Viewportを活用する

使いこなせるとかなり便利なViewport。デフォルト幅が320pxのブラウザーで480pxサイズのサイトを見せる際の設定などはviewportで行う。また、zoomを設定するとフォームのテキストエリアを選択したときに拡大表示されたりするといった動作があるのでその辺りも加味してデザインを行うとより、使いやすいナビゲーションに結びつけられる。タブレット端末では「initial-scale」が有効にならない場合があるのでターゲットとする場合は実機での検証が必須。

jQueryとCSSで気をつけたいこと

スマートフォンサイトでjQueryを使う際に気をつけたいのはliveがiOSで有効にならない点。clickやタグないに入れるonclickなどで代替できる場合は代替。できない場合はほかの方法を模索することになる。またCSSのfixedの挙動がiOSではまだ不完全なところが多いので使うことをさけた方がよいかもしれない。

制作時に参考になるサイト

ここでまとめた内容のより細かいところなどが掲載されていたので、より詳しいことは下記サイトを。。。
スマートフォン向けサイトの作り方｜ユージック
スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]
 
 
 
 
 
 

悩んだときに読みたいクリエイターの本

blog.cdbk.net

ふと自分の行動を思い返すとこれでいいのかと悩んだりすることもあり。
そんなときは温故知新？というより自分のライフステージにあったロールモデルを見つけてその人の行動を参考にするとこの先の目標が定まったり、打開策が見つかったりすることも。
ということでクリエイターになる前や仕事のでエピソードが載っている本をいくつか掲載。
DESIGN WORKS 2 (SEIBIDO MOOK)

記憶に残るブック&マガジン -時代を編集する9人のインタビュー集-

記憶に残るウェブサイト [ トップクリエイター10組へのインタビュー集]

美しいデザイン 7人の女性アートディレクター―その視点と考え

iPad、iPhoneなどでゲームをするときはアンチグレアのフィルムがいい。

blog.cdbk.net

iPadやiPhoneなどでゲームをするとき、汗で反応が鈍くなったりしてしまいませんか？
いろいろレビューを見たりして調べたところ、アンチグレアのフィルムが光が反射しないように表面が少しさらさらしているのでいいという噂をみて購入。
そして実際に使ってみたところ、吸い付くような触感もなく、使い易くなりました。
iPad用のアングレア液晶フィルムセット

iPhone向けアングレア液晶フィルム