jquery.ajaxに代わる、Fetch APIについて

Facebook にシェア
Pocket

最近のJavaScriptでは、jQueryに依存しない書き方が増えてきたようです。ただ、確かにセレクターなら、document.querySelectorAllメソッドを使えばいいだけなんですが、個人的にjQueryで便利なところは、ajaxだと思ってるんです。いちいち、XMLHttpRequestがどうちゃらこうちゃらとか書きたくないし、だいいち覚えられない。だから自分は、jQueryからはなかなか離れられないだろうし、離れたとしてもAjaxようの共通関数は実装することになるんだろうなぁ。と思っていたら、最近になってFetch APIなんてものを知りました。

最近のWeb技術界隈は追えていないと思ったらこんなものが。というわけで、調べて使ってみました。

HTML

PHP

サンプル:Document

やってることは、サーバーに数値と文字列をPOSTで渡すと、数値を2倍、文字列をSHA-256でハッシュ化した結果をJSON形式で返すというもの。例えば、数値を123、文字列をabcとすると下記のようになりました。

確かに数値は2倍になって、文字列はハッシュ化して返ってきました。ちょっとよく分からなかったのが、最初にResponseオブジェクトからどういう形式で値を取得するかという指定が必要なこと。これがPromiseオブジェクトで返ってくるので、いちいちthenを二回書かなきゃいけないという。response.json()で返ってくる値がPromiseオブジェクトじゃなくて、JSONオブジェクト(多重表現)になってるほうが直感的でわかりやすい気がするのだけど、多分、こうなってるメリットはあるんだろうと思う。このへんは多分、自分がPromiseについてよく分かってないから疑問に思ってるのだと思うので、もう少しこのへんも勉強していこうと思う。

ところで最初、fetchのbody部分を「body: new FormData(document.getElementById(‘frm’))」と指定しようと思ったのですが、それだといまいちメリットがないなと思ったら、JSONで渡せることを知ったのでそうしました。PHP側で『json_decode(file_get_contents(‘php://input’), true);』とすればいいそうです。初めて知りました。JSONのまま渡せるなら、便利ですね。これからはそうしようかな。

ブログをSSL(https)化しました

Facebook にシェア
Pocket

HTTPS化しようと思って前に書いたのに、全然していなかったこのブログをようやくHTTPS化しました。使用しているサーバはミニバードなのですが、無料で独自SSLに対応できるように変更されたようなので、HTTPS化しました。
対応方法の参考:サポートマニュアル /格安・大容量レンタルサーバーのミニバード|無料独自SSL

上記のページに書いてあることにプラス、.htaccessに自動的にhttpsに転送されるように変更しています。具体的には.htaccessの上部に下記のように追加しました。これで、ステータスコード301(Moved Permanently:恒久的に移動した)で自動的にhttpsのURLに転送されます。

参考:htaccessでHTTPSにリダイレクトする – Qiita

注意してほしいのが、WordPressを使っていると、.htaccessに「# BEGIN WordPress」と「# END WordPress」が記載された行があると思いますが、その間には上記設定を追加しないようにしてください。WordPressが勝手に書き換えてhttpsへの転送処理の記載が無くなってしまう可能性があります。

その後、WordPressの設定から、サイトのURLをhttpsに変更しておきました。

ただ、なぜかこの設定をしたのに、リンクが一部http://のままなんですよね……。

時間がたったら変わるかもしれないのでもう少し待ってみますが、変わらなかったらまた調べてみます。

そうそう、httpsといえば、最近Chromeではhttpsでないと動かないJavaScript APIなんてものがあるらしく、例えばNotifications APIがhttpの環境だとChromeで動作しなくなっています。
参考:Deprecating Powerful Features on Insecure Origins – The Chromium Projects(英語サイトです)

うちの会社では、オープンソース版のAipoというグループウェアを利用しているのですが、http環境で利用しているため、いつの間にかChromeで利用しているとデスクトップ通知されなくなってしまいました。一応、更新があるとタブに青い●がつくので更新されてるかどうかは分かるのですが、気づきにくいです(といっても、基本メールでのやり取りがメインで、Aipoでのチャットの利用は少ないんですけどね)。

余談ですが、オープンソース版のAipo自体は2018年3月31日に提供を終了しています(オープンソース|Aipo.com – アイポ・ドットコム)。

amazonの旧おすすめ商品ページについて

Facebook にシェア
Pocket

昔、amazonの「持っています」に登録するブックマークレットを作りましたが、その目的はamazonのおすすめ商品に反映させるためでした。

ですが、なんとそのおすすめページが先日、無くなりました。正確にいうと、マイストアのトップページにおすすめ商品が載っているので、それには影響しているのですが、以前のおすすめ商品ページだと「最近発売した商品」や「今後発売される商品」に分けてみれたので、新作チェックには大変便利でした。なんで、無くしてしまったのかと。

ただ、調べてみると、以下のリンクで旧おすすめページを見れることが分かりました。
https://www.amazon.co.jp/gp/yourstore/legacy/

legacyということは、無くしていく方向なんだろうなと思ってもう少し調べてみると、下記のリンクでもおすすめ商品ページに行けることが発覚。
https://www.amazon.co.jp/gp/yourstore/recs/

どういうことだと思って、上記の「legacy」や「recs」の箇所に適当な文字列をいれたら何でもおすすめ商品ページに行けることが発覚。
https://www.amazon.co.jp/gp/yourstore/xxx/
https://www.amazon.co.jp/gp/yourstore/○○○/

このページは無くしてほしくないのだけど、無くしていく方向なのかなぁ。残してほしい。

マイクロソフト認定資格の70-480(HTML5とJSとCSS3の試験)に合格しました

Facebook にシェア
Pocket

マイクロソフト認定資格(MCP)の70-480(Programming in HTML5 with JavaScript and CSS3)に昨日受けてきて合格しました。

会社がマイクロソフトのパートナー契約が切れたとのことで、再度契約するのにMCPに社内から二人合格する必要があり、そのうちの一人として暇そうな自分が選ばれました。

受けたのは大阪駅前第3ビルの3階にあるエンカレッジテストセンターというところ。入ったら想像以上に大勢の人が座っていて、ビックリしました。みんな何の試験を受けにきたのだろうと。就活生っぽい人が多かった印象。一人、本人確認書類に使えるものをもっていなかったらしく、しぶしぶ帰っていった就活生らしき女の子がいたのが印象的でした(にしても、スタッフのテキパキ度合いがすごかった)。

肝心の試験のほうは、だいたい一問一答の四択問題だろうなと思って受けたら、複数穴あきがある問題があったり、順番に並び替える問題があったりして少しややこしい問題も多かった。jQueryのAjaxのオプションや、Flexboxについての問題がちょっと難しかった(見たことはあるけど、ちゃんと使ったことがないので)。

得点は、1000点中の945点(合格点は700点)。8割を目標にしてたので、この結果はよかった。もう一人は先に受けていて、同じく950点程度(確か)で「簡単」とのことだったので、高得点がとれてよかった(ただし、もう一人のほうが受けたのは70-480ではなく、C#の試験の70-483)。

ただ、これだけ高得点がとれたのは、もう一人のほうに教えてもらったサイトで勉強したからだと思っています。そのサイトが下記。

70-480 – Microsoft Practice Exam Questions – 100% Free | Exam-Labs

このサイトで、無料登録すると200問以上の70-480にでてきた問題を見ることができます。中には、ほとんどそのままの問題もでてきて、このサイトを知らなかったらかなり得点は低かったと思います。英語のサイトなので、英語に自信がある人はそのまま解いていったほうがいいです。試験では英語に切り替えることもできるので。自分はGoogle翻訳で日本語に翻訳して切り替えました(Google Chromeを利用してる場合です)。

元に戻したくなったら、URLの右側に表示されてるGoogle翻訳アイコンをクリックすれば、元の英語表記に戻せませた。

なお、無料会員だと、次の問題のページに移動しようとすると下記のように『私はロボットではありません』と表示されます。チェックを押したら普通に進むので、これぐらいは大した問題ではないと思います。

なお、パット見、ページ番号を入力することがそのページに一気に飛ぶことができそうな気がしますが、ページ番号を変更しようとすると、アップグレードを促されます。

いろいろ試してみると、開発者ツールを開いて『NEXT』ボタンを選択し、そのタグの『data-page』という属性の値を変更して『NEXT』ボタンを押すことで指定のページに飛ぶことができました。

ただ気をつけなければいけないのが、このサイトの問題の答え、たまに間違っています。自信をもって「これだな」と思って解答を見たら、全然違う答えが正解となっていて面食らいました。ただ、だいたいそういう時はコメント欄をみると、「正解が間違っている。正しくは○」というような感じで、誰かがコメントしているので、コメント欄も見たほうがいいかもしれません(特に、なぜその答えになるのか分からない時)。

なお、このサイトは、MCPだけではなく、様々な試験に対応しているようですので、受けてみようと思っている資格があれば参考にしてみてください。
All Exam Dumps and Vendors

ちなみに、このサイトを知る前は下記記事を参考に勉強していました。
MCP(70-480 Programming in HTML5 with JavaScript and CSS3)試験対策 – To Be Determined

特に、MVAのビデオは一度見ておいたほうがいいかもしれません(日本語表記の字幕を表示することができます)。

CSSによる色のアニメーションはrgbとhslの指定で違いがあるか調べてみた

Facebook にシェア
Pocket

最近、ウェブサイトをいろいろ見ていて、このアニメーションの動きってどうしてるんだろうと思って調べてみると、CSSのtransisionの機能を使って実現しているというサイトが増えてきました(ちょっと前までアニメーションはjQueryで作っているところが多かった印象)。

自分も最近になってようやくその処理方法が分かってきたので、いつか実践で使ってみたいです。

ところで、このアニメーションですが、jQueryでは確か色の変更はアニメーションで実現できなかったと思うのですが、CSSのアニメーション機能はなんと色の変更まで実現できます。

そこで思ったのが、もしかしたら色をRGBで指定するのと、HSLで指定するのではアニメーションの変化が異なるのではないかと疑問。

例えば、RGBでの青の指定は『rgb(0,0,255)』、RGBでの黄色の指定は『rgb(255,255,0)』となりますが、HSLでの青の指定は『hsl(240, 100%, 50%)』、HSLでの黄色の指定は『hsl(60, 100%, 50%)』となるため。パット見、HSL指定だとHの色相部分だけの値を変えればいいだけなので、青から黄色に変化する場合は途中に緑色、つまり『hsl(150,100%,50%)』という値がでてくるのではないかと思いました。対してRGB指定だとrとgの値が増え、bの値が減るようになりそうなので途中に緑色『rgb(0,255,0)』はでてきそうにありません。

というわけで調べてみた。

HTML

CSS

JavaScript

青というラジオボタンをクリックしたら背景が青、黄色というラジオボタンをクリックしたら背景が黄色に5秒かけて変化するという処理をしています。アニメーションによる変化対象は背景色のみとしています(現在の処理だと、文字色はクリックと同時に変化しますが、CSSの『transition: background-color 5s;』を『transition: all 5s;』とすれば文字色もアニメーションで変化します)。色については左側の要素をRGB指定、右側の要素をHSL指定としています。

サンプル:CSS Color Animation

結果、全く同じように変化しました。RGB指定からHSL指定に変化することもできるわけだからそりゃそうか。