jsDelivrから 最新の各種JavaScirpt / CSSフレームワークを読みこむ URL

jsDelivrから最新のJavaScirpt/CSSフレームワークを読みこむURLのメモ。

下記の「短縮形」は本来は複数ファイルをまとめる機能だが1ファイルでも使える。（URLが短くなり、キャッシュ期間が長くなる。）


■ jQuery

https://cdn.jsdelivr.net/jquery/latest/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery
↓
v3.0.0-alpha1

https://cdn.jsdelivr.net/jquery/2/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@2
↓
v2.1.4

https://cdn.jsdelivr.net/jquery/1/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@1
↓
v1.11.3


■ jQuery UI

CSS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css

JS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.ui

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.ui

CSSでテーマを指定する場合
https://cdn.jsdelivr.net/jquery.ui/latest/themes/flick/jquery-ui.min.css
テーマを指定しないと"UI lightness"になる（参考：http://jqueryui.com/themeroller/#themeGallery）


■ jQuery Mobile

CSS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.css

JS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.mobile

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.mobile


■ Bootstrap

CSS
https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css

JS
https://cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.min.js
短縮形 https://cdn.jsdelivr.net/g/bootstrap

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,bootstrap


■ Bootswatch

例
https://cdn.jsdelivr.net/bootswatch/latest/cerulean/bootstrap.min.css
テーマもたくさん → https://www.jsdelivr.com/?query=bootswatch


■ Pure.css

https://cdn.jsdelivr.net/pure/latest/pure-min.css
短縮形 https://cdn.jsdelivr.net/g/pure


■ Normalize.css

https://cdn.jsdelivr.net/normalize/latest/normalize.min.css
短縮形 https://cdn.jsdelivr.net/g/normalize


■ Font Awesome

https://cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css
短縮形 https://cdn.jsdelivr.net/fontawesome/latest/css/mainfile

https://cdn.jsdelivr.net/g/fontawesome だとうまく表示されなかった。（フォントファイルへの相対パスがおかしくなる？）



ブラウザキャッシュ期間は1週間。
ただし、複数ファイルをまとめると max-age=15724800（約6ヶ月）になった。


【HTTP Response Header（抜粋）】

Server: nginx
Content-Type: application/x-javascript; charset=utf-8
Vary: Accept-Encoding
X-Version: 3.0.0-alpha1
Cache-Control: public, max-age=604800
access-control-allow-origin: *
X-Cache: HIT
x-edge-location: jptk
Content-Encoding: gzip
X-Firefox-Spdy: h2

ファイル名は"mainfile"でも代替可。minのJSまたはCSSになる。



参考：パブリックなCDNはjsdelivrかcdnjsでいいじゃん。 | Sorry for Team KILLing

2015年にもなったので font-familyを見直したら要らないものだらけだった

前提として、Windowsにヒラギノを入れてたり、Macにメイリオを入れてたりする、「ごく少数の人」は無視したい。それから、かなり古い環境や日本語以外の環境も除いて考える。

で、よくあるこんな無難なfont-familyを見て。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

まず、Macは全角のfont-familyを無視するので、"ヒラギノ角ゴ ProN W3"は不要。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

次に、Windowsでは全角のfont-familyを書いておけば良いので（両方、または全角のみを認識するブラウザはあるが、半角のみを認識するブラウザは無い。日本語環境なら）、Meiryoも要らない。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

そして、Windowsのデフォルトは"ＭＳ Ｐゴシック"、Macは"Hiragino Kaku Gothic ProN"なので、sans-serifさえ指定しておけばこれらもわざわざ指定する必要はない。（ブラウザの設定を変えている人もいるだろうけど、そういう人は自分が設定したfont-familyで見せてあげたほうが良いと思う。）

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

游ゴシックは…好みかな？
Mac：YuGothicあり or なし（ヒラギノ）

Windows："游ゴシック"あり or なし（メイリオ）

ということで、游ゴシックありなら、

font-family: "游ゴシック", YuGothic, "メイリオ", sans-serif;

游ゴシック無しなら、

font-family: "メイリオ", sans-serif;

でいいんじゃないかな？

ちなみにiOSはヒラギノ、（一般的な）Androidはsans-serifでデフォルトのfont-familyが適用される。

VALUE DOMAINで CNAMEを設定するときの注意

参考：Easy Setup for VALUE DOMAIN Users

※最後のピリオドをわすれないように！

ピリオドを付けないとサブドメインと見なされて下記のようになってしまうので注意。


hoge.example.jpで、example2.comにアクセスできるようにしたい場合

cname hoge example2.com
と（最後にピリオドを付けずに）設定し、nslookupすると、
hoge.example.jp      canonical name = example2.com.example.jp.
Name:   example2.com.example.jp
となってしまう。

cname hoge example2.com.
のように最後にピリオドを付ければ、
↓
hoge.example.jp      canonical name = example2.com.
Name:   example2.com
のように期待通りのCNAMEになる。

JavaScript, CSSライブラリの CDN

たくさんのライブラリをホスティングしているところ

RawGit
・（cdn.rawgit.comの方は）by MaxCDN
・Github上のライブラリが対象

jsDelivr
・by MaxCDN and CloudFlare

cdnjs
・by CloudFlare

OSSCDN
・by MaxCDN



特定のライブラリのみホスティングしているところ（と言ってもGoogleとMicrosoftはそこそこ揃ってる）

Google Developers Hosted Libraries
・by Google
・AngularJSあり

Microsoft Ajax Content Delivery Network
・by Microsoft
・Bootstrap、Knockoutあり

jQuery CDN
・by MaxCDN
・jQeuryファミリーのみ

Bootstrap CDN
・by MaxCDN
・Bootstrap、Font AwesomeとBootswatchのみ

Yahoo! Developer Network
・by Yahoo
・YUIとPure.cssのみ
・HTTPS不可


MaxCDNがんばってる


参考
floatingdays: JavaScriptフレームワーク/ライブラリの CDNいろいろ

画像圧縮サービスの比較

リンク集的メモ。

• J I C - a Javascript Image Compressor
• TinyPNG – Compress PNG images while preserving transparency
• Compressor.io - optimize and compress your images and photos
• Online Image Optimizer
• JPEGmini | Process your photo

ファイルサイズが一番小さいのはTinyPNGのJPEGだった。
（JICは圧縮率を指定できるので除外。） ただ、Compressor.ioのPNGがファイルサイズの割に一番きれいだった。
（paint.netで同じようなPNGにしてみたが、Compressor.ioのPNGの方がなぜかきれいだった。）

Linuxのセキュリティ対策

• 基本
• SELinux
• AppArmor
• TOMOYO Linux
• ファイアウォール
• firewalld（RHEL7/CnetOS7以降）
• iptalbes
• Amazon EC2の場合は（EC2の）Security Groupsによる簡易ファイアウォールでも
• WAF
• ModSecurity
• ウィルス対策
• Clam AntiVirus
• Rootkit検査
• rkhunter
• chkrootkit
• 改鼠検知
• AIDE
• Tripwire

• OSSEC （2015/4/4追記）

• ログ報告
• Logwatch

愛称？の付けられた脆弱性

（2015/6/29 VENOMとLogjamを追加）

愛称というか、通称というか、ニックネームというか。


2011年 9月 BEAST (CBC)

2012年 9月 CRIME (TLS)


2013年 2月 Lucky Thirteen (TLS)
2013年 8月 BREACH (SSL/TLS)

2014年 4月 Heartbleed (OpenSSL)
2014年 6月 CCS Injection (OpenSSL)

2014年 9月 Shellshock (bash)
2014年10月 POODLE (CBC)
2014年11月 WinShock (Windows)

2015年 1月 GHOST (glibc)

2015年 3月 FREAK (OpenSSL他)

2015年 5月 VENOM（QEMU）

2015年 5月 Logjam（SSL/TLS）

2014年はWindows XPサポート期限終了（4月）もあって当たり年と言われたが、今年はそれを上回る勢い...
ところでSSL/TLSはPOODLE対応を境にTLS/SSLと呼び替えられ始めてるみたい。いまだにサーバ証明書はSSL証明書と書かれることが多いけど...


参考

Transport Layer Security - Wikipedia
華麗なる因数分解:FREAK攻撃の仕組み - ぼちぼち日記

Content Security Policy

ApacheでContent Security Policyを設定したメモ。


httpd.confで設定する例。

Header set Content-Security-Policy "default-src 'self'; script-src 'self', 'unsafe-inline', www.example.com"

とりあえずレポートだけ見たい場合の例。

Header set Content-Security-Policy-Report-Only \
"default-src 'none';\
 script-src 'self';\
 object-src 'none';\
 img-src 'self';\
 media-src 'none';\
 frame-src 'none';\
 font-src 'none';\
 connect-src 'none';\
 style-src 'self';\
 report-uri /csp-report.php?v=1"

レポートでどのポリシーに違反したのか見やすくするため、xxxx-srcを全部書いた。
何がエラーになるか分かるように基本厳し目に、使わなそうなのはとりあえずnoneにしている。
report-uriのパラメータ（v=1）は後述。

右辺の書き方については下記参照。
CSP policy directives - Security | MDN

はまりそうなとこだけ書くと、

• 'none'・'self'・'unsafe-inline'・'unsafe-eval'はシングルクォーテーションも含めて書く必要がある。
• データスキーム（data:）はコロンも含めて書く。
  （mod_pagespeedを使っていると、気づかない間にデータスキームが使われていたりする。）
  ちなみに、スキームはデータに限らず、"https:"など特定のスキーム限定を指定できるみたい。
• URLはスキームを省略可（例：www.example.com）。省略した場合、元のページと同じスキームと同じもののみ許可する。
  ポートも同様。
• URLで別のスキームを許可したい場合、別途記載が必要。
  例：元のページがhttpで、読み込むCSSがhttpsの場合、httpsのURLも書く必要がある。
  ワイルドカードが使えるという説明もあったが、下記のどちらも駄目だった（ブラウザによる？）

• *://www.example.com

• *//www.example.com

• URLのサブドメインはワイルドカード（*）が使える。
  サブドメインをワイルドカードにすると、サブサブ（...略）ドメインまでワイルドに適用される。
  ただしサブドメイン無しには適用されないらしい。

レポートをログに書き出すPHPの例。

<?php
if (!$_GET || $_GET['v'] < 1) {
        exit;
}
$report = json_decode(file_get_contents('php://input'), true);
$log = date('[Y-m-d H:i:s] ') . $_SERVER['HTTP_USER_AGENT'] . ' ';
$log .= var_export($report['csp-report'], true) . "\n";
error_log($log, 3, '/var/log/csp-report.log');

Content-Security-Policy-Report-Onlyの例でreport-uriにパラメータを付けたのは、このPHPの2行目で古いポリシーを無視するため。
ブラウザによってはキャッシュしてしまうようで、古いポリシーに基づき送信してくることがあり、ノイズになるので。
ポリシーを変えたら、パラメータの数字とPHPの2行目の数字を両方インクリメントする。

ログファイルはApacheが書き込めるように権限設定しておく。

（2015/3/2 追記）
logrotateも追加しておく。（phpのlogrotate設定をコピーして作成。）

/var/log/csp-report.log { missingok notifempty}

（追記終わり）

また、ModSecurityを使っている場合はレポートがModSecurityではじかれないように注意。

ログを見ていると、違反URLとして報告される"about"はabout:blankだと思うけど、"asset"って何だろう？



ちなみに、Gmailのポリシーはこんな感じだった。

script-src https://*.talkgadget.google.com 'self' 'unsafe-inline' 'unsafe-eval' https://talkgadget.google.com https://www.googleapis.com https://www-gm-opensocial.googleusercontent.com https://docs.google.com https://www.google.com https://s.ytimg.com https://www.youtube.com https://ssl.google-analytics.com https://apis.google.com https://clients1.google.com https://ssl.gstatic.com https://www.gstatic.com blob:;frame-src https://*.talkgadget.google.com https://www.gstatic.com 'self' https://accounts.google.com https://apis.google.com https://clients6.google.com https://content.googleapis.com https://mail-attachment.googleusercontent.com https://www.google.com https://docs.google.com https://drive.google.com https://*.googleusercontent.com https://feedback.googleusercontent.com https://talkgadget.google.com https://isolated.mail.google.com https://www-gm-opensocial.googleusercontent.com https://plus.google.com https://wallet.google.com https://www.youtube.com https://clients5.google.com https://ci3.googleusercontent.com;object-src https://mail-attachment.googleusercontent.com;report-uri /mail/cspreport

見やすく整形。

script-src
https://*.talkgadget.google.com
'self'
'unsafe-inline'
'unsafe-eval'
https://talkgadget.google.com
https://www.googleapis.com
https://www-gm-opensocial.googleusercontent.com
https://docs.google.com
https://www.google.com
https://s.ytimg.com
https://www.youtube.com
https://ssl.google-analytics.com
https://apis.google.com
https://clients1.google.com
https://ssl.gstatic.com
https://www.gstatic.com
blob:
frame-src
https://*.talkgadget.google.com
https://www.gstatic.com
'self'
https://accounts.google.com
https://apis.google.com
https://clients6.google.com
https://content.googleapis.com
https://mail-attachment.googleusercontent.com
https://www.google.com
https://docs.google.com
https://drive.google.com
https://*.googleusercontent.com
https://feedback.googleusercontent.com
https://talkgadget.google.com
https://isolated.mail.google.com
https://www-gm-opensocial.googleusercontent.com
https://plus.google.com
https://wallet.google.com
https://www.youtube.com
https://clients5.google.com
https://ci3.googleusercontent.com
object-src
https://mail-attachment.googleusercontent.com
report-uri
/mail/cspreport

scriptは'unsafe-inline'も'unsafe-eval'も許可してしまっているが、imgも含めて*を使っていないのは立派。
style等は（defaultも）指定していないが、不要という判断か、指定すると差し障りがあるのか、どちらだろう？

また、1バイトを削るのにもこだわるGoogleがわざわざこれだけの文字列を送信するのは、セキュリティの方が重要だからということだろう。
サブドメインをワイルドカードでまとめれば随分減りそうだが、Googleともなると使っているサブドメインも膨大なので、セキュリティが担保しづらくなるのだろう。
policy-uriを指定してポリシーをXMLでやりとりしてキャッシュを効かせれば総通信料は減りそうだが、柔軟性とのトレードオフか。
report-uriも送信料を増やすが、これ無しは運用的にきっと難しいだろう。

Windowsで Tomcatの Java参照先を変える方法

WindowsでJavaをUpdateしたら、Tomcatが起動しなくなった。

[info]  [ 6796] Commons Daemon procrun (1.0.15.0 32-bit) started
[info]  [ 6796] Running 'Tomcat7' Service...
[info]  [ 6844] Starting service...
[error] [ 6844] Failed creating java C:\（略）\jre7\bin\client\jvm.dll
[error] [ 6844] 指定されたパスが見つかりません。
[error] [ 6844] ServiceStart returned 1
[error] [ 6844] 指定されたパスが見つかりません。
[info]  [ 6796] Run service finished.
[info]  [ 6796] Commons Daemon procrun finished

原因
UpdateによりJavaのバージョンが8（1.8）になり、Javaのあるフォルダが変わっていた。

対策
Tomcatの、（Tomcat7.0の場合）Tomcat7w.exeを実行すると、設定ダイアログが表示される。
その中で、jvm.dllのpathを指定する箇所あがあるので、今あるjvm.dllを指定する。


参考：shin'nosukeさんのアレグロモデラート:Tomcat サービスが使う JRE （JDK）の場所

grepの技いろいろ

基本形

grep 'keyword' path/to/dir

各出力行の前に、入力ファイルにおける行番号を表示する

grep -n 'keyword' path/to/dir

再帰的にディレクトリ内を検索する

grep -r 'keyword' path/to/dir

正規表現で検索する

grep -E 'reg|exp' path/to/dir

ファイルの拡張子を限定する

grep --include='*.html' 'keyword' path/to/dir

検索結果をUnicodeに変換する

grep 'keyword' path/to/dir | nkf -w

キーワードをShift_JISにして検索する

grep `echo "キーワード" | nkf -s` path/to/dir

組み合わせるとこんな感じ？（正規表現はSJIS検索と同居でき無さそうなので除外）

grep -nr --include='*.html' `echo "キーワード" | nkf -s` path/to/dir | nkf -w

goを学ぶためのリンク集

概要

Go言語とは - golang.jp

初めてのgolang by sinmetal

A Tour of Go


実行環境

Go言語のインストール - golang.jp

Go Playground


学ぶ

Go言語によるwebアプリの作り方

実践Go言語 - golang.jp

Goプログラミング言語のチュートリアル - golang.jp

パッケージドキュメント - golang.jp

Packages - The Go Programming Language

自己証明書の作り方 2015年版

Apache用（他でも使えると思うけど）の、自己署名のサーバ証明書（SSL証明書、改め、TLS証明書？）の作り方のメモ。

条件

• 秘密鍵はパスフレーズ無し＝暗号化しない
• 2048ビット
• SHA-2

コマンド
# 秘密鍵作成（2048ビットを指定、暗号化指定は無し）
openssl genrsa -out server.key 2048
# CSR作成
openssl req -new -key server.key -out server.csr
# 証明書作成（SHA-256を指定、期間は適当に）
openssl x509 -req -in server.csr -signkey server.key -days 3650 -out server.crt -sha256
↓
手元のブラウザで、"TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256"になった（最強？）

参考：CentOS OpenSSLを使用したSSL用の秘密鍵と証明書の作成 | kakiro-web カキローウェブ

無料Androidアプリ「買い物ランチャー」

自分が実際に使っているマイナーな良Androidアプリを誰にともなく紹介するシリーズ、第4弾は買い物ランチャー。

昔よくあった（今でもあるだろうけど）「横断検索サイト」のスマホアプリ版。よく使うのはAmazon・楽天・価格.comか。買い物ランチャーと言いつつ、買い物じゃないのも入ってる。


長所

• 使い方が簡単で直感的に検索できる
• 履歴が残るので、戻って別の品物と比べられる

短所

• サイトの追加ができない

ダウンロードはこちらから

↓

買い物ランチャー - Google Play の Android アプリ

過去のAndroidアプリ紹介

• 無料Androidアプリ「3分タイマー」
• Androidアプリ「SupportText」
• 無料Androidアプリ「Read It Now」