Analog Studio

Tips

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

全カテゴリ

記事一覧

「Instagram API」が廃止に!代替の「Instagram Graph API」に移行しよう!

概要

Instagramの投稿をWebサイトに組み込むために「InstagramAPI」を使用しているWebデザイナー・ビルダーの方は多いと思います。しかし、2020年の初めまでに「InstagramAPI」は使用することができなくなることがアナウンスされています。そこで今回は、2020年以降でもInstagramの情報を取得できる「InstagramGraphAPI」の使用方法についてまとめます。「InstagramAPI」の使い方は既に記事にまとめていますが、これから開発される場合はこの記事を参考にして下さい。(2019/07/30追記)本記事の一部は盗用対策で有料化させて頂きました。大変申し訳ありませんがご了承願います。一部記事を有料化します2019年4月に公開以降約4か月で、1万PV以上の方にお越し頂いておりこの記事の通りに進めていけばAPI経由でInstagaramのタイムラインを表示させることができると自信をもってお届けできます。PayPal経由でお支払い頂ければ直ぐに記事を読むことができます。銀行振込の場合は1~5日程度のタイムラグ(曜日や時間による)が発生しますのでご注意下さい。

ページ遷移しないけど、ブラウザの戻るボタンを有効にする方法【pushState】

概要

シームレスなWebサイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。JavascriptやCSSを使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。そんな時にページ遷移が発生してしまうとユーザに大きなストレスを与えてしまいます。フォームなどでユーザから入力を受け付けていた場合にはその影響は大変大きなものです。前の状態に戻すこと=ブラウザの「戻る」ボタン、という認識で操作してしまうことは良く見かけます。そこで今回は、ページ遷移はしないけどブラウザの「戻る」ボタンは有効にできる小技を紹介していきます。CSSだけでは実現できませんので、悪しからず。

Javascriptで電話番号をハイフン区切りに整形する方法

概要

お問い合わせフォームなどで電話番号を入力してもらいたいことがありますよね。見やすさや管理のしやすさから3つの入力欄を設けている場合が多いです。しかし、ユーザの観点から云えば入力欄を切り替えなければならず入力が面倒だと感じます。そこで今回は、入力された電話番号をハイフン(-)区切りに変換する方法を紹介します。また不要な文字は削除して半角の整形された電話番号を返すようにしてユーザの負担を最小限にしょましょう。SQLなどのDBに保存する際に「市外局番、市内局番、識別番号」と分けたい場合にも区切り文字があるので簡単に分けて保存しておくこともできます。では、実際にやっていきましょう。

PHPのechoとprintの違いとは?「echoが早い」はホントなのかも検証!

概要

PHPには良く似た命令や関数が複数用意されていることがあります。その中でも良く使う"echo"と"print"の違いってなんだろうと疑問に思った方も多いはずです。そこで、"echo"と"print"の違いをまとめます。また、一般的に"echo"の方が早いって言われてますが、本当かどうか検証したいと思います。

スマホ用のメニューをどうするか?使いやすいメニューを考える

概要

スマートホンに最適化させたWebデザインを設計する時、メニューをどのように配置しようか悩ましいですよね。PCと違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。

パンくずリストを表示させよう!ユーザにも検索エンジンにも優しいナビゲーション!

概要

「パンくずリスト」というものをご存知でしょうか?Webサイト上で現在のページがどんな階層のどのカテゴリに属するのかを表示したナビゲーションを指しています。あなたのページに訪れてくれたユーザの方にカテゴリを教えて分かりやすくするだけでなく、実は検索エンジンにも好まれるのです。いわゆる「SEO対策」として有効な手段ということです。そこで今回はパンくずリストの構造と作り方、Wordpressでの表示方法についてまとめます。まだ導入されていない方は是非この機会に導入しておきましょう。

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

概要

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

郵便番号から自動で住所を検索する方法【Javascript】

概要

Webサイトに訪れてくれた方からのお問い合わせにフォームを使うことは多いと思います。メールクライアントソフトを起動させることなく、ブラウザ上から手軽に送信できる利点は大きいです。また、必要な項目が予め表示されているので記載すべき内容をユーザが考えなくても良いというところも大事ですね。さてそんな便利なフォームですが、住所の入力をお願いしたいという管理者の方も多いのではないでしょうか?しかし住所の入力は億劫な方が多いのも事実です。少なくとも私は好きではありません(笑)せっかくお問い合わせしようとしても面倒な項目が必須だと送信を躊躇ってしまうこともあります。そこで、Javascriptを用いて郵便番号から自動的に住所を検索してユーザの利便性を上げる方法を紹介します。コンセプトは「ユーザの手間を少しでも減らす」です。また、どこにでも軽量に組み込めるようにjQueryは使いません。

Font Awesome 5 Free を疑似要素で使う方法と高速化のヒント

概要

SNSのアイコンなどを文字のように色を変えたり劣化させずに拡大縮小したい時に役に立つものにアイコンフォントがあります。アイコンフォントは、ここ数年のSNSの浸透で特に浸透してきたように思います。そんなアイコンフォントの中でも無料で使えて種類が非常に豊富な「FontAwesome5」(Free版)について解説します。基本的な使い方は既に色々な情報がありますので、ここでは疑似要素での使用方法とCSS読み込みの高速化をハックしていきましょう。

Javascriptでページ遷移せずにPOST送信する方法【非同期通信】【XHR】

概要

データをPOSTメソッドでサーバなどへ送信する時、HTMLの<FORM>要素を使って送信するとページが遷移しますよね。でも、場合によってはページ遷移はさせたくないけどデータはPOSTで送信したいということがあります。今回は、そんな場合にどのようにすれば良いかをまとめます。使う手法は、XMLHttpRequest(略してXHR)という非同期でサーバとブラウザが通信を行う仕組みを利用してます。フォームに入れたデータを送信する場合とデータは別で用意する場合の2パターンについて解説します。