PHPStorm,Bower,Gulpを使ったHTMLコーディング環境設定メモ(超個人的、小規模サイト用、sass記法)
個人的にライトに使っているgulpの使い方メモ
小規模〜中規模のWebコーディング、システム開発をメインにしています。
(以下 HomeBrewはインストール済を想定)
個人的にライトに使っているgulpの使い方メモ
小規模〜中規模のWebコーディング、システム開発をメインにしています。
(以下 HomeBrewはインストール済を想定)
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な認証で良いのかというのは、)
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での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
コールバック関数の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標準ブラウザは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
いつも入れる必要?いれない不要?入れたほうがSEO的に(迷信だよ)?いや、もしものために念のために、
ってなるので再度調べてまとめておくことに。
登録したくないコンテンツが含まれる場合のみ必要で、基本必要ない。
ただし、以下の参考サイトにあるとおり、
サイトに 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
環境変数などで簡単に設定できるはずなので、入れておけば無難かな。
基本SEOアクセスを気にするようであればAnalyticsで気づくはず、気付かないれべるの気合なら入れないほうが皆幸せかも。
www 有り無しの統一などはしてあげてあげると良いかも。
こちらは基本的には、サイトマップが必要かどうかを検討する必要もありそうです。
他のページからリンクされているページは基本クロールされそうだけどそもそもリンクが無いページをインデックスさせるケースとか設計的にかなり特殊そうな気もする。
あとは初期公開のサイトや、リニューアルでURLが変更になったりなどのばあいは、クロール漏れなどは怖いので念のために入れておきたい気もする。(合わせてページ変更の302リダイレクトなども)
以下のGoogleのヘルプページの、‘サイトマップが必要かどうか’ 部分が参考になります。
参考 : サイトマップについて Search Console
https://support.google.com/webmasters/answer/156184?hl=ja&ref_topic=4581190
ページが多いサイトでのメンテナンスも大変なので、基本はなしで、必要な際に設置、ボリュームが莫大なら自動生成プログラムや、WordPressだとプラグインで自動生成が楽そう。
検索キーワードがAnalyticsでほとんど見れなくなっているので、こちらでアクセスに繋がったキーワードの表示順位や実際のアクセスになったかなど非常に有益な情報をみれたり、クロールのエラーなども検知できるので必須といえます。
(そういえば昔、Bing – Web マスターツールって登録したけど全然みなくなったな、なにか有益な活用方法など教えて欲しい)
あと、AMPのエラー検知なども便利。
デジタルサイネージの施設情報で利用している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などに変更したほうがよいのかも。
こんにちは、ホームポジションに両手を固定しておきたくて、目線でマウス操作できかなぁーと考える今日このごろ。
今回は、HTMLまーくあっぷで実際のブラウザの表示をキャプチャ(クリップボード)し、それをイラレへ貼付け、半透明にして重ねてチェックとうことをしたいです。
“半透明にして” っていうのがいつもキーボドから手を話して不透明度パネルを操作するのが大変でショートカットしたい。
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
イラレを開いてなにか画像を選択して、メニューから実行してみます。
うまく半透明になってくれればOK、半透明にならなければ何処かまちがっています。
イラレ自体で、スクリプトがショートカット登録できないので、他のアプリをつかって登録します。
ScriptKeyAi(アイコンが猫っぽい
http://tama-san.com/scriptkey/
ダウンロードして [+]ボタンをクリック先ほどの保存したファイルを選択、ショートカットキーを設定します。
なにかイラレで画像を選択してショートカットで透明になるかテストまで。
Powered by WordPress & Theme by Anders Norén