Web サイト制作に役立つ情報や小技などをまとめています。
JavascriptのXHRやfetchを使って非同期に通信を行う際、自分のドメインを超えて他のドメインにアクセスしたいことはよくありますよね。XHR/fetchはいずれも他ドメインへの通信も可能(正確にはXHRは(通称)XHRLevel2以降)ですが、サーバ側でドメインが異なるアクセス元からの通信を許可してやる必要があります。これがCORS(Cross-OriginResourceSharing)と呼ばれる決まり・技術です。先日、ちょっと調べる機会がありましたのでその際に確認したことを備忘録を兼ねて共有したいと思います。CORSを扱う際には.htaccessなどでヘッダを追加する方法が取られますが、サーバサイドプログラムで出力すれば良かった(私自身もそうであるべきだと思っていた)のでそのあたりも含めてまとめます。また、Javascript側からヘッダを追加する(Authorizationヘッダなどが多い)場合などに必要になるpreflightリクエストについても言及します。
Wordpressのカスタマイザで画像を選択させる時に使うWP_Customize_Image_Controlクラスを使っている方は多いと思います。しかし、テーマの設計上でサイズの小さい画像やサムネイルも欲しい時、WP_Customize_Image_Controlクラスだと画像のURLになってしまうので少し面倒です。一般的に良くある解決法は画像URLからAttachmentID(以降、単に「ID」と呼ぶ)を取得するattachment_url_to_postid関数を使っています。でもこのattachment_url_to_postid関数は実行するたびにSQLクエリを飛ばすので頻繁には使いたくないですね。取得したIDからwp_get_attachment_image_urlなどの関数でもデータベースにアクセスするので無駄が多いです。そこではじめからIDを使うことが決まっている場合にカスタマイザでIDが保存される方法をまとめます。
皆さんは決済代行サービスに何を利用されているでしょうか？私は専ら「PayPal」でしたが、ここ最近話題になっている「Stripe」も有料記事の決裁で導入してみました。そこで、この両者を比較してメリット・デメリットを確認してみようと思います。どちらも一長一短ありますので、ご自分のサイトに合ったサービスの導入を検討て下さい。
秋といえば色々な果物などが旬で楽しい時期ですよね。そんな旬のフルーツの一つに「キウイフルーツ」があります。私が住む静岡県掛川市には日本最大級のキウイ農園があります。それが「キウイフルーツカントリーJapan」さんです！縁あってWebサイトのリニューアルを任せて頂き、自由にアピールしてもいいよということなので紹介したいと思います。「キウイフルーツカントリーJapan」はキウイの栽培だけでなく、手ぶらBBQが楽しめたりと隠れた観光名所になっています。まずは農園の紹介とサイトの紹介をしたいと思います。サイトのWeb技術的な紹介は別途まとめていきます。
WordPressに関する小技も紹介していこうと思います。まずは、Wordpressの記事投稿画面でカテゴリを選ぶ際にセレクトボックスではなくラジオボタンに変更する方法です。WordPressでは複数のカテゴリを選択できるようになっているのですが、どれか一つだけにした方が良いことが多いと思います。そこで、セレクトボックスからラジオボタンに変更する簡単な方法を紹介します。
終身雇用が実質的に破綻した日本ですが、それに伴い副業が活気付いています。副業は職業選択の自由から制限されるものではありませんので、本来は就業規則で禁止できるものではないです。悪く言えば会社が「違憲」です。(一方の仕事が忙しく他方の仕事に支障がきたす場合などの例外はあります)そんな副業全盛時代にこそ「ブログ」という選択肢を考えてみることは非常に意義のあるものだと思います。副業で別の企業に就職するとなるとやはり時間的な制約が厳しく、適した仕事を探すことは容易ではないでしょう。しかし、ブログなら空いた時間に自由に更新していくことができるので、副業の第一歩として選びやすいです。そこで、ブログといえばこれ！というくらいに浸透してきている「Wordpress」についてまとめます。
皆さんはどんなブラウザを使っているでしょうか？開発者はもとより一般ユーザもGoogleChromeを使っている方が非常に多いですよね。そんなGoogleChromeのレンダリングエンジン「Chromium」(正確には少し違いがあります)を搭載したMicrosoftのEdgeブラウザが発表されました。少し前に"MicrosoftInternetExplorer"の使用をMSが正式にやめるよう発表したこともあり、独自規格の多かったMS系統のブラウザが根絶されそうです。開発者にとってはとても嬉しいニュースです。開発者向けにChromium搭載Edgeがリリースされたので紹介します。
スマートホンに最適化させたWebデザインを設計する時、メニューをどのように配置しようか悩ましいですよね。PCと違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。