あやつき＠iTMSJ.Info

'95年から Web を作ってる、インターネット老人会なヒトです。 基本的には、TwitterとFacebookで活動してます。note 読む用と思ってたけど、個人的発信はココでやろうかと。個人仕事関連は、別垢を開けてあります。そのうち宣伝するかも。

あやつき＠iTMSJ.Info

'95年から Web を作ってる、インターネット老人会なヒトです。 基本的には、TwitterとFacebookで活動してます。note 読む用と思ってたけど、個人的発信はココでやろうかと。個人仕事関連は、別垢を開けてあります。そのうち宣伝するかも。

  • Web Tips 25年史＋

    検索して探してきても、そのまま使えるモノが少ない、CSS, JavaScript たち。 実際カスタマイズしてきた例を、Tips 集にしてみようか、と考えてみる。 どなたかのお役に立てばヨシ。立ってないなら、自分のメモとして。 今後、一部を有料化することも、少し考えていきます。 というのは、Web 周りのセミナーを担当をしていて、有料講座において、ココで出していっているような内容を話しています。 ので、有料版でまとめるのを別マガジンにするか、記事ごとに有料化するか、少し考えながら構築していきますが、引き続きよろしくお願いいたします。

  • 固定された記事

Web系人材募集企業および、Web系スクールに物申す

なぜか、面接やってます 中途採用とはいえ、4月入社なのに、5月から採用面接までやっています… どーなの、弊社。。。😱　Web 担当者、3名体制になります、って入ったのに、5月に課長、10月にもう1名、既存社員が居なくなる、って、どーゆー？ ヲレ入ってなかったら、担当者居なくなってるで？　何なん？ ってことは、また別に書くとして…。 5月からの期間は、中途経験者募集をしていたので、それほど不足になるような能力な人は居なく、むしろ今はオーバースペックだゎ、という方がいらっしゃ

あやつき＠iTMSJ.…

    • 目標であり夢であることを追ってきた。

      お１人に対して、２つの「想像していなかった」ことを経験した。 かれこれ、35年越え（小６以来）でファンをしている、ボーカリスト HK さんが居る。「推し」なんて言葉は無かった当時。 ※中学時代は、故あって、抹消した過去なのでカットするが…ファンなり始めて4年も経ったころから。。。 どこにでも居る、ファンだったあの頃。 大阪南部のド田舎高校生は、年にアルバム２枚、シングル４枚、ぐらいが出されると、それを買うことで、年間こづかいの８割がたが消費されるくらいだった。 ライブ

      あやつき＠iTMSJ.…

      • クズなバルクメールを排除する。

        株式会社テスト　としている、フォームアタックが頻発しだした。 こういうクズは、排除する。 プログラムがいぢれるなら、内部に記述した方が良いのはわかりきっているが、それを適用するまでに、時間がかかるので、HTML 上で何とかならんか探してみた。 form タグが拡張されていて、input の pattern 属性に、JS を記述することで拒否る文字列を設定できるらしい。 さて、あとは、これを詳しく書いてしまうと、このクズ野郎どもにヒントを与えることになるから、一旦置いてお

        あやつき＠iTMSJ.…

        • 年齢表示自働化 JS

          １年前ぐらいに、現在の年を表記する、って JS を出していたかと。 コレの派生で、年齢表示もありがち。 カッコで、（取材当時）とか、（2023年現在）とか書いて、放置するページが多いのは、いつまで紙やと思ってるねん？　って、Web 側から見たら、何をホザいてるのかと。。。 というわけで、対象者の、誕生日から自動的に、そのページが存在する限り年齢を更新してやろーでゎないか。 HTML 側 （<span id="nowAge">歳</span>） JS 側 <scri

          あやつき＠iTMSJ.…
        • 固定された記事

        Web系人材募集企業および、Web系スクールに物申す

        あやつき＠iTMSJ.Info

        マガジン

        • Web Tips 25年史＋
          32本

        記事

          Window リサイズ時にリロードさせる

          方法１.resize() によって、現在の URL でリロードする（ location.reload() ） $(window).resize(function() {location.reload();}); これだと、ウィンドウを動かしている間中、リアルタイムにリロードが発動するので、ウィンドウサイズが固定されない環境（PC 利用など）には、不適切。 コレでとりあえずしのぎたい、というのは、スマホ専用サイトである場合のみ、かな。 方法２var timer = fal

          あやつき＠iTMSJ.…

          Window リサイズ時にリロードさせる

          あやつき＠iTMSJ.Info

          font-family いろいろ

          Windows, Mac, Android, iOS, それぞれで、効く / 効かない　とか、そこそこ面倒。 比較的、有望ゴシック font-family: 'Roboto','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','YuGothic','Yu Gothic Medium','Meiryo','MS PGothic',sans-serif; 英数フォントを考えないのであれば、先頭5フォン

          あやつき＠iTMSJ.…

          font-family いろいろ

          あやつき＠iTMSJ.Info

          画像一覧表示系

          昔で言うところの、画像ギャラリー（？）にしたい、という要望が未だにあったり。 または、過去のギャラリーとしているものを見返すと、まぁまぁな量の画像が載っていたり。 で、相変わらずな、低レベルソースコード（やんわり書けなかった…ｸｿコードとか書きかけた）なものが散見される。＜あくまでも過去の更新者に対して。 li で並べて、flex で自動的に流していく、まではまぁ良かろう。 ※ちょい前の案件だと、float してて、ドツキ回したろか、とか思った。 なぜ、全部 HTML

          ¥500
          あやつき＠iTMSJ.…

          画像一覧表示系

          ¥500
          あやつき＠iTMSJ.Info

          パンくず表示を、何とかしよう

          CMS 構成していたモノから、静的移行したサイトに多く見られる、全ページ『何でもかんでもパンくず設置』の設定。 たいていが、ページタイトルと同じ文字列が入る＝h1 のテキスト、となる場合が多いと思われる。 お知らせなど、詳細ページを、複製して作っていくと、title タグ, パンくず, h1 など複数箇所を置換して、という無駄な作業が発生する。設置例）https://kyoto-triathlon.jp/news/2023/20230703.html title は、ペ

          あやつき＠iTMSJ.…

          パンくず表示を、何とかしよう

          あやつき＠iTMSJ.Info

          公開自体が無いのか

          プライベート、と、非公開 は、同じ機能なの？ というか、記事には、プライベートが存在しないのか…。よくわからん仕様だ。

          あやつき＠iTMSJ.…

          公開自体が無いのか

          あやつき＠iTMSJ.Info

          ブラウザ側での、文字コード変更

          過去には、ブラウザ機能として、ページの文字コードが存在したが、昨今 UTF-8 でしか書かんだろう、的な状況から、その機能が消されている傾向が多い。 Chrome では、拡張機能で、対応可能となっている 「Charset」https://chrome.google.com/webstore/detail/charset/oenllhgkiiljibhfagbfogdbchhdchml?hl=ja 拡張機能をインストールし、Charset のアイコンをクリックすると、変更

          あやつき＠iTMSJ.…

          ブラウザ側での、文字コード変更

          あやつき＠iTMSJ.Info

          テストサイトのみ URL を変更したい

          本番 URL が、ドメインを持っているサイトを、同時にテストする場合、テストサイトの URL を記述していると、当然本番時に書き換えが発生し、テストの意味が無くなる。 テストサイトに設置した場合のみ、href が書き換わるようにしたい。 結論を先に if(document.URL.match(/localhost/)) {//Local $('li>a').each(function(){ var chg = $(this).attr('href').replace(

          あやつき＠iTMSJ.…

          テストサイトのみ URL を変更したい

          あやつき＠iTMSJ.Info

          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 を直接コード化したい時↑↑size で、画像サイズ設定、data に URL でペー

          あやつき＠iTMSJ.…

          QRコード，短縮 URL の活用

          あやつき＠iTMSJ.Info

          ページ単位の死活管理

          かつては、サーバの不安定・CMS 系のプログラム不具合等で、ページが見られなくなってしまっているのを感知したい、ということが多かったが、昨今は、サイトハッキング等で、ページに異常が無いかを確認するツールとして機能するようになってきている。 ざっと探した中では、無料での登録数や、ドメイン・SSL の更新期限にも対応しているという点から、 Appmill というサイトが、現時点では手軽に利用できる。

          あやつき＠iTMSJ.…

          ページ単位の死活管理

          あやつき＠iTMSJ.Info

          動画フォーマットの変換

          変換ツール・HandBrake；https://handbrake.fr/ ※そのまま英語読みなら、ハンドブレーキ。日本語版だと、なぜか、ハンドブレイクと書かれている。ブレイク、だと、綴り違うよね。。。 個人的には、コレ一択です。バージョン 0.2 ぐらいから使ってます。 元々が Unix 用で、MacOSX 初代の時期から開発しているオープンソースソフト。現在は Windows 版も同じバージョンで、アップデートされているので、いづれの環境でも使えます。 Window

          あやつき＠iTMSJ.…

          動画フォーマットの変換

          あやつき＠iTMSJ.Info

          噂の ChatGPT を試す

          フリーで使える、とは言え、登録は必要。 https://chat.openai.com/    から、まずはメールアドレス登録と、携帯電話番号で SMS 認証します。 サインアップは、メールアドレス・Google アカウント・マイクロソフト アカウントの3種類から選択。 ログインできれば、左上に「 New Chat」となっていて、右側下部に「Send a message」となっている入力エリアがあるので、適当に文章でも口語でも、入力。 試している人の、ほとんどが「正しい

          あやつき＠iTMSJ.…

          噂の ChatGPT を試す

          あやつき＠iTMSJ.Info

          過去制作サイト・途中参加更新案件での注意点

          ・JS の使い方作った時期？　作った人？　で設置がバラバラ。 MT で搭載するから、と、head 内に、直書きで全部記述してあるパターンも多い。そんなサイトが、MT やめる、と、静的ページに戻してきたら、何十ページに渡って、同じスクリプトが存在していることになるため、メンテナンス上都合が悪いことが多そう。 ・見つけた、注意すべきスクリプトプログラム 　ページ内のスムーズスクロール。名称が似ているが別モノなので、オプションや設置 class が違う。 　○smoothScro

          あやつき＠iTMSJ.…

          過去制作サイト・途中参加更新案件での注意点

          あやつき＠iTMSJ.Info