2017年5月12日金曜日

パソコンでAndroidスマホを動かしてみる

””
スマホやタブレットからのアクセスが増えてきて、気になったのがモバイル端末でのレイアウト崩れや操作性です。

Google Chromeの場合は拡張機能のUser-Agent Switcher for Chromeやデベロッパーツールを使えば各端末のプレビュー画面を表示できますが、いまひとつといった感じ。

User-Agent Switcher for Chromeの画像
【User-Agent Switcher for Chromeの場合】

デベロッパーツールの画像
【デベロッパーツールの場合】
とはいえ、全ての端末を買い揃えるわけにはいきませんよね。

そこで高速で扱いやすいと評判の「Genymotion(ジェニーモーション)」を導入してみました。

Genymotionとは

Genymotionはエミュレーターと呼ばれるソフトの一種で、パソコン上でAndroid端末を動かすことができます。

Genymotion公式HP画像

オープンソースで開発され、個人利用であれば無料で使用可能(機能制限あり)。
Windows、Mac、Linuxに対応しています。

システム要件の確認とGenymotionのインストール

GenymotionはOracleのVirtualBox上で動作する仮想マシンです。
そのため、インストールの前にパソコンがシステム要件を満たしているか確認する必要があります。
WindowsでGenymotionを動かすには
  1. Windows Vista以降のOS……32/64bit両方に対応
  2. VT-x or AMD-Vに対応……「VirtualChecker」で確認
  3. ビデオカードがOpenGL2.0以降に対応……「OpenGL Extensions Viewer」で確認
    OpenGLのダウンロード場所
    ※ページ中ほどにWindows用のダウンロードボタンがあります。
  4. HDDの空き容量400MB以上、仮想マシンを格納するため別途2GB程度の空き容量が必要
  5. メモリ2GB以上
システム要件を満たしていたら公式HPの「Sign In」をクリックしてアカウントを作成しましょう。
ユーザー登録を済ませればGenymotionをダウンロードできます。
https://www.genymotion.com/

インストールファイルにはVirtualBoxが同梱されている「Get Genymotion」と同梱されていない「Get Genymotion(without VirtualBox)」の2種類があります。
VirtualBoxをパソコンにインストールしていない場合は「Get Genymotion」をダウンロードしましょう。

ダウンロードした「genymotion-x.x.x-vbox.exe」を起動するとインストーラーが立ち上がります。
先にVirtualBoxのインストールが始まり、次にGenymotionがインストールされます。

この時、すでにVirtualBoxがインストールされている場合は途中で上書きするかどうかを聞かれます。

仮想デバイスの設定

Genymotionを起動したら仮想デバイスを追加します。
すると使用できる仮想デバイスの一覧が表示されますので、その中から好きなものを選びましょう。

仮想デバイスを選択

今回はGoogle Nexus10 5.1.0、Sony Xperia S 4.1.1、Sony Xperia Z 4.2.2 をダウンロードしました。
あとはそれぞれのデバイスで日本語化とキーボードの設定をすれば普通に使えます。
インストール方法や設定はもっと詳しい解説サイトがありますので探してみてください。

Genymotionを使ってみた感想

今回Genymotionをインストールしたパソコンは、Windows7 4GB 32bitです。
CドライブのHDD容量が少ないので1TBのDドライブにインストールしました。

Google Nexus10 5.1.0の端末画像
【Google Nexus10 5.1.0】
仮想マシンはもっさりとして動きが重いというイメージがありましたが、不自由なく使えています。
全画面表示や縦横の切り替えもスムーズですし、パソコンからも使いやすいです。
何より、色々な端末を手軽に試せるのは嬉しいですね。

デフォルトではGoogle Playアプリを使えませんが、こちらはもっと簡単に設定できます。
興味のある方は試してみては。
インストールの前にシステムイメージのバックアップを忘れないで下さいね。
 

2017年3月25日土曜日

+20種 Bloggerの新しいテンプレート

Bloggerを開いたら新テンプレート追加のお知らせが。
モバイルで動作が早いというし、早速サンプルを見てみたのだけれど、20種類もあるのに好みのものがない。
新テンプレート20種
カバー写真がやたら大きかったり、字が小さかったりして使いづらそうなんですよね。
手直しする手間を考えたら、ダサいけれどこのままシンプルテンプレートを使い続けた方がいいという結論に達しました。

オシャレっぽいものもあるにはあるんですけどね。
当ブログには合わないので今回はスルー。
 

2017年3月17日金曜日

rel="nofollow"の使い方がよくわからないのでGoogleの貼り方を確認してみた

更新日:2017年08月19日(土)
""
最近気になっているのが「rel="nofollow"」の使い方です。
rel="nofollow"は設定したリンク先のページを検索エンジンがたどらないよう、指示を与える時に使います。
これにより、検索エンジンで自分のサイトの評価が下がることを防げます。

Googleが推奨する使い方は
  • 信頼できないコンテンツ
  • 有料リンク
  • クロールの優先順位  
となっています。――特定のリンクに対して rel="nofollow" を使用する

引っかかったのが「信頼できないコンテンツ」です。
管理人は以前、リンク先のサイトがペナルティを受けている場合もあるので、外部サイトへのリンクには"nofollow"を付けるようにアドバイスされ、その通りにしてきました。

ですがGoogleは外部リンクにもれなく"nofollow"が付いたサイトは不自然としています。

ネットで検索すると「一般ユーザーが"nofollow"を付けても意味がない」「ネタにしておいて"nofollow"を付けるなんて失礼だ」という意見もあり、よくわからなくなってきました。

そこでふと思いたち、Googleの外部リンクを確認してみました。
あれ…?
Googleトップページの外部リンクが「rel="nofollow"」になってる。

赤枠で囲まれ、打ち消し線が引かれている部分がrel="nofollow"付きのリンクです。
"nofollow"の付いたGoogleの外部リンク
リンク先は「未来への学び」というサイトで
URLはhttps://miraimanabi.withgoogle.com/です。

withgoogle.com」なのにフォローしてないことに驚きました。

Googleのトップページは外部リンクをあまり張らないので全く気付いてなかったけど、しっかり"nofollow"にしてたんですね。
スクリーンショットは撮り忘れましたが、別のサイトのリンクも"nofollow"でした。
今までGoogleがリンクするサイトって何の根拠もなく「信頼できるサイト」なんだと思っていました。

考えてみれば当たり前ですよね。
Googleだからこそ評価できないサイトがわかるってことでしょう。
withgoogle.comだけど…。

rel="nofollow"の使い方はもっと単純に考えたほうが良いようです。
当ブログではGoogleにならってGoogleの公式サイト及びAdSenseの規約、ヘルプページ等を除いた外部リンクにrel="nofollow"を付けることとしました。

nofollow属性をしっかりと理解しているわけでもないし、いまのところそれが安全なのではないかと。
この先変わるかも知れませんが、現時点では使いこなせないので仕方ない。

Bloggerでは作成画面の「リンク」メニューをクリック→「リンクを編集」で簡単にrel="nofollow"を追加できます。
リンクを編集
HTMLに詳しくなくても追加できるので助かりますね。

■リンクがrel="nofollow"かどうかをひと目で見極めるにはGoogle Chromeの拡張機能が便利です。
※「NoFollow」はGoogleウェブストアで入手できなくなったようです。
拡張機能の使用は自己責任でお願いします。
 

2017年3月6日月曜日

PowerDVD12.0の最新アップデートパッチがリリースされてた

更新日:2017年06月17日(土)
PowerDVD12インターフェース
管理人が使っているPowerDVDはバンドル版のバージョン10から12へアップデートしたものです。

これまで何度かBlu-rayを再生できなくなっていましたが、その都度アップデートを繰り返し、現在に至っています。

今回のアップデートパッチ(3回目になります)は
PowerDVD_12.0.38276.7006_T2_Patch_DVD161220-16.exe です。
アップデートパッチのダウンロード から入手できます。

不具合が出ると困るのでシステムイメージを保存後、インストールしました。
PowerDVD12のアップデート自体かなり間が空いていたので心配でしたが、すんなりとアップデートできました。
時間にして数十秒ほど。
市販Blu-rayは試していませんが、地上波を録画したDVD/Blu-ray、市販DVDは今のところ問題なく使えています。

再インストールの場合はPowerDVDを一旦アンインストール後、前回のアップデートパッチ
PowerDVD_12.0.31791.5522_T2_RITA13_BD_DVD150708-04.exe と
PowerDVD_12.0.38276.7006_T2_Patch_DVD161220-16.exe  を
順番にインストールします。

PowerDVD12の調子が悪いな、という方は試してみては。
アップデートパッチの使用は自己責任でお願いしますm(_ _)m
 

2017年2月26日日曜日

Bloggerのガジェットをモバイルで任意の場所に表示する方法

ガジェットを追加画面
Bloggerではガジェットを追加できますが、デフォルトではモバイルに表示されません。
モバイルでガジェットを表示する場合は、レイアウト画面でガジェットを追加し、「HTML編集画面」で「mobile='yes'」を設定する必要があります。

ただし、これだけではガジェットがフッターに表示されてしまいます。
縦に長い記事だと不便なので任意の場所に表示します。
フッターに表示された検索ボックス
テンプレートをいじるので保存してから作業を進めましょう。
今回は例として「ブログ検索」ガジェットをモバイル表示させます。
ガジェットを表示させたい場所に★マークなどの記号を入れておくと目印になり、作業がスムーズに進みます。

手順1.レイアウト場面で「ブログ検索」ガジェットを追加し、「設定を保存」をクリック。
ブログ検索ガジェットを追加

手順2.テンプレート→HTMLの編集で「ブログ検索」ガジェットへ移動し「…」をクリックして展開します。
ブログ検索ガジェットをクリックして展開

手順3.展開したら以下のコードを抜き出してコピー。
<form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>

手順4.ガジェットを表示したい場所にコードを貼り付けます。
そのまま貼り付けても良いですが、管理人の場合はセンター揃えにし、「このブログを検索」というタイトルを追加。
さらに検索ボックスとタイトルの間隔を開けたかったのでマージンを指定しました。
以下のコードをコピーしてそのまま使えます。

<!--スマホ投稿タイトル上・ブログ内検索-->
<div align='center'>
<div style='margin:0px 0px 0px 0px;'>
  <font size='2'>このブログを検索</font></div>
<div style='margin:5px 0px 0px 0px;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='20' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
     </div></div>
<!--スマホ投稿タイトル上・ブログ内検索-->
設置見本

検索ボックスのサイズが小さかったので10から20へ変更し、投稿タイトル上と記事下の2ヶ所に設置しました。
マージンと検索ボックスのサイズはお好みで調整してください。

この方法ですべてのガジェットをモバイルの任意の場所に表示できます。
よければお試しください。

【関連記事】
Bloggerのラベル表示をモバイルでプルダウン化する