Analog Studio

Tips

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

全カテゴリ

記事一覧

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

概要

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

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

概要

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

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

概要

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

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

概要

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

インスタのタイムラインを表示させる方法!「Instagram API」の使い方

概要

Webサイトを制作していると公式インスタグラムのタイムラインを表示したくなります。しかし、インスタグラムにはタイムラインを簡単に表示できるようなものは用意されていません。もちろんタイムラインを表示させる仕組みが存在しないわけではないです。開発者ツールを使ってタイムラインの表示に必要な情報を取得してきて自分で作ることで実現できます。今回はそんな開発者ツールを使ったタイムラインの表示方法を紹介します。

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

概要

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

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

概要

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

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

概要

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