linked by blog-tools
以前からソーラーパネルはいろいろあったのですが、手頃なものが見つかったのでAnker ソーラーチャージャー 折りたたみ式 PowerIQ搭載を購入しました。
ANKER のもので上のものとその倍のパネル数のものがラインナップされていてPowerIQを搭載しているのでiOS、Android製品であれば、最も最適な状態で充電してくれます。
パネルが２枚のものは出力が最大1Aで日が当たれば夕方でも0.3~5A程度出力され、モバイルバッテリーに充電できるぐらいの出力が得られたのでしばらく、モバイルバッテリーの充電に使ってみようと思っています。
もともと、防災用に欲しかったのですが、カーテンレールから吊るせば普段も使えるので常用になりそうです。
iPad mini、Nexus7ともに充電可能でした。
linked by blog-tools
この１年、タブレット向けのサイトを作る機会が増えてきたので実際の解像度とブラウザーの表示サイズが異なることで起こる問題の対処法をまとめました。
ターゲットとするタブレットのアスペクト値によって多少変わりますが、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);
}
読み込み中にユーザーがスクロールしているときには動作しないよう、スクロールを検知するようにしています。
気になるところはご指摘いただければ対応します。また何かわかれば追記します。
タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。
デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。
一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。
自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。
JavaScriptで window.orientation を使うと角度が取得できる。
自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は（jQuery使用）
var orientation = window.orientation;
//角度の取得if((orientation == 0)||(orientation == 180)){
//横長のときの設定
var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);
といった感じで設定。
よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。
未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。
$.browser.android = /android/.test(navigator.userAgent.toLowerCase());
$.browser.iphone = /iphone/.test(navigator.userAgent.toLowerCase());
$.browser.ipod = /ipod/.test(navigator.userAgent.toLowerCase());
function fontsizeset(){
var defaultwidth = 480;//スマートフォンのデフォルト想定幅
var fsize = 20;//デフォルトフォントサイズ
var devicewidth = $(window).width();
var docwidth = $(document).width();
var deviceheight = $(window).height();
var docheight = $(document).height();
if(devicewidth>deviceheight){
var resizelength = Math.round((deviceheight / defaultwidth ) * 100)/100;
}else{
var resizelength = Math.round((devicewidth / defaultwidth ) * 100)/100;
}
var newfsize = fsize * resizelength;
if(( $.browser.android )||( $.browser.iphone )||( $.browser.ipod )){
$("body").animate({"font-size": newfsize},"slow");
}
}
$(document).ready(function(){
$(window).bind('resize load', function(){
fontsizeset();
});
$(window).load(function(){
fontsizeset();
});
});
タブレットでの表示は通常表示を前提に、スマートフォンで極端に小さくなってしまうフォントサイズを端末の幅に合わせて可変するスクリプト。
端末の表示幅は2011年春•夏に発売されている端末の多くが採用している480pxをベースに幅に合わせて指定しているフォントサイズが変更される仕組みにしています。また、横長にしたときは縦、横、短い方を基準にリサイズするようにしているので極端にサイズが大きくなることはないようになっています。
可変スクリプトを「ON」にした状態のサイトはこちら
今後、スマートフォンもHD対応のサイズが主流になりつつある中、端末に応じたCSSをかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。
linked by blog-tools
前回のものをDINで作成。
名刺デザインは15,000円からcdbk.net CREATIVES.にて受け付けております。
写真はFilickrにも
バッテリー内蔵型の小さなヘッドホンアンプ。
価格は4000円以下で手に取りやすい価格。
コントロールできるのは電源、音量、ベースブートのみというシンプルな設計で給電はmini USB端子、クリップがついているのでiPodなどのオーディオプレーヤーとヘッドホン、イヤホンとの間にリモコンのようにつけることもできる。
肝心な音質は、値段相応？といったところ。今のヘッドホンじゃ何か物足りないという場合にいい効果をもたらしてくれるだろうといったところ。
実際、音楽をというよりもPSPやDSなどのゲーム機で使った方が効果は絶大で音の迫力が出ました。
他社製品の情報としてはオーディオテクニカが年末から初春にかけてヘッドホンアンプ関連の製品を出すので、そちらも気になります。
AT-PHA30iのレビューはこちら
とはいえFiiO、実は中国のメーカー。製品の精度は国内のものとさほど変わらない。いよいよ本格的に中国勢の日本進出？
[追記]もう少しいい音でと言う人にはドックコネクターに直接FiiO E5を繋げて聴くことをお勧めします。
そのための製品はaudiotrakの「AT-iap1」。
ネットブックを使ってみるとこのブログやウインドウのサイズを指定して開かれるページがあるとすごく操作しにくいところがあったので、自分は実際のスクリーンより広く使えるように設定をしてみました。そのキャプチャーを載せておきます(Windows XP)
1. .画面のプロパティを押して「設定」タブを選択
2. 「詳細設定」をクリックして出てきたウインドウの「モニタ」タブを選択
3. 「このモニタでは表示できないモードを隠す」のチェックを外し、「適用」をクリックしたあと「アダプタ」タブをクリック
4. 「モードの一覧」をクリックして出てきたウインドウで希望のウインドウサイズ、ビットレートを選択し、「OK」をクリック
5. そして、「適用」→「OK」を押す。
6. 完了。
以上でスクリーンより広い設定を行うことができます。カーソルを端に寄せるとスクロールして表示してくれるようになります。