Login
Login

Tech

Usual Tools にて制作したツールやライブラリ。単体で動くかの試行も。資料

Web制作便利ツール

IPアドレス／User Agent環境の確認 https://d.usual.tools エイリアス的な。転送
ランダム文字列
Tree
サイズ変換・計算
大文字・小文字
Map
WebP画像へ変換
Youtubeのサムネイル取得
OGP画像の確認
CSS Box Shadow

Functions Usual Tools

JavaScriptとPHPの便利ライブラリー

PHP Library Class UT5Util 文字列操作
UT5Date 日にち操作
JavaScript Library UT5 Tracking 日にち操作
PHP Library Class W Tools jQuery Library. Webサイトに必要な機能を実装
WT Date jQuery Library. 日にち操作

jQuery Plugin

Usual Tools にて制作した jQuery Plugin

Auto Filesize ファイルサイズを自動で取得する
W Tools Webサイトに必要な機能を実装
Poptips マウスカーソルをあわせるとポップアップする
Usual Video ビデオを設置。mp4ファイルやYoutube
Count Control 「ニュースを最新何件」を実現
Table Rollover 表にて、マウスカーソルの行をハイライト
WT Date 日にちそうさ

試し

JavaScript & HTML & css & PHP にて、単体で表示や動作を試す

JavaScript

YouTube 設置 Youtube API
Youtube
lite-youtube-embed
動画設置 html5 video要素
Window Size 画面・ウィンドウのサイズを取得
matchMedia() JavaScriptでメディアクエリ

JavaScript Library

Swiper 1
Swiper & Video
D3.js D3.jsはウェブブラウザで動的コンテンツを描画するJavaScriptライブラリ

jQuery

Datepicker jQuery UI datepicker
Datepicker 2 jQuery UI jQuery UI はdatepickerのみにカスタマイズしている（軽量化のため）
Date Range Picker 01
moment.js 版 		https://www.daterangepicker.com/
Date Range Picker 02
moment.js なし dayjs 版 		daterangepicker-dayjs
Using CDN
Date Range Picker 03
moment.js なし dayjs 版。そしてビルド済み 		https://www.daterangepicker.com/
Flatpickr https://flatpickr.js.org
jQuery inArray inArray
jQuery リンクの無効/有効

HTML & css

Web Fonts Web Fonts
Link Click Link Click
Multi Column Multi Column

PHP

Date 1 Datetime関数
Date 2 週ごと

PHP Library

FPDF 1 古くからあるPDF生成ライブラリー。fpdf.org v1.85 (2022-11-10)
FPDF 2 日本語
TCPDF 1 TCPDF
parsedown

外部サービス連携

外部サービス連携

Googleフォームのカスタマイズ Googleのアンケートを作成、分析できる無料サービス
https://www.google.com/intl/ja_jp/forms/about/
Twitter 埋込み jsを使った読込みでページに埋め込む。data-widget-idありのものも、それは古いやり方
Twitteroauth PHP
Instagram Graph API PHP
reCAPTCHA v3 PHP

サンプルサイト Samploon

ABテストやconversion。フォーマットも

全サンプルセクション

Sample Cafe

基本GTM。一部gtag

Sample Cafe Home サンプルン Samploon SAMPLOON
カフェ店内での飲食メニュー
/tech/sample/cafe/store
カフェメニューのお取り寄せオンラインストア
買い物カゴ
購入者情報の入力
  • gtag
  • アレルギー linkをクリックで、計測
  • 計測は単体プログラム
  • 確認
 /tech/sample/cafe/order/03-confirmation
入力情報の確認
  • 完了
 /tech/sample/cafe/order/04-thankyou
購入完了 Thank you
  • Campaign
 x
x
x
MV画像が背景
MV画像がimg要素
  • お問合せ
  • 確認
 /tech/sample/cafe/inquiry/02-confirmation
  • 完了 Thank you
 /tech/sample/cafe/inquiry/03-thankyou
  • GTM
  • dataLayer.push で purchase
  • その他

Sample ネットストア

WordPress WooCommerce。PixelYourSite でGA4コードを入れている（gtag.js）

samplestore Home
https://samplestore.usual.tools
ストア。商品一覧 /store/
買い物カゴ /cart/
支払い /checkout/

Sample 洋服屋

基本GTM。ThanksもGTM

Sample 洋服屋 Home
カフェ店内での飲食メニュー
洋服のオンラインストア
買い物カゴ
購入者情報の入力
  • 確認
 /tech/sample/clothing-store/order/03-confirmation
入力情報の確認
  • 完了
 /tech/sample/clothing-store/order/04-thankyou
購入完了 Thank you
  • お問合せ
  • 確認
 /tech/sample/clothing-store/inquiry/02-confirmation
  • 完了 Thank you
 /tech/sample/clothing-store/inquiry/03-thankyou

Sample 歯医者

基本GTM。ThanksもGTM

Sample 歯医者 Home
  • Online 予約
 予約
買い物カゴ
購入者情報の入力
  • 確認
 /tech/sample/dental-clinic/reservation/03-confirmation
入力情報の確認
  • 完了
 /tech/sample/dental-clinic/reservation/04-thankyou
購入完了 Thank you

PageSpeed

01
何も指定しない
  • css なし
  • js なし
02
GTM のみ
  • css なし
  • js: GTMコード
03
head に外部js3種
  • css なし
  • js (head): 外部3種(GTMコード, Google AdSense, Adobe Fonts)
↑ここまでは問題なし  
04
css minimal-setup
重い
  • css minimal-setup
  • js (head): 外部3種
05
css light-setup
重い
  • css light-setup
  • js (head): 外部3種
06
css 従来 default
重い
  • css 従来 default
  • js (head): 外部3種
07
css 従来 default
重い
  • css light-setup
  • js (head): 外部3種
MV画像が背景
MV画像がimg要素

その他

BASIC認証 BASIC認証
IP アドレス制限

その他2

xhtml xhtml
いろいろhtml いろいろhtml
device

レガシー

flash
CGI

資料

語彙・類語・言いまわし xxx
タグ・キーワード・ハッシュタグ xxx
使いそうなHTML特殊文字 xxx
いろんなversion xxx