マガジン
Web Tips 25年史＋
あやつき＠iTMSJ.Info
- 24本
検索して探してきても、そのまま使えるモノが少ない、CSS, JavaScript たち。 実際カスタマイズしてきた例を、Tips 集にしてみようか、と考えてみる。 どなたかのお役に立てばヨシ。立ってないなら、自分のメモとして。
記事一覧
QRコード，短縮 URL の活用
作れば良い、だけなら、今は各所サービスがあります。 【QR作成】・https://qr.quel.jp/ ・https://www.cman.jp/QRcode/ ・https://api.qrserver.com/v1/create-qr-co…
クズなバルクメールを排除する。
株式会社テスト としている、フォームアタックが頻発しだした。
こういうクズは、排除する。
プログラムがいぢれるなら、内部に記述した方が良いのはわかりきっているが、それを適用するまでに、時間がかかるので、HTML 上で何とかならんか探してみた。
form タグが拡張されていて、input の pattern 属性に、JS を記述することで拒否る文字列を設定できるらしい。
さて、あとは、これを詳
年齢表示自働化 JS
１年前ぐらいに、現在の年を表記する、って JS を出していたかと。
コレの派生で、年齢表示もありがち。
カッコで、（取材当時）とか、（2023年現在）とか書いて、放置するページが多いのは、いつまで紙やと思ってるねん？ って、Web 側から見たら、何をホザいてるのかと。。。
というわけで、対象者の、誕生日から自動的に、そのページが存在する限り年齢を更新してやろーでゎないか。
HTML 側
（
Window リサイズ時にリロードさせる
方法１.resize() によって、現在の URL でリロードする（ location.reload() ）
$(window).resize(function() {location.reload();});
これだと、ウィンドウを動かしている間中、リアルタイムにリロードが発動するので、ウィンドウサイズが固定されない環境（PC 利用など）には、不適切。
コレでとりあえずしのぎたい、というのは
公開自体が無いのか
プライベート、と、非公開 は、同じ機能なの？
というか、記事には、プライベートが存在しないのか…。よくわからん仕様だ。
QRコード，短縮 URL の活用
作れば良い、だけなら、今は各所サービスがあります。
【QR作成】・https://qr.quel.jp/
・https://www.cman.jp/QRcode/
・https://api.qrserver.com/v1/create-qr-code/?size=500×500&data=https://note.com/itmsj/m/m36ea939e2d48
※ただただ、URL を直
過去制作サイト・途中参加更新案件での注意点
・JS の使い方作った時期？ 作った人？ で設置がバラバラ。
MT で搭載するから、と、head 内に、直書きで全部記述してあるパターンも多い。そんなサイトが、MT やめる、と、静的ページに戻してきたら、何十ページに渡って、同じスクリプトが存在していることになるため、メンテナンス上都合が悪いことが多そう。
・見つけた、注意すべきスクリプトプログラム
ページ内のスムーズスクロール。名称が似ている
【Web外】資料作成サポート
要望；ブラウザ全ページ＞A4 複数ページで見られるようにしたい
途中途切れでなく、項目等適度な切れ目に
１）ブラウザで、ページ全体キャプチャを、Chrome プラグイン等、適当におこなう。
PNG 出力が、拡大しない画面幅なら綺麗にキャプチャできていそう。
２）Photoshop 等画像エディタ～Word等～PDF 保存。
Web担当などであれば、Photoshop あると思う
残存確率の高い、修正必須記述
jQuery 2系以降で発生する、jQuery 1系でしか通用しない記述、が、結構な確率で残っている可能性。
MT 案件などで、読み込みファイルに残っている、などが多そう。
参考）https://xov.jp/e/796/
存在する場所；スムーズスクロールの設定
冒頭「#」に対しての function 設定。正解というか、1系以外でも動作させるには
$('a[href^="#"]').clic
JavaScript で共通化パーツを構成
いよいよ、パーツ単位でどうこう、というレベルでは無くなってきました。
前職で、CMS 移行のために、CMS のみではできない部分を開発する、ということをやってきたことが、そのまま活きてくるとは。。。
フツーに考えても、10ページ以上で構成しているページ、ヘッダー・フッターとか、共通になる部分を、ページごとに直書きしてるのは、どう考えても無駄でしょ。
挙句に、そのメニューだの、追加とか修正するの、
そろそろ、サポート『業』になりそう
MacBook Pro をヤフオクで見繕って入手して、推しsan が持ってる iPad Pro と交換しました。
えぇ、たぶん、フツーには『ちょっと何言ってるのかわかんないです』案件かと。。。
ことの発端は、私の初代 iPad Pro のバッテリー交換（という名の本体交換）に行ったら、もぉ交換部品無くなってるので、無理、と言われてしまったこと。
そして、ここ２年ほどの（私にしては新しめの）推
replace いろいろ
テキストで書き換える
外部リンクに target を付与する
1) テキストで書き換える
<script><!--//<!-- class chk12 の内容を、テキストデータ「js_edit chk12」に置き換えるjQuery(document).ready(function() { jQuery('.chk12').text('js_edit chk12');//<!--
15年以上前の仕様 jQuery, JavaScript でマウスオーバ「しか」操作していないモノを駆逐せよ
現在の更新作業担当しているサイトで、「そんなにマウスオーバーに fade 付けたかったん？」という jQuery が、散見される（ゲンナリ）。
MIT やから使ったか知らんけど、2009年て。ヲマエ、2019年ぐらいに作ってんちゃうんけ、コレ…。ソース配布場所が、ドメインごと消えてるしな…。
という愚痴は置いといて。
今や、CSS『のみ』で余裕で置き換えられるので、とっとと jQuery 記述
共通パーツ読み込み（php）
主に、ヘッダー・フッターなど、共通部分の読み込みを、効率よく管理・更新したいために、パーツ化をおこないたい。
PHP での組み込みが理想ではあるが、どうしても PHP が使えない環境（イントラ内や、そもそも Windows Server で PHP を動かしていないサーバ）においては、jQuery版；https://note.com/itmsj/n/n5ba6113a4154 を参考にしていただけ
共通パーツ読み込み（jQuery）
コレも『読み込み元のページ１つを更新すれば、読み込み先ページの更新をしなくても良い』という更新の効率化と、複数箇所に、同じ修正をおこなう場合に発生する、修正漏れ・修正の確認工程の軽減を目的としている。
ココ＞（ https://dezanari.com/html-include/ ）とは、（勝手に）真っ向から対立させてもらう。HTML 直書きが、最も事故率が高く、非効率であるのは明白。ましてや、ヘ