Googleが提供しているスピードチェック
PageSpeed Insights
HTMLの文法チェック
Another HTML-lint gateway
カテゴリー別アーカイブ: 便利
ラインアートのイラスト素材
Instagram をAPIなしでホームページに表示させる
2021.6 こちらも表示ができなくなりました。
2020年後半あたりからInstagramの一覧などを特定のホームページに表示させるにはAPI登録が必要になりました。
ただ、API取得にはFacebookとの連携だったりトークンの期限を無期限にしたりと手間がかかります。
そこで、APIなしで表示できるJavaScriptがあります。
「InstagramFeed」無料
https://www.sowecms.com/demos/InstagramFeed/
ブラウザ上で操作できる画像編集ツール
オンライン イメージエディタ
https://www.peko-step.com/tool/imageeditor.html
ブラウザ上で動作する無料の画像編集ツール。
インストール作業をすることなく、PCやスマートフォンで手軽に画像を加工することができます。
使用例：モザイクをかける場合
編集したい画像ファイルをドラッグ＆ドロップ。
モザイクのアイコンをクリック。
モザイクをかけたい範囲をドラッグして指定。
「モザイクをかける」ボタンをクリック。
編集が完了したら、「ファイル」→「保存」をクリック。編集後のファイルがダウンロードされます。
Pingや接続経路を調べるツール
InfoByIp.com
というサイト、日本語もあります。
https://ja.infobyip.com/internettools.php
サイトのマルウェア感染等がチェックできる無料サービス
セキュリティ企業Sucuriが運営している無料マルウェアチェックサイト
URLを入力すると
・マルウェアが潜んでないか
・使用しているアプリーションのバージョンチェック
・ブラックリストに載っていなか
などが簡易的にチェックできる。
画像イメージのサイズダウン（ImageOptim）
マック用の画像イメージのサイズダウンを行うソフト
ImageOptim（イメージオプティム）
圧縮設定は最初の画面下のアイコンで
非可逆圧縮を有効にするにチェック。
圧縮率を設定する（初期状態は80％）
サンプル jpeg 画像
人とバスを注意して見て
943KB 元
177KB 80％品質（問題なく使用可能）
93KB 40%品質（荒さが判断でき全体的に暗くなる）
実際の容量より1/10になったことを考えると素晴らしい。
サンプル png 画像
右の白いっぽい葉を注意して見て
1500KB 元
266KB 80％品質（問題なく使用可能）
180KB 40%（荒さが判断できる）
同じ系統の色なので比較的使える
マックバージョン：MacOS10.14.3
レスポンシブサイトでイメージマップ（クリッカブルマップ）を設置する方法
1つの画像に複数のリンクを設置したいときに便利なイメージマップですが、レスポンシブサイトだと表示サイズによって1つのリンクしか反応しなくなります。
これはイメージマップの範囲がレスポンシブのように拡大縮小しないから。
レスポンシブサイトでイメージマップを利用したいときは「jQuery RWD Image Maps」というプラグインが便利です。
これでイメージマップの範囲も画像に合わせて拡大縮小します。
https://github.com/stowball/jQuery-rwdImageMaps
プラグインの読み込みとスクリプトの記述は下記。
━━━━━━━━━━━━━━━━━━━━
<script type=”text/javascript” src=”js/jquery.rwdImageMaps.min.js”></script>
<script type=”text/javascript”>$(‘img[usemap]’).rwdImageMaps();</script>
━━━━━━━━━━━━━━━━━━━━
また、イメージマップのコード生成には「HTML Imagemap Generator」が便利
http://labs.d-s-b.jp/ImagemapGenerator/
まずは画像をドラッグして読み込み
四角形・円形・多角形を選択し領域を作成します
※この記事は2018年12月現在の内容です。リンク先のドメイン変更やサイト構成変更によってリンク切れになる場合もあります。ご了承ください。