実践！iPhone＆Androidサイト制作ガイド

http://ascii.jp/elem/000/000/543/543575/

第1回 スマートフォン対応サイトの作り方、教えます
第2回 作って学ぶスマートフォン対応サイトの基本
第3回 サイト制作の前に知りたいiPhone/Androidの仕様
第4回 スマートフォン対応サイトを設計するときのノウハウ
第5回 スマートフォンサイトをデザインする7つのポイント
第6回 実例でわかる！スマートフォンサイトの画面設計
第7回 HTML5/CSS3で作るスマートフォンサイトの基本
第8回 JavaScriptで振り分けてスマホサイト完成！
第9回 CSS＋jQueryでクロスデバイスサイトを作ろう
第10回 jQueryでiPhone風スライドパネルを作ろう

ポイントをまとめると・・・

■第1回 スマートフォン対応サイトの作り方、教えます

●メジャーなサイトのスマホ対応
●スマホの対応のそれぞれ
・コンテンツやサービスをスマートフォン向けに全て最適化
・専用アプリを提供
・一部のページだけ対応
●必要知識
・HTML+CSS(HTML5/CSS3)
・Javascript(2本指を使ったジェスチャーや画面の拡大/縮小等)
●制作方法
・1から作成
・PCサイトをスマートフォンで見やすくする（HTML＋CSS修正）

■第2回 作って学ぶスマートフォン対応サイトの基本

●Viewport（自動縮小）
●シミュレータ
・iPhoneシミュレーター（Macのみ）
・Androidシミュレーター・・・eclipseが必要

■第3回 サイト制作の前に知りたいiPhone/Androidの仕様

●iPhone標準ブラウザーは「Safari」
●Mobile Safariの制限
・プラグイン非対応のため、Flash NG
・文字コードエンコーディング設定がない
・ファイルのアップロード・ダウンロードができない
・画像容量、Javascriptの処理時間に制限有
●Androidとはグーグルが中心になって開発しているモバイル用OSの名称
●Androidの標準ブラウザーは「ブラウザ」(chromeに近い）
●Android 端末の制限
→基本はMobile Safariと同じ、プラグイン非対応、アップロード、ダウンロードNG
　でもFlashはOK。

■第4回 スマートフォン対応サイトを設計するときのノウハウ

●QRコードを認識するソフトウェアが標準では搭載されていない
●ゴールをフォーム入力ではなくTel問い合わせ、リアル店舗への誘導、
　Twitterやメールを使ったURLをPCと共有、ブックマーク、ホーム画面への追加などがよいかも
●階層は浅く、1ページは長く設計
●スクロールバーが存在しないので（指でなぞるため）
　ページ内リンク、折りたたみ、タブなどを有効利用
●文字サイズはPCサイトよりも大きく（14〜15pt程度）

■第5回 スマートフォンサイトをデザインする7つのポイント

●PC同様ワイヤーフレーム→デザインカンプを作成
●リキッド（可変幅）でデザイン
→コーディングだけでなく、デザインカンプでボタン作成時も
　幅を問うような装飾を施さない（ボタン幅が変えられるようなデザイン）
●縦画面と横画面でレイアウトを変更するにはCSSの「メディアクエリー」を使って対応できる
●pngが使える
●画像を使って表現していた角丸ボックスやグラデーションなどの装飾要素は、容量削減のため、CSS3のプロパティを利用する
●ロールオーバーができないので、リンクだとわかるようにする（画像リンクとか）


■第6回 実例でわかる！スマートフォンサイトの画面設計

●PCサイトのコンテンツ選定（どこをスマホサイトに取り入れるか）
●サイトマップを作成
・Webサービス「Cacoo」でサイトマップ作成
　https://cacoo.com/
　ワイヤーフレームの作成もできる
●ジャンプボタンの配置方法

■第7回 HTML5/CSS3で作るスマートフォンサイトの基本

●デザインカンプの作成
●HTMLはHTML5を使用
●リセットCSSの組み込み
・文字のサイズや太さ、マージンなどブラウザーによって違い、標準が適用されるため
　リセット用のCSSを適用してブラウザーの標準スタイルを無効にする
・HTML5 DoctorやGoogle Codeから取得できる
●角丸をCSS3のaside要素（のborder-radius）で作る
●ボタンのグラデーションのCSS3(-webkit-gradient)

■第8回 JavaScriptで振り分けてスマホサイト完成！

●CSSでボタンを作成したときはリンク領域もCSSで拡大する
●smoothScroll.jsでスクロールをスムーズにする
●スマートフォンとPCの振り分けはJavascriptでもできる
●PCとスマホでコンテンツの内容が違い、振り分けする場合は
　スマホサイトに転送してよいかをダイアログで確認

■第9回 CSS＋jQueryでクロスデバイスサイトを作ろう

●クロスデバイス＝PC向けのHTMLを利用し、CSSとJavaScriptだけで
　レイアウトやデザインを変更すること
●メディアクエリー＝出力する媒体（PC、印刷など）や画面解像度など条件に合わせてスタイルを適用できるCSS3の機能
　linkタグのmedia属性を指定する
　例えば横幅が狭い環境で見たとき、メニューを非表示にしてメインのみ表示
●非表示にしたメニュー部分はCSSのdisplay:noneで非表示
　＋jQueryでエフェクト表示をさせる
●画像もjQueryで切り替えられる（CSSとメディアクエリーでもOK）


■第10回 jQueryでiPhone風スライドパネルを作ろう
●jQuery：http://jquery.com
・文字のフェイドアウト
・左右スライド
・その他いろいろ

何度も読み返したいサイト。

— posted by midilin @ 07:33PM | Comment (0)

http://allabout.co.jp/gm/gc/381225/

インストールと、起動方法が書いてある

・Win以外に、MacOSやLinuxでもOK
・Android 、Xperiaなどエミュレートできる
・起動には時間がかかる

— posted by midilin @ 04:05PM | Comment (0)

http://allabout.co.jp/gm/gc/381464/
・段組を使わない
（横スクロールが必要だから）
・指で操作しやすいようなＩＦ
（マウスではないので、リンク幅を広げるなど）
・HTML5＋CSS3も可
・横幅320pxでも表示できるようにレイアウトを組む
ただし横480×縦320もあるので、リキッドレイアウトが望ましい
（※リキッドレイアウト
　表示領域の幅がある程度変更されても従来のレイアウトを維持できるようにする手法
http://www.sophia-it.com/content/%E3%83%AA%E3%82%AD%E3%83%83%E3%83%89%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88）
・スクロールバーが表示されない、Flashが使えない端末も考慮する
・metaのviewportというのを使うと、自動縮小機能を制御できる

— posted by midilin @ 03:59PM | Comment (0)

紹介ページ
http://e0166.blog89.fc2.com/blog-entry-877.html

smart4me
https://smart4me.net/
というのを使う。

ユーザー登録必要あり
1ユーザー10ページまで無料

— posted by midilin @ 03:41PM | Comment (0)

http://www.forest.impress.co.jp/docs/review/20120127_507580.html
指定したフォルダを公開し、インターネットで
別PCでそのフォルダを仮想ドライブを使えるソフト。

— posted by midilin @ 01:00PM | Comment (0)

碧の大樹につくと、巨大なダンジョンが待ち受けています。
敵も結構強力。

パーティーは零の軌跡と同じ
ロイド、ランディ、エリィ、ティオにしました。
リーシャも捨てがたいですが、とっさの戦闘には
エリィのスターブラスト３と、ティオのエナージーサークルがあると攻守安定しますし、

エリィのフィールドによる遠距離攻撃＋先制は
最初から最後まで有効のようなので
サポートにリーシャとノエルをいれておきました。
（ノエル様も使いたいところだけれど、
　攻撃力がいまいち弱いのと、アーツに強みがないのでサポート行き）
　

途中、何度か巨大なモンスターがたちはだかりますが
エリィとの絆を深めた今、怖いものなしですよ。

必殺ロイド×エリィのスターブラスト３
あとは回復で、たいてい倒せます。

ながーいダンジョンを抜けると、結界で先に進めない部分がきて
その結界をとくためには、別の結界から聞こえる声の主と
もっともかかわりのある人を連れてきて、結界をとかないと先にすすめないとのこと。

最初の結界が、シャーリーの声が聞こえてきて、リーシャを求めているようだ。
サポートにいたリーシャとメインメンバーのエリィをチェンジ。


結界の中も敵が強かったですが、再度エリィをメインに加え
エリィの先制＋全員攻撃で
バーストをためながら、ＣＰをためていきます。

すべての敵を駆逐し、宝も改修した後、回復ポイントがでてきたので
またエリィをリーシャに変更。

ロイド、リーシャ、ランディ、ティオでシャーリーに挑みます。

開始直後ロイド×リーシャのコンビクラフト「比翼双竜撃」
ロイド×ランディの「バーニングレイジ」を叩き込みます。

すると、シャーリーが反撃。
Ｓクラフト「デス・パレード」を発動。

１６０００でランディ以外全滅。

思ったより強いなー

またゼロフィールドで凌ぐしかないのかな。

あとは、アイオーン戦と同じように
ランディとロイドに勝利のルーンを使わせて
ＥＰを回復＋攻撃力アップのＳクラフトで短期決戦かな。

リセットをして再戦。

そういえば、ティオのマスタークォーツ、カノンもちょっと前にＬＶ５にあがったので
勝利のルーンが使えるはず。

ティオに勝利のルーンを使わせようと思ったところ、
なんだか、勝利のルーンではなく、「慈愛のルーン」というのを覚えていた。

「慈愛のルーン」の説明を読んでみると、
発動時に全員のＨＰが半分回復（これはたいしたことがない）が
継続すると、相手からのダメージ半分にしてくれるというもの。
（毎ターンＥＰ１００消費）

これはありがたい！
発動がわからないＳクラフトを使ってくるやつにゼロフィールドに頼らなくても
凌げるということか。

これは使わない手はない！

開始直後、ティオの「慈愛のルーン」を発動。

しかも、「慈愛のルーン」を発動中、
ティオの番が回ってくると、継続時（ＥＰ消費はＥＰ１００必要）
全体に毎回３０００〜４０００のダメージも与えてくれる。

ティオにＥＰ３＋省ＥＰ３をつけて
ＥＰが１０００以上で発動をし続ける。

初回時に２００、継続に１００必要だが
省ＥＰ３のおかげで、初回が２００→１５０、継続が１００→７５ですみ、
戦闘の最初から最後まで一度もＥＰ回復しなくても
発動し続けられるのは便利。

ものすごく便利だな・・・
これさえあれば、過去に倒せなかったシグムントやアリオス、アリアンロードなどの
ボスもすべて倒せるのではないだろうか。

シャーリーのＳクラフトが前回は１６０００くらいましたが
慈愛のルーンのおかげで８０００程度ですみました。

ゼロフィールドに頼らずとも、
シャーリー、らくしょー！！！

あとはリーシャを回復役にして
ロイド、ランディのクラフト＋慈愛のルーンによるダメージで、シャーリー撃破！

碧の軌跡 攻略・プレイ一言日記 　目次

— posted by midilin @ 11:57AM | Comment (0)

WinXPに代替するため、OSのXubuntuをいれ、さらに軽量化したLXDEの導入、
それと無線LAN接続、
ネットサーフィンのための軽量ブラウザのインストールまで終わりました。

しかし、過去にWindowsで使ったフリーソフトなどが使えないのは、ちょっと残念ですよね。


Windowsであれば、Windows上でMacやLinuxを仮想で作る
Vitural PCやVm ware、Vm Playerなどありますが
Linuxでも仮想環境を使って、Windowsを実行する方法があるようです。

仮想化ソフトVirtualBoxを使う
http://www.sohokoganei.org/ubuntu/virtualbox.html
http://okaz.web.fc2.com/CCP102.html

ただし、上記のページでも書いてありますが
最低でも最近のWindows7がプリインストールされたマシン程度のスペックが必要とのこと、

Windowsで、Vitural PCやVm ware、Vm Playerでも使ってきましたが
それなりのスペックが要求されました。

少なくとも、私のDynabook G7（CPUがPentium4の1.9G、メモリが512M）では
とても動く代物ではありませんでした。

そこで、仮想環境を作らずに、WindowsアプリをLinuxで実行する方法がないか調べてみたところ、
Wineというツールがあるようです。

●Wineとは
http://ja.wikipedia.org/wiki/Wine
・オープンソースの Windows API 実装を通じて、Unix 系 OSにおいて Windows 用アプリ動作させることを目標とするプログラム
・X Window System を利用して、16 ビット・32 ビット・64 ビット Windows 向け GUI アプリケーションを動作させることができるほか、MS-DOS 用アプリケーションも動作する。

wineを使うと、FFFTPや秀丸、officeなども動くようです。

●wineの動作状況

Ubuntu上のファイルをFTPで同期(Wine:FFFTP)
http://noichigo.moe.hm/~diary2/index.php?e=458
→「ffftp」が動くようです

とってもやさしいwineの使い方
http://d.hatena.ne.jp/keita_yamaguchi/20070823/1187860232
→「秀丸」、「xyzzy」が動いたとのこと

ubuntu10.04のWineでOffice 2007を使えるようになるまで
http://d.hatena.ne.jp/kita_yuta/20100615/1276606183
→「office2007」が動いたとのこと

http://gihyo.jp/admin/column/01/emulator/2008/wine01
→広告が出るが、スキップすると、Windowsの「エクスプローラ」が動いていることがわかる

CentOS 4.0 - WineでInternet Explorer(IE6)を動かす
http://park1.wakwak.com/~ima/centos4_wine0001.html
→CentOSで、「IE6」、「Media Player」、「outlook express」が動いている


仮想環境を作らずともWindowsと同じで、ソフトを使えるのであれば、
使わない手はありません。


●wineのインストール

http://0i.cocolog-nifty.com/blog/2009/07/xubuntuwine-959.html
のサイトを参考にしました。

・[システム]→[システム管理]→[Synapticパッケージ・マネージャ]
・「Wine」で検索
見つかったらインストールします。

しかし、インストールをしようとしたらエラーが出てとまりました。
（なんかが特定できません、みたいなエラー）

意味がわからなかったので、再度同じことをやってエラーメッセージを
調べようと思ったところ、今度はエラーが出ずにインストール完了。
さっきのエラーが気になりますが、見なかったことにしましょう。

●wineの動かし方

動かし方がわからないので、ネットで調べます。

---

WineでWindowsアプリケーションを動かす
http://linuxsalad.blogspot.com/2007/06/winewindows.html

とってもやさしいwineの使い方
http://d.hatena.ne.jp/keita_yamaguchi/20070823/1187860232
winefileを起動
(メニューから「アクセサリ」「Wine File」をクリック）
あとはWindowsと同じ

---

コンソールをひらいて、wine ウィンドウズのフリーソフトのexe
をやりましたが、動きません。
さらに調べます。

---

Ubuntu Tips/アプリケーション/WineでWindows用アプリケーションを動かそう
https://wiki.ubuntulinux.jp/UbuntuTips/Application/Wine
Ubuntuの公式ページより

Nautilus (ファイルマネージャ)から
圧縮されている場合は形式に応じて展開しておいてください。
GNOME のメニューの場所よりインストールしたいアプリケーションのインストーラー( *.exe のようなファイル名のファイル)を右クリックして"Wine Windows Program Loader"で開くを選択してください。

---

と書かれていますが、「Wine Windows Program Loader」というのが見当たらない。


インストーラを指定するようですが、メニューを見ると「uninstaller」
というのがありますが、名前からしてアンインストーラなので
ソフトを削除するときに使うものですよね。

私のような超ど素人でもわかるようなページはないのか・・・・
さらに探します。

WindowsとLinuxの間で「共用」作戦（その３）
http://www.geocities.jp/breederfrankie/wine.html

の「WINEにWindowsソフトをインストールしてみよう」
とのところに、図解して説明がありました。
これだーーーーー！！！

ようやく、わかりやすいページにたどりつきました。

ここによると、

---

「uninstaller」を使った方法を　ご紹介しようと思います。
　名前はアンインストーラー（削除）という名前ですが、実際には　インストールとアンインストールの両方が出来るウィンドウ

---

と書いてありました。
アンインストーラで、ファイルをインストールするなんて、わからないよ・・・・

でもようやくわかりましたので、アンインストーラ「uninstaller」を起動。
すると、アプリケーションのインストール画面が出てきました。

ここで、秀丸やFFFTPのexeファイル（インストール前のインストーラファイル）を指定したところ
無事、秀丸やFFFTPもインストール！
（ただし、秀丸の最新版V8.10は、インストーラが起動しませんでした。
　古いバージョンのver3を入れたところ動きました）


●WindowsのソフトをLinuxに入れまくる

FFFTP、秀丸を入れましたが、
あとは、オフィス系ですね。
OpenofficeやLibreoffice（Openofficeの後継）があるので
フリーでできますが、VBAのプログラムを結構使っているので、
Excelだけ古いバージョンを入れたいです。

古いExcel2000を入れることにしました。

http://d.hatena.ne.jp/kita_yuta/20100615/1276606183
にあるように、インストール画面は文字化けしましたが、
無事Excel2000もインストール＋起動完了しました。

次にDreamweaverを入れたところ、インストールは成功したのですが
起動しません。
正確には起動をすると、ずっとスワップしっぱなしです。

よって、Dreamweaverは削除。

あと、さくらエディタ（こちらもインストールは文字化け）、起動は成功。


●インストーラがないWindowsのソフトを動かすには

さて、インストーラがついているものは、上記の「アンインストール」で
インストールできますが
exeファイルを直接指定して、動かすインストーラがないものは
どうすればよいのでしょうか。

調べてみます。

---

Wine_Ubuntu8.10
http://linux.enegai.jp/modx/wine_ubuntu_2.html
Ubuntuで Wineを 使って Ｗin互換に したいのですが
http://qanda.rakuten.ne.jp/qa6246821.html
フリーウェアでシミュレーション結果アニメーションを作る Linux/UNIX でも Windows 資産を使いたい
http://www.cfca.nao.ac.jp/~takedatk/COMPUTER/HowToMakeAnimation/Wine/Wine.html

などに情報が書かれていました。

私は、インストーラに成功したFFFTPがデスクトップにショートカットで置かれていたので
これをテキストエディタ（gedit）で開いたところ
テキスト情報で、起動するパスとかが書かれていたので、

デスクトップに空ファイルを作成、
FFFTPのショートカットの内容をコピーし、
他のフリーソフトのexeファイルを記述したところ、
無事、インストーラがないものも起動しました！


インストーラを起動しなくても、
以前のWindowsのFFFTPがあれば、設定情報なども
すべてLinuxにひきつがれていました。

あとは、Iria（ダウンロードソフト）など、
フリーソフトを片っ端から入れてみましたが
たいてい、動きました。

すごいですねー

WindowsXPの有効期限切れ無料対策 古いＰＣを使い続けよう　Xubuntu日記 目次

— posted by midilin @ 12:02PM | Comment (0)

有効期限が切れるWinXP。
新しいPCを買うのはもったいない、でもWin7や8は古いし入らない。
そんな古いWinXpマシンを、XPの有効期限期限が切れても使い続けるLinux講座です。

(1) ubuntuを入れてみる
(2) wubiを使ってubuntuを入れてみた
(3) Xubuntu、Kubuntu、Fluxbuntu、Lubuntu、fluxbox
(4) wubiを使ってXubuntをインストール
(5) Xubuntuの日本語化
(6) Xubuntu 無線LANがつながらない
(7) Xubuntu 軽量ブラウザ「epiphany」を入れてみる
(8) LXDEでさらにXubuntuを軽くする
(9) LXDEで無線LANがつながらないのを解消する
(10)低スペックLinuxでWindowsのアプリを実行するワイン（Wine）

— posted by midilin @ 11:50AM | Comment (0)

AuthenticationExceptionは
認証系のエラーなので、プロキシの問題が考えられる。
googleカレンダーやアナリティクスのapiアクセスには
httpsを使うと思われるので、
クライアントログイン（ClientLogin）で

〜.setUserCredentials（ID,パスワード)
で認証時に
AuthenticationExceptionが出てしまった場合は、
プロキシで
System.setProperty("https.proxyHost", "xxx.xxx.xxx.xxx");
System.setProperty("https.proxyPort", "1234");
をするとうまくいくこと有。

— posted by midilin @ 11:44AM | Comment (0)

System.setProperty
で設定する。
httpとhttpsは別ものとして扱われる。

System.setProperty("http.proxyHost", "xxx.xxx.xxx.xxx");
System.setProperty("http.proxyPort", "1234");
System.setProperty("https.proxyHost", "xxx.xxx.xxx.xxx");
System.setProperty("https.proxyPort", "1234");

http://java.sun.com/javase/ja/6/docs/ja/technotes/guides/net/proxies.html
http://labs.techfirm.co.jp/apps/iguchi/48

— posted by midilin @ 11:41AM | Comment (0)