AMPうまくいってなかった…scriptタグ問題

 

前回、プラグインを使いAMP対応させて喜んでたんです。

プラグインで記事をAMP対応にしてみた!

 

AMPに関してはこの記事の中でちょっとまとめてます

福岡PHPカンファレンスに行ってきた!

 

しかし

AMP対応うまくいいってなかったらしく、

Googleさんからメール来た><

 

AMPページエラーメッセージ

 

 

 

AMPリファレンスをみてみると。。。

AMPリファレンス

 

AMPの場合、

scriprタグはtype=”application/ld+json以外は禁止されているようですね。

 

「じゃあ、消そう!」

 

そう思った矢先、無料サーバーを使っているために、広告用のscriptがAMPに対応できないtype=”text/javascript”で記載されていることに気づきました・・・

 

無理やりtype=”application/ld+json“に置き換えたらどうなるんやろとか思ったけど、怖いんでやめました。(サーバー止めれるの怖い)

 

悔しいですが、AMPプラグイン無効にしようと思いますx_x

 

どんまいっ

 

プラグインで記事をAMP対応にしてみた!

 

参考:ここ

 

<いるもの>

プラグイン:https://wordpress.org/plugins/amp/

 

出来上がり!

https://kin29.info/プラグインで記事をAMP対応にしてみた!/amp/

↑をスマホモードがスマホで見てみてください!

こんな風になるかと思います。

AMP記事イメージ

福岡PHPカンファレンスに行ってきた!

 

先日、福岡PHPカンファレンスに行ってきました!

http://phpcon.fukuoka.jp/2017/

 

ワードプレスの話や、Progressive Web Apps、javascript、

もはやPHPの話ではないものもたくさん!

幅広い分野について知ることができました!!!

 

 

その中でも、AMP + PWAの話がありました。

AMP自体も知らなかったので実際にしてみました!

Githubにサンプルがあるのでに実際にやってみました。

console.logのとこにでました!!

 

 

AMP =Accelerated Mobile Page

参考:https://developers-jp.googleblog.com/2016/02/google-accelerated-mobile-pages.html

仕組みとしては、Googleのキャッシュにページが入っていて、キャッシュから表示することで、ページの表示速度が上がるとのこと。
その証として、AMPページのURLはhttps://www.google.co.jp/amp/….となっていました。

下図がわかりやすかったです。(Google Developers Japanより)

SEO的にも良いらしい。(コンテンツ内容にもよる)

 

関連して、JSON-LDの話もあったので、また詳しくやってみようと思います。

 

 

セクショニングって?

 

HTML5からsectionタグが追加されましたね!

それに伴い、セクショニング  という言葉をよく見かけます。

セクショニング  について書きまーす。

 

参考:ここここここ

 

 

セクショニング

文書構造を明確にする考え方のこと。

<要素>

セクショニング・コンテンツ、ヘッディング・コンテンツ

これらの要素を用いてセクショニングすることで、文書は正しいアウトラインを得ることができる。

 

 

セクショニングの歴史

HTML5以前

・divタグとhタグを使って、セクショニングしていた。

・どんな内容でもdivで1つのセクションとしており、

内容を見ないと違いがわからない。

・ロゴなどのサイト全体に関連する情報のセクションを示す方法がない。

・暗黙的にセクショニングした時、どこからどこまでが1つのセクションなのか明確にわからない場合があった。

・文書全体で、hタグのレベルをルール付けする必要があった。

 

これらの問題から、、、

HTML5

・divタグは基本的に使わず、sectionなどのセクショニング・コンテンツ要素を用いる

・section, article, aside, navタグの誕生

・nav, header, footerタグの誕生

・正確なセクション指定と見出しの指定ができるようになり、

文章構造のアウトラインを明確に示すことができる。

・文書全体だけでなく、セクションでのhタグのレベルをルール付けする必要がある。

(同じ階級のhタグをページ内に複数指定することができるようになった。)

 

 

 

 

まとめ

HTML5の目的は、

一つのセクション内に複数の見出しを入れるのではなく、

見出しごとにセクションを明示的に包含させていくことで

文章構造を明確にするためなんだなと理解。

DBでNULLでなく空のカラムを取得したい時

 

あまりないことだと思いますが、

カラムにスペースや空白が入ってるレコードを取得したい時

 

SELECT *

FROM テーブル

WHERE TRIM(カラム) = ”;

 

※PostgreSQL, MySQL,Oracleでは使えます。SQLServerdは異なる模様

  • TRIM….左右の空白を除去した文字列を取得できる
  • LTRIM….左の空白を除去した文字列を取得できる
  • RTRIM….右の空白を除去した文字列を取得できる

 

以下では、対応できない。

SELECT *

FROM テーブル

WHERE カラム IS NULL;

OVER句、ROW_NUMBER()

 

新しいSQL語彙を知ったので書きます!

 

・OVER句

・ROW_NUMBER()

 

 

まずはOVER句!

区間ごとに分割したり、並び替えたりできるやーつ

GROUP BYと何が違うんかな?

(((((( や っ て み よ う )))))

 

こんなテーブル(niku29)があったとして

id class_id name
1
1
カルビ
1
2
ホルモン
2
1
せせり
3
1
豚バラ

※idとclass_idのテーブル用意して結合するとかだと思うんですがここでは触れないでくださいw

 

牛(id=1)、鳥(id=2)、豚(id=3)の各種類の数を知りたい場合、

GROUP BYを使うと

SELECT
id,count(class_id)
FROM
niku29
GROUP BY id;

こんな感じ。すなお。

id count
1
2
3
1
2
1

 

 

OVER句を使うと、

SELECT
id,count(class_id) OVER (PARTITION BY id)
FROM
niku29;

こんな感じ?

id count
1
2
1
2
2
1
3
1

 

しかし、これだとid=1について2行同じレコードでてきちゃいます。

 

 

 

そこで、ROW_NUMBER()を使い、idごとに行数振り、

1行目だけ取ってくるやり方で見やすくします。

とりあえず、

SELECT
row_number() OVER (PARTITION BY id) AS row_num,
id,
count(class_id) OVER (PARTITION BY id)
FROM
niku29;

で行を表示してみる。

row_num id count
1
1
2
2
1
2
1
2
1
1
3
1

イイカンジ、もうちょい。

 

 

んで、1行目だけ取ってきて
SELECT
row_number() OVER (PARTITION BY id) AS row_num,
id,
count(class_id) OVER (PARTITION BY id)
FROM
niku29
WHERE row_num = 1;

ERROR:  列"row_num"は存在しません

え、あるやん。

 

そこで、

SELECT
row_number() OVER (PARTITION BY id) AS row_num,
id,
count(class_id) OVER (PARTITION BY id)
FROM
niku29
WHERE row_number() OVER (PARTITION BY id) = 1;

ERROR:  WHERE句ではウィンドウ関数を使用できません

使えないらしい・・・。

ウィンドウ関数 → row_number()、rank()とか….

 

 

すんごいネストするけどこれならできる!

SELECT
id,count
FROM
(SELECT
row_number() OVER (PARTITION BY id) AS row_num,
id,
count(class_id) OVER (PARTITION BY id) AS count
FROM
niku29) niku
WHERE row_num = 1;

id count
1
2
2
1
3
1

 

 

うーん、しかし例が悪かった。

もっとOVER,ROW_NUMBER()が役立つ時がきっとある!

 

まとめ

・WHERE句にWindow関数(ROW_NUMBERとか)は使えない。

 

シーケンス操作関数 -PostgresSQL

 

シーケンス操作関数とは…

参考:ここ

“PostgreSQLシーケンスオブジェクトに対し演算を行う関数。シーケンスオブジェクト(シーケンスジェネレータとも単にシーケンスとも呼ばれます)とはCREATE SEQUENCEで作成される1行の特別なテーブルです。”

テーブルなんですねえ。

 

シーケンス関数一覧

  • nextval(regclass) …
  • currval(regclass)    ….nextval後に
  • lastval()
  • setval(regclass, bright)
  • setval(regclass, bright, boolean)

 

 

\よくわかんないからやってみた。/

・SELECT currval(‘test_seq’::regclass);
・SELECT lastval();

※それぞれを別セッションで実行

currvalとlastvalはnextvalの後とか同じセッション内で実行しないと

「セッションでまだ定義されてません」

ってでますね。

(まとめ)

currvalとlastvalは同セッション内にてnextvalで定義した後に機能する。

nextvalで得られた値を返す。

 is_calledフラグが「はい」 → 最終値 + 増加数

   is_calledフラグが「いいえ」 → 最終値

 is_calledフラグ…..呼ばれた時に増加数分増加する/しない

 

 

currvalとlastvalって何が違うんやろ?

・lastval…シーケンスを指定するところがないです!

同セッション内で複数のシーケンスをnextvalした時、一番最初にnextvalしたシーケンスの返り値を得ることができました。

・currval…シーケンスが指定できますね。

 

 

 

regclassってなん?

参考:ここ

OID(オブジェクト識別子)っていうシステムテーブルのプライマリーキーの別名らしい。

よくわからんので、わかり次第まとめます!

 

ホワイトボックスとブラックボックス

 

ホワイトボックス(テスト)とブラックボックス(テスト)について書きます!

 

ブラックボックス…

内部処理、つまり実装、コードの内容に関わらず、外部仕様を満たすかのテスト

 

ホワイトボックス…

ブラックボックスとは逆で、内部処理、つまり実装、コード(メソッド)を一つ一つ想定通りに動くかをみるテスト

 

私自身、ユニットテストつまり単体テストはホワイトボックステストのことだと認識してます。

 

リファクタリングの面からも、

ホワイトボックステストは特に大事ですね。

ユニットテストコードかかないとなと改めて思いました。

 

JSONとJSONP〜その2〜

 

JSONPマダマダツヅキマスヨ。

 

前回、XSS攻撃を避けるためにも、クライアント側でパースしよう書きましたが、まだまだ謎が多いので書きます。

 

参考:ここここ

 

Content-type

jsonの場合、

application/jsonです。text/javascriptではない!

 

jsonpの場合、

実体はcallback関数でJSONを包んだJavaScriptなので、MIMEタイプはJavaScriptと同じでapplication/javascript

text/javascript → application/javascript (2006年4月RFC4329)

text/htmlとかtext/javascriptとかにしてるとhtmlと解釈してしまい、悪意あるスクリプトが仕込まれている場合、実行されていまします。→XSSの攻撃を受ける

content-typeを正しく記述することは重要!!

しかし、IE6だと、application/jsonとしていてもhtmlとして解釈してしまうようです。

 

callback関数

jsonpの仕組みって、コールバック関数を使ってサーバから受け取るデータにscriptとしての役割を持たす。

callback関数と同じ名前の関数の引数にJSONが入ったスクリプトを返すようクロスドメインのサーバーにリクエストし、
動的にそのスクリプトを読み込んだ瞬間にcallback関数が引数にJSONをつっこんだ状態で呼び出される。

 

 

ジェイソン違い、JSONPとJSONについて

 

ajax(つまりはXMLHttpRequest)って便利ですよね。

異なるドメインにアクセスはできない=クロスドメイン制約

を除いては・・・・。

 

しかし、JSONPを使うと、なぜ異なるドメインのデータを取得できるのでしょうか?

そんな疑問からのJSONとJSONPの違いを調べました。

参考:ここ

 

JSON        =    JavaScript  Object Notation

JSONP     =    JSON with Padding (Padding=不要なもん)

→つまりJSONPはJSONではない!!!

 

JSONPの仕組み

<script src=”https://google.com/test.js”></script>

//変数data に “グーグルからのメッセージ”;が挿入されるとする。

<script>

alert(data);  //「グーグルからのメッセージ」がアラートされる。

</script>

 

 

スタイルシートやjQueryライブラリーを呼ぶのもクロスドメインじゃん!そうじゃん!と気付いた次第です。

クロスドメイン制約って簡単に回避できるやーんって、楽勝って感じですよね!

 

しかし

 

これって、データ取得先(上記例で言うとgoogle.com)に

自サイトでの実行権を与えっちゃってるんです!

もしも、dataと言う変数に無限アラートが仕込まれてたらどうしょうか?自分は何も実装していないのに、観覧者に不快な思いをさせてしまう可能性があるのです。

 

こういったXXS攻撃を避けるために、

1.JSON.parse()をしましょう!

JSON.parse()

※JSON,JSONPはオブジェクトのためJSON.stringfy()で文字列にしたのち、JSON.parseしましょうね!

 

2.JSONP使うのやめましょう!

じゃあ何使えばいいんや!教えてください。