投稿者: admin Page 25 of 47

古いAndroidの標準ブラウザへの簡単な対応

古いAndroidの標準ブラウザへの簡単な対応

ふるいAndroid標準ブラウザはCSSなどの対応がひどいので対応は基本しないのですが、
もしかしたらアクセスがあるかもしれないため簡単に対応はしたいので以下の用にしています。

(もう少し丁寧に表示することもできそうですが、JSのコードのみで判定してHTML側はクリーンに保ちたいこともあり。)

var app = {};
    app.ua = (function (u) {
        return {
            Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
            || u.indexOf("ipad") != -1
            || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
            || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
            || u.indexOf("kindle") != -1
            || u.indexOf("silk") != -1
            || u.indexOf("playbook") != -1,
            Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
            || u.indexOf("iphone") != -1
            || u.indexOf("ipod") != -1
            || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
            || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
            || u.indexOf("blackberry") != -1,
            Android: (u.indexOf("android") != -1),
            AndroidBrowser: (/android/.test(u) && /linux; u;/.test(u) && !/chrome/.test(u))
        }
    })(window.navigator.userAgent.toLowerCase());

    if(app.ua.AndroidBrowser){
        $('body').prepend('<p style="margin:0;padding:10px;font-size:14px;background:#ffe;color:red;position:relative;z-index:99999">現在お使いのAndroid標準ブラウザはGoogleのサポートも終了しており動作保証外となります。<br>セキュリティ上の危険もありますので別のブラウザアプリ(GoogleChrome等)の利用を推奨いたします。</p>');
    }

参考サイト

https://plus.google.com/+AdrianLudwig/posts/1md7ruEwBLF
http://internet.watch.impress.co.jp/docs/news/685459.html
http://blog.bridge-net.jp/2017/04/okashi_android
http://www.flexfirm.jp/blog/article/402
http://www.chaordic.co.jp/memorandum/2016/06/android.html

http://qiita.com/narikei/items/ada44891cb0902efc165

robot.txt とかカノニカルタグとか、sitemap.xml とか

いつも入れる必要?いれない不要?入れたほうがSEO的に(迷信だよ)?いや、もしものために念のために、
ってなるので再度調べてまとめておくことに。

robot.txt

登録したくないコンテンツが含まれる場合のみ必要で、基本必要ない。
ただし、以下の参考サイトにあるとおり、

サイトに robots.txt ファイルが存在するがアクセスできない(言い換えれば、HTTP ステータス コード 200 または 404 が返されない)場合は、クロールすべきでない URL をクロールすることにならないよう、クロールを延期します。

つまりサーバーで何かしらの不具合などで robots.txtが404,200も返さない状態になったらクロールしないよ。とのこと、常にSeachConsoleなどでサイトを管理している場合は問題ないがそれ以外の放置している系のサイトは入れていたほうが無難っぽいです。あと最近のWordPressの場合は以下のようなrobots.txtを仮想で生成してくれます。(※注意パーマリングの設定が?p=123とか、サーバーのリライト設定が有効でないと生成されない)
(WordPress自動生成のrobots.txt 管理画面を除外してくれている)

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

参考サイト : Google Search Console ヘルプ
https://support.google.com/webmasters/answer/2409682?hl=ja

カノニカルタグ(canonical)

  • 複数あるURLを正規化、www有、無などあるので基本入れたほうが良いっぽい、
  • ただ静的(Static)なコンテンツの場合はメンテナンス性も落ちたりURL変更時の編集コストなどが高そう。なにか変更の際のうっかり変更もれは注意。
  • スマホがページ別等の場合は必須かな。
    GogoleのSearch Console ヘルプでの説明は以下。このページ自体もちゃんと入ってますね。
    参考 : Search Console ヘルプ
    https://support.google.com/webmasters/answer/139066?hl=ja

動的サイトなどの場合はヘッダーは共通のはずなので入れて置くほうがよいかも

環境変数などで簡単に設定できるはずなので、入れておけば無難かな。

静的サイトは入れなくてもよいのかも

基本SEOアクセスを気にするようであればAnalyticsで気づくはず、気付かないれべるの気合なら入れないほうが皆幸せかも。

サーバー側で、

www 有り無しの統一などはしてあげてあげると良いかも。

sitemap.xml

こちらは基本的には、サイトマップが必要かどうかを検討する必要もありそうです。
他のページからリンクされているページは基本クロールされそうだけどそもそもリンクが無いページをインデックスさせるケースとか設計的にかなり特殊そうな気もする。
あとは初期公開のサイトや、リニューアルでURLが変更になったりなどのばあいは、クロール漏れなどは怖いので念のために入れておきたい気もする。(合わせてページ変更の302リダイレクトなども)

以下のGoogleのヘルプページの、‘サイトマップが必要かどうか’ 部分が参考になります。

参考 : サイトマップについて Search Console
https://support.google.com/webmasters/answer/156184?hl=ja&ref_topic=4581190

ページが多いサイトでのメンテナンスも大変なので、基本はなしで、必要な際に設置、ボリュームが莫大なら自動生成プログラムや、WordPressだとプラグインで自動生成が楽そう。

Search Consoleの登録

検索キーワードがAnalyticsでほとんど見れなくなっているので、こちらでアクセスに繋がったキーワードの表示順位や実際のアクセスになったかなど非常に有益な情報をみれたり、クロールのエラーなども検知できるので必須といえます。
(そういえば昔、Bing – Web マスターツールって登録したけど全然みなくなったな、なにか有益な活用方法など教えて欲しい)
あと、AMPのエラー検知なども便利。

Evernote Mac Version 6.11.1でコードブロックを入力する方法 は ”“`[Emter]”と入力

いろいろ調べた方法でためすもどうしてもできなかったのですが、"[Emter]"と入力するとできました。

Adobe AIR HTMLLoaderでGoogle Maps JavaScript API(バージョン3.28.7)が使えなくなった。>>フローズンバージョン(v=3.20)指定で表示できた。

デジタルサイネージの施設情報で利用しているGoogleMapが表示されなくなったと。
構成は
-Windows7
-AdobeAIR : 3.なんとか。
-Gogolemap: v3(指定なし)

とりあえずフローズンバージョン(v=3.20)指定で表示できました。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.20"></script>

バージョニング
https://developers.google.com/maps/documentation/javascript/versions?hl=ja

バージョンが最新バージョン、リリースバージョン、フローズンバージョン3つしか無く
どんどん新しいものに変わっていくらしいので、将来的にはダメダメそう(AIRがふるいWebkitなので。。

早くElectronなどに変更したほうがよいのかも。

phpMyAdminから簡単にExcelにエクスポートする方法、ドキュメント作成などに便利

mysqlのデータベースの構造を簡単にエクスポート

show full columns from banners;

からExcelでエクスポートとかで頑張ったりしてたけど以下の方法が超手っ取り早そう。

そう、印刷画面ボタンおして表示された画面をそのまんまコピペ(印刷を殆どしねいですからこれまでなかなか気づかず。orz…)

illustratorで自作(カスタム)のスクリプトを作成してショートカットで使うまでのメモ

こんにちは、ホームポジションに両手を固定しておきたくて、目線でマウス操作できかなぁーと考える今日このごろ。
今回は、HTMLまーくあっぷで実際のブラウザの表示をキャプチャ(クリップボード)し、それをイラレへ貼付け、半透明にして重ねてチェックとうことをしたいです。

“半透明にして” っていうのがいつもキーボドから手を話して不透明度パネルを操作するのが大変でショートカットしたい。

illustratorで自作(カスタム)のスクリプトを作成してショートカットで使うまでのメモ

1.まずはスクリプト作成

sel = activeDocument.selection;
for (i=0; i<sel.length; i++)
{
sel[i].opacity = 50; 
}

選択オブジェクトを配列で取得

activeDocument.selection

まぁループさせる

for (i=0; i<sel.length; i++)

で、透明度を50に設定

sel[i].opacity = 50; 

これでファイルを以下のファイル名で保存(ファイル名は任意)
/Applications/Adobe Illustrator CC 2017/Presets/ja_JP/スクリプト/透明度.jsx

2.手動で実行のテスト

イラレを開いてなにか画像を選択して、メニューから実行してみます。
うまく半透明になってくれればOK、半透明にならなければ何処かまちがっています。

3.ショートカット登録

イラレ自体で、スクリプトがショートカット登録できないので、他のアプリをつかって登録します。
ScriptKeyAi(アイコンが猫っぽい
http://tama-san.com/scriptkey/

ダウンロードして [+]ボタンをクリック先ほどの保存したファイルを選択、ショートカットキーを設定します。

なにかイラレで画像を選択してショートカットで透明になるかテストまで。

gitで特定のcommitからの差分をzipに固める

git archive --format=zip --prefix=root/ HEAD `git diff --name-only HEAD {コミットID}` -o diff.zip

めも。

Youtube IFrame Player APIでスマホで autoplayが効かない件と解決法。

少しハマったのでめもします。

Youtube IFrame Player APIを使っていて、オリジナルデザインのボタンを1タップで再生したい。
ただし、Chrome や Safari などのモバイル ブラウザでは、HTML5

$('#オリジナルボタンセレクタ').click(function(){
    //PlayerをNEW
    var player = new YT.Player('{ELEMENT_ID}',{
        videoId:'{YOUR_VIDEO_ID}',
        playerVars: {
            autoplay: 1,
        },
        events:{
            //ONReadyしたら再生
            onReady:function(){
                player.playVideo();
            }
        }
    });
});

どうにもユーザーのマウスイベント経由だけど、ダメみたい。(間にイベントの非同期準備できなところが挟まるからかも?)
以下のようにすると解決しました。

//イベントの先にplayerをnew
var player = new YT.Player('ELEMENT_ID',{
    videoId:'YOUR_VIDEO_ID',
    playerVars: {
        autoplay: 0,
        enablejsapi:1,
    },
    events:{
        onReady:function(){
            //onReadyのところでボタンイベントを準備
            $('YOUR_BTN_ID').click(function(){
                player.playVideo();
            });
        },
        onStateChange:function(e){

        }
    }
});

PHPStormのhtaccessのコメントアウトが地味に超便利

たまにリダイレクトの設定などで大量のhtaccessを記載することがありますが、
その際にPHPStormのショートカット(Cmd + /)がとても便利。

QNQPにsshできなかった。

sshしようとおもったら、

$ ssh username@xxx.xxx.xxx.xxx
Received disconnect from xxx.xxx.xxx.xxx: 2: Too many authentication failures
Disconnected from xxx.xxx.xxx.xxx

って怒られた。

$ ssh -o PreferredAuthentications=password username@xxx.xxx.xxx.xxx

ってパスワード認証を優先(PreferredAuthentications=password)すると繋がった。 passwordと鍵認証が有効だからなのかな?

Page 25 of 47

Powered by WordPress & Theme by Anders Norén