Memo

タグ「javascript」[4件]
>>252の続き。
BingAIに助けてもらってさらに追加したサイトの機能の覚え書き
  • gifアニメーションには自動で再生ボタンを付ける(giffferを使用する)
  • リンク先が外部サイトなら別タブで開く(別ホストのリンクには自動でtarget="_blank"とrel="noopener noreferrer"を追加、※推奨設定らしい)
  • 外部リンクにはリンク文字列の末尾にアイコンフォントを自動付与する
  • てがろぐの個別投稿でリストアイコンを任意に指定した場合はてがろぐスキン側で設定されているリストアイコンを非表示にする(使っているスキンが疑似要素::beforeでリストアイコンを設定しているのでそのままでは上書きされないため)
  • img要素にwidthとheightを自動で設定する
  • てがろぐの特定のスキンでは出力するURLに自動的に&order=reverseを付与する

増えたらここに追記予定。

もし〇〇なら自動でこうしたい…!というニーズが結構あったので、その辺がjavascriptなどを使うことでスパスパと解決していくのが気持ちいいです。
CSSも複雑なセレクタは自分では指定できないので助かります。

#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #てがろぐ
>>250の続き。

BingAIの力を借りて、Galleryのサイドバーでカテゴリ名をクリックすると、その場所までスクロールしつつ、同時に折り畳みをオープンする仕様にしてみました。例によってPCのみ。
20230512012558-admin.gif
▲gif動きます。ちょっとわかりづらいかも。

今までは折りたたみのオープンは手動だったので、閉じた状態ではサイドバーは完全に無意味なものだったんですが、これでかなり直感的になったと思います。
先のまとめて開閉ボタンとあわせてポチポチ押すだけでたのしい。

BingAIとの会話のコツもだいぶわかってきて、小回りが利くようになってきました。

なんかもうちゃんとjavascript覚えてブラウザゲームとかWebアプリケーションとか作りたくなってきました。

続き>>254

#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #やりたいこと
AIと少し仲良くなってみた

前から気になっていたギャラリーの折り畳み開閉ボタンのデザインと挙動について。
202305120136231-admin.gif
▲gif動きます

これを、1つのボタンで開閉できる仕様にしたいと思っていました。
javascriptを使えば実現できそうなのはわかったのですが、ぐぐってもそのものズバリのコードはわからず、いつものコピペ戦法は通用せず。

ゼロからjavascriptを体系的に学ぶのはいつかやりたいけど、今はそういう気分じゃなく。

そういえば、こういう時のAIだなと思い出し、助けを乞うことに。
ChatGPTはよくわからなかったので、登録不要で使えるBing AIに聞いてみました。

line

試行錯誤の結果、こんな感じで質問してみたら目当てのコードを教えてもらえました。
202305111543061-admin.png
▲「1つの」ボタンと言わないと意図が通じないようで、バラバラに独立したボタンを勧めてきます。
20230511154306-admin.png
▲fontawesomeを使いたいことを明示しないと、innerHTMLではなくtextContentを勧めてくるのでアイコンフォントが使えません。

質問の仕方に少しコツがいりますが、ここまでほぼそのままちゃんと使えるコードを出してくれたことには驚きました。
しつこいくらい細かく指示してあげないと、知識のない素人がそのまま使えるようなコードにはならないですが。
現状、検索エンジンより多少あいまいに検索できるくらいの使用感かなぁと思いました。(それでも物凄い助かりました。ぐぐるだけじゃ絶対こんなすぐに実装できなかったので)

人間との会話と違って、向こうから「それはこういうことですか?」と汲み取るような質問返しをしてくれないので、こっち側に多少の知識がないと会話にならないのかなと思いました。
あと、相手が人間だったら、絵や図を描いて説明することができるので、それができないAIに対して、知識がなくふわっと浮かんでるだけのやりたいことを全部文字にして説明するのも結構大変な気がしました。
逆に言うとそれができるようになったらマジで下手な人間のオペレーターよりよっぽど優秀ですね…。

引き合いに出して申し訳ないけどロリポップのAIアシスタントは凄く期待した割に思ってたものと全然違ってガッカリしたのでこれは嬉しい驚き。

最終的に出来上がった開閉ボタンはこんな感じ。
20230512013623-admin.gif
▲gif動きます

狙い通りの挙動をしてくれて大満足です!!
なおトグルボタンのサイドバー常駐はPCのみで、液晶の小さい端末では本文内に設置しています。

続き>>252
 


#AI #手打ちサイト #カスタマイズ #javascript #備忘録
【脱WordPress】ヘッドレスCMSとJamstackに興味を持ったようです

今のサイトのWordpress用自作テーマを作るのに2週間くらいかけて作りこんだんですが、それが完成してしまったことで、毎日楽しく熱中して情熱を注ぎこんでた対象がなくなってしまったために、燃え尽き症候群みたいになってしまって、まだ何かできることないかと悪あがきしてるのが今なのかなぁ、と思います。

でも自画自賛するわけじゃないですけど、今のデザインとUIは今の自分にとっては最適解みたいで、これ以上何かやろうとしても蛇足感しかないんですよね。
トップページはもう少し簡素にしてもいいかな?とも思いますが、それも蛇足になるのが直感的にわかる気がしてます。
洗練されてればいいってものではないというか。
(一応、トップページだけを流し見すれば全部の主要コンテンツと主要な更新をざっと見ることができるというコンセプトで作りました。重かったら申し訳ない。)

なんかこう、どんなジャンルのものでも「リニューアルしてオシャレにはなったけど前の方が好きだった」みたいなものってあるじゃないですか。
自分の感覚では、その”前の方”の状態にできたのが今の自作テーマなのです。
主に中の人の好みを隠しきれてない点や、いい感じにごちゃっとしている点で。(それでも一応情報の整理とレスポンシブ対応で見やすさにもこだわったつもりです。)

多分これだけの集中力と情熱をもってサイトのガワ部分を作るのはもうしばらく無理と思うので、余計な事しない方がよさそうです。

ただ、脱Wordpressしたい流れでヘッドレスCMSとJamstackに興味を持ってしまったので裏でこそこそ勉強中です、、。
エンジニアでもないのにこんなんやって時間の無駄のような気もしてますが、なんかキーボードカタカタしてないと落ち着かないのです。
このサイトをヘッドレスCMS化するかは未定…というかするとしても1年以上は先になると思います。圧倒的にスキル不足だからです。どうみてもオーバーテクノロジーです。
ヘッドレスCMS化すれば表示速度とセキュリティ面が劇的に改善されそうですが、更新が簡単になるかというと真逆の方向に行ってる気が…。

そもそもJamstackで作ったサイトってスマホやタブレットから更新できるんでしょうか…?

プロの間ではWordpressはもう古い、時代はJamstackだ!ってなってるようですが、本当にJamstackがWordpress並みのメインストリームになるなら一般人にも扱えるようなサービスが絶対に出てくると思うので、私が今勉強してるのは本当にただの好奇心と自己満足でしかないです。
最初の話に戻るけど「次にやること」が欲しかっただけ。

ヘッドレスCMSとJamstackについて知れば知るほど『WordPressって初心者~物足りなくなった中級者~ガッツリいじれる本職までみんながそれぞれのステージで便利に使える完成度高いシステムなんだなぁ』と感心してしまいましたよ。

わからないこともググれば高確率ですぐ解決するし。

そりゃ覇権も取るわけだ。


#wordpress #自作テーマ #javascript