Analog Studio

Tips

Web サイト制作に役立つ情報や小技などをまとめています。

全カテゴリ

ランダム記事

PayPal API (version 2) を使ってクレジットカード決済を実装しよう!

概要

8月になり全国的に梅雨も明けて非常に暑い日が続いておりますが、皆様体調如何でしょうか?1ヶ月前は寒い日があったのですが、急な環境の変化は辛いですね。さて、1ヶ月前と云えば「7pay」がセキュリティ対策ができておらず大変な被害が出てしまいまったことは記憶に新しいです。(そして9月末で終了)このような新しいシステムの導入は慎重に進めて貰いたいところです。なにやら「UNIQLOPay」なる決済も商標出願したことで一時話題になりました。さて、そんな新規参入したキャッシュレス決済システムにはセキュリティ上の懸念がどうしても付きまといます。対して、古くから使われているシステムはその点で信頼と実績が高いです。こうした古参のシステムとして世界的にも広く使われているシステムに「PayPal」(ペイパル)があります。(PayPayじゃないですよ)ECや決済用のAPIが多数用意されており、基本無料で利用できますので、この便利なAPIを使った決済方法をまとめていこうと思います。

【2019年で廃止予定】インスタのタイムラインを表示させる方法!「Instagram API」の使い

概要

この記事で紹介している「InstagramAPI」は2020年初めまでに廃止される予定です。代替APIはFacebookが提供する「InstagramGraphAPI」になります。これからインスタグラムのタイムラインを表示しようと考えている方は、以下の記事を参考にして下さい。・「InstagramAPI」が廃止に!後継の「InstagramGraphAPI」に移行しよう!Webサイトを制作していると公式インスタグラムのタイムラインを表示したくなります。しかし、インスタグラムにはタイムラインを簡単に表示できるようなものは用意されていません。もちろんタイムラインを表示させる仕組みが存在しないわけではないです。開発者ツールを使ってタイムラインの表示に必要な情報を取得してきて自分で作ることで実現できます。今回はそんな開発者ツールを使ったタイムラインの表示方法を紹介します。

XHRによるCORS通信時のpreflight問題について考える【.htaccessは要らないよ】

概要

JavascriptのXHRやfetchを使って非同期に通信を行う際、自分のドメインを超えて他のドメインにアクセスしたいことはよくありますよね。XHR/fetchはいずれも他ドメインへの通信も可能(正確にはXHRは(通称)XHRLevel2以降)ですが、サーバ側でドメインが異なるアクセス元からの通信を許可してやる必要があります。これがCORS(Cross-OriginResourceSharing)と呼ばれる決まり・技術です。先日、ちょっと調べる機会がありましたのでその際に確認したことを備忘録を兼ねて共有したいと思います。CORSを扱う際には.htaccessなどでヘッダを追加する方法が取られますが、サーバサイドプログラムで出力すれば良かった(私自身もそうであるべきだと思っていた)のでそのあたりも含めてまとめます。また、Javascript側からヘッダを追加する(Authorizationヘッダなどが多い)場合などに必要になるpreflightリクエストについても言及します。

超軽量コードで画像の遅延読込を組み込む方法 (542B)【jQuery不要】

概要

平成最後のGWは10連休のようで、ダラダラと過ごしていますでしょうか?時間が出来たら、ちょっとずつやればいいやと思いなかなか手につかないことも多いでしょう。Webの世界にも時が来れば・必要になれば実行しよう、という怠惰な動作をするものがあります。それが「LazyLoad」(遅延読込)という画像などが表示領域内にスクロールされてから読み込む技術です。色々なライブラリが公開されていますが、カスタムデータ属性(任意に設定できるdata-***というHTML要素に付ける属性)が必要です。新規で構築する場合は良いですが、既に作ってしまったページに適応するのはかなり面倒です。そこで、カスタムデータ属性を使わないで既存ページに追加するだけで使える超軽量コード(542B)を作ってみました。そこそこ汎用性があると思いますので、是非ご検討下さい。

記事一覧

XHRによるCORS通信時のpreflight問題について考える【.htaccessは要らないよ】

概要

JavascriptのXHRやfetchを使って非同期に通信を行う際、自分のドメインを超えて他のドメインにアクセスしたいことはよくありますよね。XHR/fetchはいずれも他ドメインへの通信も可能(正確にはXHRは(通称)XHRLevel2以降)ですが、サーバ側でドメインが異なるアクセス元からの通信を許可してやる必要があります。これがCORS(Cross-OriginResourceSharing)と呼ばれる決まり・技術です。先日、ちょっと調べる機会がありましたのでその際に確認したことを備忘録を兼ねて共有したいと思います。CORSを扱う際には.htaccessなどでヘッダを追加する方法が取られますが、サーバサイドプログラムで出力すれば良かった(私自身もそうであるべきだと思っていた)のでそのあたりも含めてまとめます。また、Javascript側からヘッダを追加する(Authorizationヘッダなどが多い)場合などに必要になるpreflightリクエストについても言及します。

Intersection Observer API を使った簡単なパララックスの実装方法

概要

パララックスと呼ばれる視覚効果をご存知でしょうか?スクロールに応じて要素がスクロールとは少し違う動き(左右だったり上下逆だったり、速度が違ったり)をして印象的にする効果です。遅延読込させた画像のロード時の効果として使われる場合もあり、採用しているサイトは多いです。しかし、従来はscrollイベントかタイマーで要素を監視して必要になったら動作させるものが主流でした。scrollイベントは非常に短い間隔で発火され、位置を把握するgetBoundingClientRect()関数による強制レンダリングにより往々にして処理が重くなりがちでユーザ体験を悪化させる一因になりかねないものです。そんな悩みの種を解消する方法にIntersectionObserverAPIが提供されました。このAPIを利用すると従来の高負荷な処理が無くなり、必要なタイミングでのみ処理を行えば良く、非常に効率的になります。

CSSのグラデーションに縞模様(バンディング)が出てしまった時の対処法【gradient】

概要

CSSのグラデーション関数は便利ですよね。最近のWebデザインではボーダーやボタンなどにグラデーションが付いていることも増えてきました。画像の作成が必要なく修正も用意で、簡単にオシャレにできるので人気があります。しかし、グラデーションを使っていて縞模様が気になってしまった…という経験をお持ちの方も多いのではないでしょうか?この現象はバンディングやマッハバンドと呼ばれPhotoshopなどでも発生してしまうなかなか厄介なものです。生成されたイメージの階調が少なく淡いグラデーションではどうしても気になってしまい根本的には解決できません。そこで今回はそんなバンディングを目立たなくする手法を紹介します。

Wordpressのカスタマイザで画像IDを保存する方法

概要

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」はどちらがいいの?

概要

皆さんは決済代行サービスに何を利用されているでしょうか?私は専ら「PayPal」でしたが、ここ最近話題になっている「Stripe」も有料記事の決裁で導入してみました。そこで、この両者を比較してメリット・デメリットを確認してみようと思います。どちらも一長一短ありますので、ご自分のサイトに合ったサービスの導入を検討て下さい。

Webサイトを作成させて頂きました!~キウイフルーツカントリーJapan~

概要

秋といえば色々な果物などが旬で楽しい時期ですよね。そんな旬のフルーツの一つに「キウイフルーツ」があります。私が住む静岡県掛川市には日本最大級のキウイ農園があります。それが「キウイフルーツカントリーJapan」さんです!縁あってWebサイトのリニューアルを任せて頂き、自由にアピールしてもいいよということなので紹介したいと思います。「キウイフルーツカントリーJapan」はキウイの栽培だけでなく、手ぶらBBQが楽しめたりと隠れた観光名所になっています。まずは農園の紹介とサイトの紹介をしたいと思います。サイトのWeb技術的な紹介は別途まとめていきます。

カレンダー共有アプリ「TimeTree」のAPIを使おう!~イベント登録編~

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント前回から大分間が空いてしまいましたが、今回はイベントの登録方法についてまとめます。第1回「アクセストークン取得編」と第2回「カレンダー情報取得編」は以下のリンクからご確認下さい。アクセストークン取得編カレンダー情報取得編

カレンダー共有アプリ「TimeTree」のAPIを使おう!~カレンダー情報取得編~

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント今回は第2弾ということでアクセス可能なカレンダー情報の一覧を取得する方法をまとめます。予定の登録や編集は次回まとめます。TimeTreeの概要については前回記事をご参照下さい。1.TimeTreeとは?2.TimeTreeAPIで何ができるのか?

カレンダー共有アプリ「TimeTree」のAPIを使おう!~アクセストークン取得編~

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント今回はAPIへのアクセスに必須なアクセストークン取得についてまとめます。カレンダー情報の取得や予定の追加・更新・削除は別途まとめます。トークン取得だけ読みたい方は「3.アクセストークンを取得しよう!」まで飛ばして下さい。

Wordpressの投稿画面でカテゴリ選択を一つだけに変更する方法【ラジオボタン化】

概要

Wordpressに関する小技も紹介していこうと思います。まずは、Wordpressの記事投稿画面でカテゴリを選ぶ際にセレクトボックスではなくラジオボタンに変更する方法です。Wordpressでは複数のカテゴリを選択できるようになっているのですが、どれか一つだけにした方が良いことが多いと思います。そこで、セレクトボックスからラジオボタンに変更する簡単な方法を紹介します。

無料で使えるWordpressでブログをはじめよう!副業にも趣味にも最適です。

概要

終身雇用が実質的に破綻した日本ですが、それに伴い副業が活気付いています。副業は職業選択の自由から制限されるものではありませんので、本来は就業規則で禁止できるものではないです。悪く言えば会社が「違憲」です。(一方の仕事が忙しく他方の仕事に支障がきたす場合などの例外はあります)そんな副業全盛時代にこそ「ブログ」という選択肢を考えてみることは非常に意義のあるものだと思います。副業で別の企業に就職するとなるとやはり時間的な制約が厳しく、適した仕事を探すことは容易ではないでしょう。しかし、ブログなら空いた時間に自由に更新していくことができるので、副業の第一歩として選びやすいです。そこで、ブログといえばこれ!というくらいに浸透してきている「Wordpress」についてまとめます。