Analog Studio

Tips

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

全カテゴリ

記事一覧

【PHP】サブドメイン間でセッションを共有する方法

概要

皆さんは各種pay、使っていますか?私は全く使っていません(笑)いちいちスマホから決済用コードを表示させて店員さんにスキャンしてもらうって全然スマートじゃないですよ。各種payは、スマホのNFCやSuicaを利用した決済をベースにすればスマートだったと思います。システム的にも開発的にも、です。利便性の向上を目的に登録していないメールアドレスにパスワードのリセット情報を送信する7payは論外ですが、ちょっとしたことでユーザの利便性を上げる仕組みはあると嬉しいですよね。そこで今回は、サブドメイン間でセッション情報を共有する方法を紹介します。とても簡単なことなので、しっていると役に立つときがあると思います。

MicrosoftEdgeのレンダリングエンジンがGoogleChromeベースになります!

概要

皆さんはどんなブラウザを使っているでしょうか?開発者はもとより一般ユーザもGoogleChromeを使っている方が非常に多いですよね。そんなGoogleChromeのレンダリングエンジン「Chromium」(正確には少し違いがあります)を搭載したMicrosoftのEdgeブラウザが発表されました。少し前に"MicrosoftInternetExplorer"の使用をMSが正式にやめるよう発表したこともあり、独自規格の多かったMS系統のブラウザが根絶されそうです。開発者にとってはとても嬉しいニュースです。開発者向けにChromium搭載Edgeがリリースされたので紹介します。

アナログノイズのような「グリッチエフェクト」をCSSで実現する方法

概要

グリッチエフェクト、いわゆるアナログノイズが乗った映像の乱れのような効果があります。動画では良く利用されておりちょっとオシャレな演出ですよね。シンプルなページにもちょっとしょた動きが欲しいという時に役に立つこの「グリッチエフェクト」は、CSSだけで簡単に実装できますので紹介していきます。

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

概要

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

CSSのbox-shadowを滑らかにtransitionさせる方法【カクカクさせない】

概要

カードデザインというデザインを検討したことがある方は多いのではないでしょうか?レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。

PHPでSQLを使わない簡易的なコメント機能を実装しよう!

概要

Webサイトに簡易的なコメント機能を実装してみましたので、紹介します。SQLは使用せずにテキストでデータ管理します。ログインなども必要とせずにただちょっとコメントするだけという簡単なもので多くのコメントを捌くような使い方は想定していません。また、返信機能なども特にありませんので必要なら改造してみて下さい。

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

概要

Instagramの投稿をWebサイトに組み込むために「InstagramAPI」を使用しているWebデザイナー・ビルダーの方は多いと思います。しかし、2020年の初めまでに「InstagramAPI」は使用することができなくなることがアナウンスされています。そこで今回は、2020年以降でもInstagramの情報を取得できる「InstagramGraphAPI」の使用方法についてまとめます。「InstagramAPI」の使い方は既に記事にまとめていますが、これから開発される場合はこの記事を参考にして下さい。(2019/09/2516:44復帰確認したので削除)2019/09/20現在、InstagramGraphAPIでメディア情報を取得しようとすると、"Anunknownerrorhasoccurred."というエラーが発生しております。filedsにmediaを含めないようにすればフォロワ数やプロフィール画像などは取得できますので、FacebookやInstagram若しくはその連携で異常が発生していると思われます。異常が解消されるか、対応策が見つかるまでは動向を確認して随時追記したいと思います。(15:35追記)とりあえず復活したようです。少し様子見します。(2019/09/28約2ヶ月経ったので表記削除)(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と違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。