2015年02月06日

iPhoneの操作動画を簡単に綺麗に録画するには(ただしMacのYosemite以降限定)

ちょっと動画の作成を頼まれて、今日一日でReflectorやらAirServerやら触ってみましたが、あいつらネットワーク経由で操作するもんで動作が遅い、画質が悪い、音が途切れる、果てはネットワーク回線が遅くなる・・・etc
Reflectorなんて、保存し始めた途端OSごと落ちる始末で困り果てていたところ、会社の友人に「YosemiteならQuickTimeでiPhoneの動画を録画できますよ」とあっさり言われました。
なにー!と試してみたら、画質は綺麗だし、録音は音飛びないし完璧な録画!

やりかたは簡単です。
1) USBでiPhoneとMac(Yosemite)を繋ぐ
2) QuickTimePlayerを起動する
3) 「ファイル」→「新規ムービー収録」を選択
4) 録画ボタンの横にあるVを押して、iPhoneを選択
5) 音声もiPhoneのものを使うのであれば、Vからマイクの種類を選択
6) あとは録画ボタンを押すだけ(画面の赤いボタン)
SS.jpg


是非お試しを!
posted by BigMoonEz at 20:12 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2015年01月16日

ガンコンMSスキル検索の所持機体データ保存機能を追加

ガンコンMSスキル検索(http://gancon.iro.jpn.com/)に、自分の所持している機体を選択して保存できる機能を追加しました。
機体名の左側にあるチェックを入れて、一番下の「所持機体を保存」を押すと保存できます。
データはクッキーに保存しているので、違うブラウザを使う場合や、クッキーを消去するとデータが消えてしまいますのでご注意ください。
この機能により、自分の所持している機体の中で一番機動が早いのは何かな〜といった使い方が可能になります。
どうぞご活用ください!
posted by BigMoonEz at 10:46 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2013年09月27日

iOS7ではaudioタグの高さが高くなって文字が隠されてしまう

表題のとおりですが、iOS7ではaudioタグでembedされているコントロールバーの高さが、前の状態よりも高くなっているようで、それ自体はきちんと表示してくれれば問題ないのですが、なぜか上の行にかぶって表示されるようで、文字が欠けてしまいます。

こちらがiOS6での表示
iOS6での表示

で、こちらがiOS7の表示
iOS7での表示

ちなみにこちらは
<p>ここもPタグ</p>
<audio src="http://・・・.mp3" controls style="width:100%" />

というpタグとaudioタグが連なっているだけです。
特にCSSでの指定もしていません。

どうもChromeなど他のブラウザでも同様の現象なのでOS側の変更によるものと思われますが、対処法に悩みますね。
OSを判別して上下のスペースを開けることはできますが、直されるのかどうか・・・
ちょっと様子見でしょうか。

<10/2追記>
調査した所、

タグの方に、
margin: ○px auto;
の記述があると起きることがわかりました。
OSのせいではなく、CSSのせいでした。
どちらにしろ、解釈が間違っているのでバグだと思いますが、取り急ぎご報告です。

posted by BigMoonEz at 17:23 | Comment(1) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2012年10月29日

iPhone5でWifiの接続スピードが遅くなる問題がパケ詰まりと根本的に同じ問題なんじゃないかと

auではパケ詰まりなんて問題も深刻化しているようですが、今回はちょっと違った話で、iPhone5を自宅でWifi接続しようとするとスピードが遅すぎて使い物にならない、という話。

かくいう自分がその現象にあたりいろいろ調べていたらAppleのサポートコミュニティで関連スレをみつけたので、そのまとめです。

iPhone5でwi-fiのスピードが極端に下がる症状。
https://discussionsjapan.apple.com/thread/10116219

結局は明確な回答は得られていないようですが、いくつか対策手段が提案されています。
まずはルーター関連。
・11b限定にすることで改善
・11a限定のほうが早い場合もあり、接続するAPのクセがある
・11n のみ使うようにする(2.4 GHz 帯は 11b,g のみ)(提案)
・ただしBuffaloは802.11a/n と 802.11n/g/bを分けて設定出来る機種は限られる

iPhone設定関連
・LTEを切る(設定-一般-モバイルデータ通信)
・Bluetoothを切る

iPhone関連
・SIMカードの抜き差し
・本体初期化

Wifiの規格
・WiFi 規格にあるのは、WPA-TKIP、WPA2-AESでありBaffalo の無線APは WPA/WPA2、TKIP/AES のあらゆる組み合わせで使えるようにしてあるが、WPA-AESとWPA2-TKIP は規格に無いもので、アップルはサポートしていない
・セキュリティの観点からは、WPA-TKIP では部分的になら解読できることが分かっているので、WPA2-AES が望ましい

しかし・・・対策方法が初めに話題に出した「パケ詰まり」と同じものが多いのがなんとも・・・
結局iOS6.0.1のアップデート
http://bgr.com/2012/10/22/apple-starts-testing-ios-6-0-1-for-release-in-coming-weeks-ios-6-1-to-come-after-holidays/
の、「Wi-Fiサポートの改良」を待つしかないのかもしれません。
が、これも「パケ詰まり」対策と同じ状況という。。。
posted by BigMoonEz at 14:38 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2012年04月10日

メディアプレーヤーとか必要ないんじゃないか!?(だけど結論はまた次の機会に・・・)

だいぶ前から、たくさんある動画をテレビで観れないか考えていたんですが、最近メディアプレーヤーなるものがあることを知りまして、調べていました。

やりたいこととしては
・NASに置いてあるたくさんの動画(いろんな規格あり)をリビングのテレビで観たい。
・できれば家庭用のビデオもテープメディアなんで、そろそろHDDに移しておかないとなぁ
程度だったんですが、Buffaroに「LT-H90WN」という製品がありました。
こいつの特徴としては、
・無線LAN対応(NASのデータを無線で引っ張ってきて、TVに映し出すことができる)
・撮影したビデオをNASに保存することができるらしい
 (詳しいことはよくわかりませんが、そういう画面(機能)が用意されている模様
特にウチはTVが有線LANのモジュラージャックしかなくていままでネットに繋げなかったので、無線で繋げるのはこれはイイ!ということで、8割がたこれを買うことに決めていたのですが、いろいろ調べていたら問題点が・・・

価格.comのレビューなんかで出ていたんですが、
・NASの公開サーバーの設定が勝手に変更される
 (昨日まで見えていたフォルダが見えなくなった、など)
これは・・・ちょっと致命的ですね。PCで設定しないといけないらしんですが、まだ完成度が低いのかなという印象を受けました。

・対応しているビデオフォーマットが少ない。
 仕様を見ると、MPEG-1,MPEG-2,H264,WMV9,MPEG-4,Xvidとのこと。
まぁ結構対応してると思うけど、自分が持っている動画がちょっと古めのものが多くて、メインがDivXなんすよ・・・
それに一昔前に乱立していたよくわからないコーデック群には当然対応していないということで、まぁこれからはこの辺のコーデックだよなぁ、仕方がない、これを機会に全部変換し直すか・・・
でも2万はたけーなー
と、思い悩んでいたところ!
先日iPadをいじくってたら、こんなアプリを発見。
fex.jpg
File Explorer
ネットワークのファイルを一覧で表示して、中身を表示できるというアプリで、WindowsだろうがMacだろうがLinuxだろうが何でも表示させちゃいますよ!というアプリ。
PDFとか、静止画とか動画とか・・・あ、オフィスファイルは試してないな。
(ドキュメントにはrtf,html,ppt,xlsを表示させるとは書いてあります)
Basic認証にも対応しているし、宅内ネットワーク以外にも、iCloudやGoogle Docs、DropBoxにも対応(しかも複数アカウント対応!)している優れものです。

ふと気がついたのが、
「あ、これ使ってAirPlayでテレビに飛ばせばいいんじゃん!」
と考えました。
AirPlayは、AppleTVを持っていれば、遊んでいるアプリの画面や、動画などテレビに画面を映し出すことができる機能です。
(ただし対応アプリに限る)
詳しくはAppleのサイト参照

ちなみにウチにはもらったAppleTVがあるので、アイコンが出てきて気がつきました。
ただ、FileExplorerは、さらに対応するコーデックが少なく、H264エンコードのmov,mp4,m4v,mpvとのこと。
まぁどうせ再エンコする予定だったからいいか・・・

ということで喜び勇んで試してみたら・・・映らない。。。
コンテンツの読み込みができませんでしたとかそんなメッセージが表示されてしまいます。
あれおかしいな。写真とかAirPlayで飛ばせるのに・・・
と思っていろいろ調べてみたら・・・

どうもAppleTVには3世代あるらしく・・・動画やアプリを映せるようになったのは最近の世代のもののようです。

というわけで、ホントにうまくいくのかどうかまだわかりませんが、8800円で自宅イントラ内動画を見れるようにするかどうか、検討中です。
しかし、こういう方法もあるゾというご案内でした。

この記事、続くかどうか不明・・・

posted by BigMoonEz at 15:33 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2012年04月05日

Web制作者が知っておくと幸せになれる!スマホサイトを構築する上でのiPhoneアプリ3種

今回は、スマホサイトを作る時に・・・・いやそれ以外にも使えるWeb制作者御用達アプリを3つご紹介します。

SBplus
まずは、「ScriptBrowserPlus」。
こちらは、HTMLソースを確認したり使用されている画像を抜き出すことができるツールです。
同一ディレクトリで、PCとスマホでユーザーエージェントを使ってリダイレクトされている場合があるので、スマホ専用ページをPCでは表示できずにソースが確認できない、といった場合に大変有効です。
IMG_0497.PNG
他社のサイトを調査したい、というときにも使えますね。
iPhone上でソースを確認するのも大変なので、ソースをまとめてメールで送る機能も実装されています。
IMG_0498.PNG
また、極め付きなのが、その抽出したソースをその場で編集して実行結果を確認できる、という機能。
このスタイルシートを外したらどうなるか。。。なんてことも気軽にできてしまいます。
FirebugのiPhone版といったところ。(いいすぎかw)
IMG_0499.PNG
URLスキームにも対応しているので、Safariで見ていて、「あーこのサイトの構造知りて〜」というときに、URLをsbhttp://に変えれば、直接起動してくれる優れもの。
しかも何と言っても無料ってのがすごいです。
入れておいて損はない。


Roll
続いて2つめにご紹介するのは、「ロールペーパー」。
こちらは、画面のキャプチャをボタン1個で撮ってくれるアプリです。
使い方はシンプル。
右下のカメラボタンをタップすれば、カメラロールに保存されます。
IMG_0500.PNG
スマホサイトだとどうしても縦長のサイトになりがちですが、何回も分割してフォトショで加工して・・・なんて手間は省けます。
こちらも無料。
当サイトをキャプチャしてみた結果がこちら
IMG_0501.JPG


validator
最後は、バリデータチェックができる「Validator」。
最後だけ残念ながら有料(85円)です。
無料のバリデータチェックアプリもあったのですが、エラーがあるにも関わらず表示されなかったり、怪しいものが多かったので、やはり信頼は金に変えられん、ということで有料です。
こちらのアプリは、HTMLのバリデータチェックはもちろん、CSS、RSSフィードのチェックも可能です。
IMG_0504.PNGIMG_0505.PNGIMG_0506.PNGIMG_0507.PNG
こんな感じで、結構細かく、どこがエラーなのかまで表示してくれます。
先ほどのScriptBrowserPlusとあわせて使うとなかなか便利だと思います。

そんなわけで、Web制作者が知っておくと幸せになれるアプリのご紹介でした〜


posted by BigMoonEz at 11:20 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2012年02月29日

HTML5のaudioタグについてスマートフォンの対応状況を調べてみた

表題のとおりですがHTML5で実装可能なaudioタグってホントにスマホで使えるの?というのを検証してみました。
結論から言うと、Androidは2.3・・・うーん。4から。iOSは4から大丈夫(iOS3以前は持ってないのでスイマセン)。
まずはAndroidですが、Android2.1、2.2はご覧のとおり、コントロールバーすら表示されません。
device-2012-02-03-113125.png
Android2.3では、一応一通り再生するものの、mp3のストリーミング再生は対応せず。
Android4.0でやっとiOS並みの再生が可能です。
対応しているファイル形式は、
iOSは
○ wav,aif,mp3,aac
× ogg,flac
Androidは
○ wav,mp3,ogg,aac
× aif,flac
になります。
PCサイトと兼用だとwav、スマホ専用サイトであればmp3あたりが妥当なところでしょうか。

音声コントロールがまた厄介で、例えば1ページ中にいくつかの音声がaudioタグで並んでいたとすると、
iOSの場合は、どれかの再生を行うと、他の再生していた音声は止まります。
Androidも基本、そんな感じの動きをするのですが、激しく切り替えすると止まらなかったりちょっと不安定なところがありました。
さらにJavaScriptでコントロール制御できるのですが、Androidの場合だときちんと止まらないという話もプログラマーさんから聞きました。
Androidはバージョンが上がっていけば問題ないかもしれませんが、現状の2.2、2.3ユーザーが多い状況だと苦しいかもしれませんね。

確認した機種は
Android 2.1、2.2、2.3某実機 4.0シミュレータ
iOS4 iPhone3GS iOS5 iPod Touch 4th, iPad1, iPhone4

テストは音楽方丈記(http://sothis.blog.so-net.ne.jp/)さんの
テストページ
http://www11.plala.or.jp/sothicblue/html5audio/
を使わせていただきました。
ありがとうございました。



posted by BigMoonEz at 19:32 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2012年01月23日

スマートフォン用ページでリンク色の指定をする

最近、スマートフォン用サイトを作成していて、リンク色でいろいろ悩んだので備忘録的に。

一般的にHTMLでリンク色を指定するときはCSSで
a:link
a:visited
a:hover
a:active
で指定します。それぞれの意味とか、某ブラウザでは順番間違えるとうまく効かないとかありますが、それはまた別なハナシ。

スマホの場合、リンクというよりもタップしたときの反応色を指定します。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
*CSS3
RGBとalpha値を、それぞれ0〜255、0〜100で指定するわけです。
alphaが0ですので、上記の指定方法は色を見せない、タップしても色が変化しない記述です。
このあたりの仕様も他のサイトに任せるとして、現在のスマホの2大勢力、AndroidとiPhoneの挙動が異なります。
iPhoneというかiOSの場合は、上記のCSSの記述で問題ありませんが、Androidではこの指定は効きません。
ただし、Androidでは上記の「表示させない」記述だけは効くようです。意味がわかりません。
そのため、jQueryMobile1.0では、アプリっぽさを出す演出かどうか不明ですが
jquery.mobile-1.0.cssの中の
.ui-mobile-viewport 部分で上記の指定をしています。
#関連記事
http://www.interactivebynature.net/blog/wordpress/2011.07.13.jquery-mobile-enable-tap-highlight-color

では、この指定をはずすとどうなるのか?
デバイスに依存したリンク色が表示されます。
iOSではalphaがかかった薄いグレーの背景がつきます。
Androidでは背景の色はつきませんが、緑やオレンジといった派手な枠の色がつきます。
押した感が出るのでいいと言えばいいんですが、ちっと格好悪いです。


ちなみに上記に載せた一般的なaタグのリンク指定ですが、これは
iOSの場合はa:active
Androidの場合はa:hoverの色がタップしたときに表示されるようです。

どちらにしても一瞬の表示で、すぐに次のページに移りますので重要なのか?と思われるかもしれませんが、どこをタップしたかわかりやすいので、結構重要です。

では、どのデバイスでも同じリンクの表現をできないのか?
という答えは、実際に試していないのでわかりませんが、

iOS・Androidのハイライト表示の指定について。(最下部のjs)
http://www.sprouthead.com/blog/css/highlight.html

iPhoneでa:hoverを実装する(クラスを作成し、個別のリンクに適用)
http://xirasaya.com/?m=detail&hid=232

あたりを参照すると幸せになれるかもしれません。


もっと読む>>>
posted by BigMoonEz at 14:20 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする