Web サイト制作に役立つ情報や小技などをまとめています。
カードデザインというデザインを検討したことがある方は多いのではないでしょうか？レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。
シームレスなWebサイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。JavascriptやCSSを使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。そんな時にページ遷移が発生してしまうとユーザに大きなストレスを与えてしまいます。フォームなどでユーザから入力を受け付けていた場合にはその影響は大変大きなものです。前の状態に戻すこと＝ブラウザの「戻る」ボタン、という認識で操作してしまうことは良く見かけます。そこで今回は、ページ遷移はしないけどブラウザの「戻る」ボタンは有効にできる小技を紹介していきます。CSSだけでは実現できませんので、悪しからず。
JavascriptのXHRやfetchを使って非同期に通信を行う際、自分のドメインを超えて他のドメインにアクセスしたいことはよくありますよね。XHR/fetchはいずれも他ドメインへの通信も可能(正確にはXHRは(通称)XHRLevel2以降)ですが、サーバ側でドメインが異なるアクセス元からの通信を許可してやる必要があります。これがCORS(Cross-OriginResourceSharing)と呼ばれる決まり・技術です。先日、ちょっと調べる機会がありましたのでその際に確認したことを備忘録を兼ねて共有したいと思います。CORSを扱う際には.htaccessなどでヘッダを追加する方法が取られますが、サーバサイドプログラムで出力すれば良かった(私自身もそうであるべきだと思っていた)のでそのあたりも含めてまとめます。また、Javascript側からヘッダを追加する(Authorizationヘッダなどが多い)場合などに必要になるpreflightリクエストについても言及します。
1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTreeAPIは、2023年12月22日をもって終了しました。本記事の内容はすでに利用できません。https://timetreeapp.com/intl/ja/newsroom/2023-12-14/connect-app-api-202312TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント今回はAPIへのアクセスに必須なアクセストークン取得についてまとめます。カレンダー情報の取得や予定の追加・更新・削除は別途まとめます。トークン取得だけ読みたい方は「3.アクセストークンを取得しよう！」まで飛ばして下さい。
平成最後のGWは10連休のようで、ダラダラと過ごしていますでしょうか？時間が出来たら、ちょっとずつやればいいやと思いなかなか手につかないことも多いでしょう。Webの世界にも時が来れば・必要になれば実行しよう、という怠惰な動作をするものがあります。それが「LazyLoad」(遅延読込)という画像などが表示領域内にスクロールされてから読み込む技術です。色々なライブラリが公開されていますが、カスタムデータ属性(任意に設定できるdata-***というHTML要素に付ける属性)が必要です。新規で構築する場合は良いですが、既に作ってしまったページに適応するのはかなり面倒です。そこで、カスタムデータ属性を使わないで既存ページに追加するだけで使える超軽量コード(542B)を作ってみました。そこそこ汎用性があると思いますので、是非ご検討下さい。
現在では、ブラウザに標準でフォーム要素のバリデーションを行う機能が備わっています。type属性によって自動的に適応されるルールや、pattern属性の正規表現によるルールなどを検証してくれてとても便利です。このバリデーションのエラー表示は送信ボタンを押下したタイミングで表示されますが、上から順番に検証されて初めにバリデーションエラーが発生した入力要素にエラーを表示すると、そこで検証が終了してしまいます。フォームの入力要素が数多くある場合には、これでは非常に非効率でユーザに与えるストレスが大きくなります。そこでJavascriptを使ってすべての要素を検証してエラーを全て表示するようにしてみましょう。
CSSのtransitionプロパティで使えるcubic-bezier関数を使うことは良くあると思います。しかし、Javascriptではどうでしょうか？使ったことがないという方が多いでしょう。Javascriptの標準関数にはcubic-bezier(3次のベジュ曲線)と等価なものはありません。そのため自作しなければならないのですが、Web上ではなかなか紹介されていません。そこでcubic-bezierを計算する関数を生成する関数を作ったので紹介します。
Googleが提供しているサービスを自分のサイトに組み込んで活用したいことは多いと思います。良く使うサービスでいえば地図(GoogleMaps)の埋め込みなどがあります。地図の埋込なら地図上から共有用の<iframe>コードを取得でき簡単に埋め込めますが、この<iframe>のsrc属性に設定するURLを住所から自動生成したいといった場合にはAPIの力を借りる必要があります。その他にも非常に多彩な処理が可能になるAPIが使えるようにしてくれているのでぜひ使っていきたいですよね。そこで、GoogleAPIを使う基本的な使用方法をまとめたいと思います。
WordPressでサイトを作成する時、お問い合わせフォームとして「ContactForm7」というプラグインを使う機会は多いと思います。非常に便利でカスタマイズ性に優れたプラグインですが、サーバや設定によっては送信されるまでに非常に時間が掛かることや迷惑メールに仕分けられてしまうこともあります。もっと深刻だとメールが送信すらされないこともあります。そんな時、メールの送信にSMTPサーバというメール送信用のサーバを設定することで解決できることが多いです。そこで今回はそんなSMTPサーバの設定方法を紹介します。
JavascriptのXHRやfetchを使って非同期に通信を行う際、自分のドメインを超えて他のドメインにアクセスしたいことはよくありますよね。XHR/fetchはいずれも他ドメインへの通信も可能(正確にはXHRは(通称)XHRLevel2以降)ですが、サーバ側でドメインが異なるアクセス元からの通信を許可してやる必要があります。これがCORS(Cross-OriginResourceSharing)と呼ばれる決まり・技術です。先日、ちょっと調べる機会がありましたのでその際に確認したことを備忘録を兼ねて共有したいと思います。CORSを扱う際には.htaccessなどでヘッダを追加する方法が取られますが、サーバサイドプログラムで出力すれば良かった(私自身もそうであるべきだと思っていた)のでそのあたりも含めてまとめます。また、Javascript側からヘッダを追加する(Authorizationヘッダなどが多い)場合などに必要になるpreflightリクエストについても言及します。
パララックスと呼ばれる視覚効果をご存知でしょうか？スクロールに応じて要素がスクロールとは少し違う動き(左右だったり上下逆だったり、速度が違ったり)をして印象的にする効果です。遅延読込させた画像のロード時の効果として使われる場合もあり、採用しているサイトは多いです。しかし、従来はscrollイベントかタイマーで要素を監視して必要になったら動作させるものが主流でした。scrollイベントは非常に短い間隔で発火され、位置を把握するgetBoundingClientRect()関数による強制レンダリングにより往々にして処理が重くなりがちでユーザ体験を悪化させる一因になりかねないものです。そんな悩みの種を解消する方法にIntersectionObserverAPIが提供されました。このAPIを利用すると従来の高負荷な処理が無くなり、必要なタイミングでのみ処理を行えば良く、非常に効率的になります。
CSSのグラデーション関数は便利ですよね。最近のWebデザインではボーダーやボタンなどにグラデーションが付いていることも増えてきました。画像の作成が必要なく修正も用意で、簡単にオシャレにできるので人気があります。しかし、グラデーションを使っていて縞模様が気になってしまった…という経験をお持ちの方も多いのではないでしょうか？この現象はバンディングやマッハバンドと呼ばれPhotoshopなどでも発生してしまうなかなか厄介なものです。生成されたイメージの階調が少なく淡いグラデーションではどうしても気になってしまい根本的には解決できません。そこで今回はそんなバンディングを目立たなくする手法を紹介します。
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が保存される方法をまとめます。
あけましておめでとうございます。2020年もAnalogStudioを宜しくお願い致します。本年も役立つ情報をまとめていきたいと思います。
皆さんは決済代行サービスに何を利用されているでしょうか？私は専ら「PayPal」でしたが、ここ最近話題になっている「Stripe」も有料記事の決裁で導入してみました。そこで、この両者を比較してメリット・デメリットを確認してみようと思います。どちらも一長一短ありますので、ご自分のサイトに合ったサービスの導入を検討て下さい。
秋といえば色々な果物などが旬で楽しい時期ですよね。そんな旬のフルーツの一つに「キウイフルーツ」があります。私が住む静岡県掛川市には日本最大級のキウイ農園があります。それが「キウイフルーツカントリーJapan」さんです！縁あってWebサイトのリニューアルを任せて頂き、自由にアピールしてもいいよということなので紹介したいと思います。「キウイフルーツカントリーJapan」はキウイの栽培だけでなく、手ぶらBBQが楽しめたりと隠れた観光名所になっています。まずは農園の紹介とサイトの紹介をしたいと思います。サイトのWeb技術的な紹介は別途まとめていきます。
1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTreeAPIは、2023年12月22日をもって終了しました。本記事の内容はすでに利用できません。https://timetreeapp.com/intl/ja/newsroom/2023-12-14/connect-app-api-202312TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント前回から大分間が空いてしまいましたが、今回はイベントの登録方法についてまとめます。第1回「アクセストークン取得編」と第2回「カレンダー情報取得編」は以下のリンクからご確認下さい。アクセストークン取得編カレンダー情報取得編