Analog Studio

Tips

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

全カテゴリ

記事一覧

【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パターンについて解説します。