投稿者: admin Page 24 of 46

PHPStorm,Bower,Gulpを使ったHTMLコーディング環境設定メモ(超個人的、小規模サイト用、sass記法)

PHPStorm,Bower,Gulpを使ったHTMLコーディング環境設定メモ(超個人的、小規模サイト用、sass記法)

個人的にライトに使っているgulpの使い方メモ
小規模〜中規模のWebコーディング、システム開発をメインにしています。
(以下 HomeBrewはインストール済を想定)

nginxでBasic認証の設定方法

nginxでBasic認証の設定方法

Apacheのhtpasswdはインストールせずにopensslでパスワードファイル作成する方法です。

ユーザーファイルの作成とパーミッション設定

$ sudo echo "ユーザ名:$(openssl passwd -apr1 パスワード)" > /usr/share/nginx/html/user_passwords
$ sudo chmod 400 /usr/share/nginx/html/user_passwords
$ sudo chown nginx /usr/share/nginx/html/user_passwords

ここでは、nginx(Nginxの実行しているシステムユーザー)のみのパーミッションに設定しています。
また簡易なプレビューサイトを想定して、ドキュメントルート以下においてますが、
実際の運用では適時DocumentRootより上位ディレクトリなどへの配置に変更ください。
(まぁ運用の場合、そもそもBasicな認証で良いのかというのは、)

Nginxのコンフィグファイルの設定

server {
    listen       80;
    server_name  example.com;
    root   /usr/share/nginx/html/example.com;
    index  index.php index.html;
    auth_basic "preview site";
    auth_basic_user_file /usr/share/nginx/html/user_passwords;
    location / {
        〜略〜
    }
}

server { ~ } のコンテキストに記載してこのドメイン全てに反映。
http{ ~ } , location { ~ } に書いて、サーバーのhttp全体、特定ディレクトへの反映も可能

nginxでのワードプレスのパーマリンク設定

nginxでのワードプレスのパーマリンク設定

すこしはまったのでnginxでのwordpressのパーマリンク設定のメモ

ポイントとしては、“try_files $uri @wordpress;”と try_filesディクレティブでURLが見つからないファイルはすべて location @wordpress { ~ } ブロックに回す。
@wordpress { ~ } ブロックでは、リクエストのURIにかかわらずすべて index.phpを実行する設定とする。
以下設定全部。

server {
    #ポート80番をlisten
    listen       80;
    #マルチドメインのサーバー名
    server_name  cycling-course.okinawa;
    #ドキュメントルート
    root   /usr/share/nginx/html/cycling-course.okinawa;
    # ApacheでいうDirectoryIndex
    index  index.php index.html;
    # ロケーションドメイン/に適用ブロック
    location / {
        # 左側からマッチするかチェックしていく 
        # http://cycling-course.okinawa/2017/10/ だったら、$urlは、2017/10/
        # チェック1 '2017/10/' があるか
        # チェック2 '2017/10//' があるか
        # 適合がないので、@wordpressブロックを適用する
        try_files $uri $uri/ @wordpress;
    }
    # 拡張子が .phpにマッチした場合に適用されるブロック
    location ~ .php$ {
        # 前のブロック同様にマッチしなければ @wordpressブロックを適用する指定
        try_files $uri @wordpress;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+.php)(.*)$;
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        # 先に include しておかないと次の$fastcgi_script_nameが無効になって
        include  fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    }
    # ファイルがマッチしない場合に適用する@wordpressブロック
    location @wordpress {
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+.php)(.*)$;
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        include  fastcgi_params;
        # ※ここがミソ。リクエストに関係なくすべて、index.phpを実行する
        fastcgi_param  SCRIPT_FILENAME  $document_root/index.php;
    }
}

参考サイト

http://qiita.com/egnr-in–6matroom/items/a08f4851bf16d0131e60

http://qiita.com/kotarella1110/items/f1ad0bb40b84567cea66

MagnificPopupでYoutubeを指定時間から再生する方法

MagnificPopupでYoutubeを指定時間から再生する方法

コールバック関数のiframeのpatternsで引っ掛けてコールバック関数で分解してURL(src)を生成しました。無理矢理なのでもっとスマートにできるはず。><


$('.popup-media').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                id: function(url){
                    var url = 'v='+url.split('v=')[1],
                        pair= url.split('&')
                        ,arg = {}
                        ,ret = '';

                    for(var i=0;pair[i];i++) {
                        var kv = pair[i].split('=');
                        arg[kv[0]]=kv[1];
                    }
                    ret = arg['v'] + '/?autoplay=1';
                    if(typeof arg['t'] !== 'undefined'){
                        ret += '&start='+ arg['t'].replace('s','');
                        }
                        return ret;
                },
                src: '//www.youtube.com/embed/%id%' // URL that will be set as a source for iframe.
            },
        }
    },
    callbacks: {
        open: function () {
            $('.mfp-close').html('');
        }
    }
});

古い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/

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

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

Page 24 of 46

Powered by WordPress & Theme by Anders Norén