タグ「備忘録」［17件］
ちょっぴりサイトメンテ
サイト改装しようと思ってたけど、今のデザインがやっぱりしっくりくるのでしばらくこれでいこうかなと思います。
デザイン性以外の部分で、改装時に直そうと思ってたところなどを手入れしました。
Memoの日付表示の復活
「こいつサイト更新しすぎだろ」と思われるのがなんか恥ずかしくて、Memoの各エントリーの日付を非表示にするというだいぶこじらせたことをしてましたが、やっぱり自分で過去記事読みなおす時とかに不便…というか風情の無さが気になったので、普通に日付表示をすることにしました。
自分のサイトを頻繁に更新するってなにも悪いことじゃないし、頻度も一つの生きた情報かなと。
ギャラリー少し整理
基本的には「サイトは自分データベース」という方針なので描いたものはすべてギャラリーにアーカイブしておくつもりだったんですが、ちょっと心境の変化があったのでそれに即した感じに整理しました。
今後も特に予告なくギャラリーは整理していくかもしれません。
一応すぐ戻せるようにはしてあるので、気が変わったら戻すかも。
ただ、アーカイブ性も担保したいという理由から、Memoには基本的にありのまますべて残します。
したがって、ギャラリー整理の対象はサイト作成以降のもののみで、古い絵はそのままです。古いものまで整理したら何も残らなさそうだったので…。
この方針にしたことで、Memoにはより実験的な絵も気楽に載せていけるようになったらいいなと踏んでます。
いいねボタンお試し実装
いいねボタン・改を実装してみました。
今のところ、お礼イラストもメッセージも何もありません。。
その代わりちょっとだけ可愛いことが起きます。
押下可能回数の上限を高めに設定したので、（人間だったら）実質ほぼ無限に押すことができます。
以前から何度か書いてると思うのですが私は「いいね」という概念が苦手なので、自分の中では「来たよ」ボタンとか「了解」ボタンくらいのつもりなのですが、サイトデザインに馴染ませる都合、ハートマークじゃないと何のボタンかわからなさすぎるのでとりあえずハートになりました。
諸事情であまりこまめに確認できないので、こちらからのリアクションとかも何もないと思いますが、押したいなと思った時に自由に押してくれたら嬉しいです。
エラーが出てしまうときや、押しても何も反応がない時はお手数ですがキャッシュクリアをしてみてください。
あくまでお試し設置なので、予告なく撤去する可能性があります。
その他書くほどでもない細かい調整
・持ち帰り用の旧バナーを撤去（既に使用中の場合はそのまま使っていただいて大丈夫です）
・スマホビューの時もMemoの上部に各種便利ボタンを表示（タブレットなどでは消えるor表示崩れの可能性あり）
・ほか、忘れるくらい細かいとこなど
#カスタマイズ #手打ちサイト #備忘録
- Memoの日付表示の復活
- ギャラリー少し整理
- いいねボタンお試し実装
- その他書くほどでもない細かい調整
サイト改装しようと思ってたけど、今のデザインがやっぱりしっくりくるのでしばらくこれでいこうかなと思います。
デザイン性以外の部分で、改装時に直そうと思ってたところなどを手入れしました。
Memoの日付表示の復活
「こいつサイト更新しすぎだろ」と思われるのがなんか恥ずかしくて、Memoの各エントリーの日付を非表示にするというだいぶこじらせたことをしてましたが、やっぱり自分で過去記事読みなおす時とかに不便…というか風情の無さが気になったので、普通に日付表示をすることにしました。
自分のサイトを頻繁に更新するってなにも悪いことじゃないし、頻度も一つの生きた情報かなと。
ギャラリー少し整理
基本的には「サイトは自分データベース」という方針なので描いたものはすべてギャラリーにアーカイブしておくつもりだったんですが、ちょっと心境の変化があったのでそれに即した感じに整理しました。
今後も特に予告なくギャラリーは整理していくかもしれません。
一応すぐ戻せるようにはしてあるので、気が変わったら戻すかも。
ただ、アーカイブ性も担保したいという理由から、Memoには基本的にありのまますべて残します。
したがって、ギャラリー整理の対象はサイト作成以降のもののみで、古い絵はそのままです。古いものまで整理したら何も残らなさそうだったので…。
この方針にしたことで、Memoにはより実験的な絵も気楽に載せていけるようになったらいいなと踏んでます。
いいねボタンお試し実装
いいねボタン・改を実装してみました。
今のところ、お礼イラストもメッセージも何もありません。。
その代わりちょっとだけ可愛いことが起きます。
押下可能回数の上限を高めに設定したので、（人間だったら）実質ほぼ無限に押すことができます。
以前から何度か書いてると思うのですが私は「いいね」という概念が苦手なので、自分の中では「来たよ」ボタンとか「了解」ボタンくらいのつもりなのですが、サイトデザインに馴染ませる都合、ハートマークじゃないと何のボタンかわからなさすぎるのでとりあえずハートになりました。
諸事情であまりこまめに確認できないので、こちらからのリアクションとかも何もないと思いますが、押したいなと思った時に自由に押してくれたら嬉しいです。
エラーが出てしまうときや、押しても何も反応がない時はお手数ですがキャッシュクリアをしてみてください。
あくまでお試し設置なので、予告なく撤去する可能性があります。
その他書くほどでもない細かい調整
・持ち帰り用の旧バナーを撤去（既に使用中の場合はそのまま使っていただいて大丈夫です）
・スマホビューの時もMemoの上部に各種便利ボタンを表示（タブレットなどでは消えるor表示崩れの可能性あり）
・ほか、忘れるくらい細かいとこなど
#カスタマイズ #手打ちサイト #備忘録
久々にちょびっとサイト（てがろぐ）いじりました。
↑の罫線の画像素材はFREE LINE DESIGN様からお借りしました。
近年は画像素材を使わないでCSSで装飾するサイトがトレンドのようでしたが、世の中全体の端末の性能もネット回線速度もぐっと底上げされていることですし、一周回ってまたこういう風に画像素材でサイトをデコレーションするのも良いかもしれないですね。
やっぱりサイトいじりは楽しい…！！！
#てがろぐ #カスタマイズ #備忘録 #手打ちサイト
- 「続きを読む」ボタンのデザイン調整 →小さいボタンだったものを幅広のボタンに
- 「続きを読む」ボタンで展開した文章をふわっと表示する
- カスタム絵文字機能を使って罫線を表示 →「－－－」などと記号で表記していたものを画像素材に置換
↑の罫線の画像素材はFREE LINE DESIGN様からお借りしました。
近年は画像素材を使わないでCSSで装飾するサイトがトレンドのようでしたが、世の中全体の端末の性能もネット回線速度もぐっと底上げされていることですし、一周回ってまたこういう風に画像素材でサイトをデコレーションするのも良いかもしれないですね。
やっぱりサイトいじりは楽しい…！！！
#てがろぐ #カスタマイズ #備忘録 #手打ちサイト
意地でも液晶を修理したくないからリモートデスクトップにした話
相変わらず図解センス皆無だけど、最終的にこんな感じに落ち着きました。想像以上に快適。
パソコンの液晶が壊れて、正式にメーカーに修理依頼してみたらやっぱり保証適用対象外で有償修理でした。
で、その見積が安くて６万、高くて１０万と言われてしまい絶望。
このパソコン９万で買ったんですが…。
前も言ったように私にとってパソコンって、ないと非常に困るけど絶対に必要かと言われると今やそうでもない（仕事で使うとかじゃないので）という立ち位置のものなので、修理代として６万↑というのは絶妙～に払いたくない金額なのです。（３万くらいがボーダーかなぁ。）
なので、何か良い方法はないかなぁと模索してみたメモです。
まずは状況整理
私にとってのPCの必要性を改めて整理して考えてみます。
PCじゃないとできないこと
このへんは案外スッパリ諦められなくもないのだけど…
iPadでもできるけどやりづらくて効率ガタ落ちすること
むしろこの領域のストレスが我慢ならないからできる限りPCを手放したくないという状況です。
iPadでも問題なくできること
ここから状況を打破していくにあたり…
手持ちの使えそうなガジェット
・WinPC（液晶割れしたラップトップ、他は正常） ※今回の元凶
・10.2インチiPad（お絵描き、ネットサーフィン用）
・15.6インチのモバイルモニター
・外付キーボード
・外付マウス
まずは普通の方法で…
外部モニタ（15.6インチのモバイルモニター）あるんだからそれを液晶代わりにすれば解決…と思ったけど、これはもともとゴロ寝してSwitchのゲームする用に買った安物なので、色味が美しくなさすぎて耐えられなかった。
じゃあ高いモニター買えばいいという話になるけど、だったら素直に本体の液晶を修理すれば良くない…？！という結論になるので良くない。そもそも有線接続なのもなんかイヤ。
ぶっちゃけそんなに致命的な割れ方でもないので画面割れしたまま使うのが一番いいんだろうけど、妙なところ神経質なので割れた画面を見るのが耐えられないのでそれは避けたい…。（前も言ったように原因は自分の不注意による過失なので、見るたびに自分のバカさを突き付けられる感じもしんどい。）
iPadいけそうじゃない？
そういえばiPadのモニターはRetinaディスプレイで綺麗だし、これを外部モニターみたいに使えたらよくない？と思い至る。
調べていくうちに「iPadをリモートデスクトップ化する」という方法があることを知りました。
いくつかリモートデスクトップアプリを試してみてよかったのが以下の２つ。
「Splashtop」
よかった点
いまいちな点
「duet display」
よかった点
いまいちな点
有料であることに納得感はあるのでいまいちな点とするのはちょっと違う気もするけど、一応デメリットなので書いておいた。
液晶修理代の6万に届くまでに8～9年かかると考えれば十分安い。なんなら3～4万（ドルなので不確定）の買い切りプランもある。
というか年額7000円のアプリと張り合えるsplashtopの無料プランがすごすぎる。
私の場合はイラストを扱うから色味の再現重視なのと、10.2インチiPadのただでさえ小画面がsplashtopではアスペクト比不一致の黒帯により極狭になるのが耐えられなかったのでduetの有料プランを選びましたが、iPadProとか大きい画面の端末なら黒帯が入っても耐えられそうだしsplashtopでも十分行けそう。
リモートでも想像以上に快適だった
最後のあがき＆お遊びのつもりでやってみたら想像よりはるかに快適＆実用的で驚きました。
もっと無理やり感が出るかなぁと思ってたけどそんなことなかった。
少なくとも今のPCが本当に内側から壊れてしまうまではこれで全然いいなぁと思える感じ。
最初のディスプレイやスリープまわりの設定もろもろこそ苦戦したものの、一度ちょうどいい設定に落ち着いてしまえば本当に快適。
むしろiPadがリモートPCになってくれたおかげで寝ながらタッチ操作でPCいじったり、逆にリモートでPCいじってる最中にiPadがいじりたくなったときにも同じ画面から手元で一瞬で切り替えられるのが便利すぎて、今までより快適になった節すらある。
配線ないから机の上もスッキリするし。
このブログも久々に4000文字近い文章を書きましたが、今までと変わらない快適さでリモートなのを忘れてたくらい。
このiPadはお試しで買ったものだったため容量も32GBしかない超エントリーモデルなのですが、リモートで使う分にはPC側の性能で動いてくれるようなのでまったくストレスがありません。
（iPadはストレージ容量が本体性能に影響するっぽいです。よく知らんけど）
たださすがに10.2インチ画面は小さすぎるので、いずれ出ると言われている14インチ級のiPadに買い替えたいと思いました。
今のiPadは絵を描くにも結構ギリギリのスペックだったので、前からProがずっとほしかったものの持て余す気もして見送ってましたが、リモートPCとしても使えるなら買う踏ん切りがつきました。
そしてApple製品って頑丈でいいなぁ。
今のiPadも4年目だけど一点の曇りなく完全に健康、iPhoneに至っては四捨五入したら10年近く無修理で使ってるし。
（価格に転嫁されてるだけとはいえ）サポートも温かくて柔軟な対応だし、ビッグウェーブに乗るしかない人の気持ちがちょっとわかってきました。
Magic Keyboardは買うな
そんなApple信者なりかけの私が「iPadで使うならMagic Keyboardでしょ！」と思い買ってみたものの、リモートデスクトップには全く適さない。
マルチペアリングできないとかナメてんのかと。
キーボードの配列もMac用だし、素直にWindows用の使いなれたキーボードを使った方がいい。
買っちゃったものは仕方ないので、ちょっとした時のiPad専用キーボードとしてリビングの隅で待機させてます。
それでも不便な部分
そんなこんなで思った以上にリモートで不満がなくてびっくりしたものの、PCの再起動時やフリーズ時なんかは本体開いて対処しないとどうにもならないですね。
たまのこととはいえ、重くてデカいノートなのでかなり億劫です。
とりあえず割れてる画面に触るのは危ないので保護シートを貼りました。
またリモートデスクトップアプリの起動だけではPCのスリープ解除してくれないので、あらかじめ別の方法（マウスやキーボード入力など）でPCをアクティブ状態にしておく必要があります。これは慣れれば大した手間ではないかな。
（PCを遠隔起動できるWake on LANという方法があるみたいですが、ここまでいくと完全に私の理解のキャパオーバーしてるので見なかったことにします。）
あとPC側で音を出してiPad（リモート）で再生ってのはできなさそうな感じ。（それっぽい設定はあるけど…）
私の場合ここは殆ど問題にならないです。PCで音を出すことがめったにないし、あってもbluetoothイヤホンで聴くので。
次もPCを買うことがあるかわからないけど、あるならばその時はデスクトップにしようかな…。
これまでン10年PC使ってきましたが、持ち運んで使うことまずないし、一か所壊れた時に全体に影響が及ぶのはなかなかきついです。
多分このPCが内部的に自然故障しても、液晶割れを理由に無償修理はしてもらえないだろうし。
これでもう割れた画面を見なくて済む…
#パソコン #iPad #備忘録
相変わらず図解センス皆無だけど、最終的にこんな感じに落ち着きました。想像以上に快適。
パソコンの液晶が壊れて、正式にメーカーに修理依頼してみたらやっぱり保証適用対象外で有償修理でした。
で、その見積が安くて６万、高くて１０万と言われてしまい絶望。
このパソコン９万で買ったんですが…。
前も言ったように私にとってパソコンって、ないと非常に困るけど絶対に必要かと言われると今やそうでもない（仕事で使うとかじゃないので）という立ち位置のものなので、修理代として６万↑というのは絶妙～に払いたくない金額なのです。（３万くらいがボーダーかなぁ。）
なので、何か良い方法はないかなぁと模索してみたメモです。
まずは状況整理
私にとってのPCの必要性を改めて整理して考えてみます。
PCじゃないとできないこと
- 画像やファイルの整理・一括処理など（フォルダ管理）
- Photoshopの利用（大昔の買い切り版を大事に使ってる）
- PCゲーム（最近はほぼやってない）
- 昔作ったローカルサイトの閲覧
このへんは案外スッパリ諦められなくもないのだけど…
iPadでもできるけどやりづらくて効率ガタ落ちすること
- サイトのメンテ（FTPソフト）
- サイトの改修（テキストエディタ）
- ３行以上の文章を書く（ブログはもちろんのこと、個人的なメモや日記なども含）
- 画像のWebP化
- 画像に透かしを入れる
- 画像の余計な付帯情報の削除
- 画像のリサイズや軽量化
- Excelとかでちょっとした日常タスクの管理や計算など
- コーディング
- 使い慣れたキーボードショートカットが使えない
むしろこの領域のストレスが我慢ならないからできる限りPCを手放したくないという状況です。
iPadでも問題なくできること
- てがろぐの簡単な更新
- ネットサーフィン（もともとPCよりiPadメインだった）
- 絵を描く（むしろiPadじゃないと困る）
ここから状況を打破していくにあたり…
手持ちの使えそうなガジェット
・WinPC（液晶割れしたラップトップ、他は正常） ※今回の元凶
・10.2インチiPad（お絵描き、ネットサーフィン用）
・15.6インチのモバイルモニター
・外付キーボード
・外付マウス
まずは普通の方法で…
外部モニタ（15.6インチのモバイルモニター）あるんだからそれを液晶代わりにすれば解決…と思ったけど、これはもともとゴロ寝してSwitchのゲームする用に買った安物なので、色味が美しくなさすぎて耐えられなかった。
じゃあ高いモニター買えばいいという話になるけど、だったら素直に本体の液晶を修理すれば良くない…？！という結論になるので良くない。そもそも有線接続なのもなんかイヤ。
ぶっちゃけそんなに致命的な割れ方でもないので画面割れしたまま使うのが一番いいんだろうけど、妙なところ神経質なので割れた画面を見るのが耐えられないのでそれは避けたい…。（前も言ったように原因は自分の不注意による過失なので、見るたびに自分のバカさを突き付けられる感じもしんどい。）
iPadいけそうじゃない？
そういえばiPadのモニターはRetinaディスプレイで綺麗だし、これを外部モニターみたいに使えたらよくない？と思い至る。
調べていくうちに「iPadをリモートデスクトップ化する」という方法があることを知りました。
いくつかリモートデスクトップアプリを試してみてよかったのが以下の２つ。
「Splashtop」
よかった点
- 無料で無線接続できる。（別IPからの接続は有料だけど私は家でしか使わない）
- アプリの起動がサクサクで接続のレスポンスも良い
いまいちな点
- アスペクト比が合わない（iPadは4:3画面なので、16:9のPCと接続すると下に黒帯が入ってしまう）
- アスペクト比を4:3にすると解像度が低すぎる
- なんか色味が変（オーバーレイがかかったようなキツい色になる）
- iPadのスクリーンキーボードの一部が画面に残留して邪魔、入力エリアではWindowsのスクリーンキーボードと競合する
「duet display」
よかった点
- アスペクト比を自動で調整してくれる（ちょいちょい怪しい時あるけど）
- Retinaディスプレイ対応の超高解像度でとにかく綺麗。言われないとリモートだと一瞬わからないくらい鮮明
いまいちな点
- 無線接続は有料（年額7000円）
- アプリの起動～接続が遅め（接続してしまえばあとはサクサク）
- 画面にラグったようなジャギが発生しやすい（ネット環境次第？案外ストレスにはならない）
- 有線ならほぼラグなしだけどiPadの充電ができない
有料であることに納得感はあるのでいまいちな点とするのはちょっと違う気もするけど、一応デメリットなので書いておいた。
液晶修理代の6万に届くまでに8～9年かかると考えれば十分安い。なんなら3～4万（ドルなので不確定）の買い切りプランもある。
というか年額7000円のアプリと張り合えるsplashtopの無料プランがすごすぎる。
私の場合はイラストを扱うから色味の再現重視なのと、10.2インチiPadのただでさえ小画面がsplashtopではアスペクト比不一致の黒帯により極狭になるのが耐えられなかったのでduetの有料プランを選びましたが、iPadProとか大きい画面の端末なら黒帯が入っても耐えられそうだしsplashtopでも十分行けそう。
リモートでも想像以上に快適だった
最後のあがき＆お遊びのつもりでやってみたら想像よりはるかに快適＆実用的で驚きました。
もっと無理やり感が出るかなぁと思ってたけどそんなことなかった。
少なくとも今のPCが本当に内側から壊れてしまうまではこれで全然いいなぁと思える感じ。
最初のディスプレイやスリープまわりの設定もろもろこそ苦戦したものの、一度ちょうどいい設定に落ち着いてしまえば本当に快適。
むしろiPadがリモートPCになってくれたおかげで寝ながらタッチ操作でPCいじったり、逆にリモートでPCいじってる最中にiPadがいじりたくなったときにも同じ画面から手元で一瞬で切り替えられるのが便利すぎて、今までより快適になった節すらある。
配線ないから机の上もスッキリするし。
このブログも久々に4000文字近い文章を書きましたが、今までと変わらない快適さでリモートなのを忘れてたくらい。
このiPadはお試しで買ったものだったため容量も32GBしかない超エントリーモデルなのですが、リモートで使う分にはPC側の性能で動いてくれるようなのでまったくストレスがありません。
（iPadはストレージ容量が本体性能に影響するっぽいです。よく知らんけど）
たださすがに10.2インチ画面は小さすぎるので、いずれ出ると言われている14インチ級のiPadに買い替えたいと思いました。
今のiPadは絵を描くにも結構ギリギリのスペックだったので、前からProがずっとほしかったものの持て余す気もして見送ってましたが、リモートPCとしても使えるなら買う踏ん切りがつきました。
そしてApple製品って頑丈でいいなぁ。
今のiPadも4年目だけど一点の曇りなく完全に健康、iPhoneに至っては四捨五入したら10年近く無修理で使ってるし。
（価格に転嫁されてるだけとはいえ）サポートも温かくて柔軟な対応だし、ビッグウェーブに乗るしかない人の気持ちがちょっとわかってきました。
Magic Keyboardは買うな
そんなApple信者なりかけの私が「iPadで使うならMagic Keyboardでしょ！」と思い買ってみたものの、リモートデスクトップには全く適さない。
マルチペアリングできないとかナメてんのかと。
キーボードの配列もMac用だし、素直にWindows用の使いなれたキーボードを使った方がいい。
買っちゃったものは仕方ないので、ちょっとした時のiPad専用キーボードとしてリビングの隅で待機させてます。
それでも不便な部分
そんなこんなで思った以上にリモートで不満がなくてびっくりしたものの、PCの再起動時やフリーズ時なんかは本体開いて対処しないとどうにもならないですね。
たまのこととはいえ、重くてデカいノートなのでかなり億劫です。
とりあえず割れてる画面に触るのは危ないので保護シートを貼りました。
またリモートデスクトップアプリの起動だけではPCのスリープ解除してくれないので、あらかじめ別の方法（マウスやキーボード入力など）でPCをアクティブ状態にしておく必要があります。これは慣れれば大した手間ではないかな。
（PCを遠隔起動できるWake on LANという方法があるみたいですが、ここまでいくと完全に私の理解のキャパオーバーしてるので見なかったことにします。）
あとPC側で音を出してiPad（リモート）で再生ってのはできなさそうな感じ。（それっぽい設定はあるけど…）
私の場合ここは殆ど問題にならないです。PCで音を出すことがめったにないし、あってもbluetoothイヤホンで聴くので。
次もPCを買うことがあるかわからないけど、あるならばその時はデスクトップにしようかな…。
これまでン10年PC使ってきましたが、持ち運んで使うことまずないし、一か所壊れた時に全体に影響が及ぶのはなかなかきついです。
多分このPCが内部的に自然故障しても、液晶割れを理由に無償修理はしてもらえないだろうし。
これでもう割れた画面を見なくて済む…
#パソコン #iPad #備忘録
>>252の続き。
BingAIに助けてもらってさらに追加したサイトの機能の覚え書き
増えたらここに追記予定。
もし〇〇なら自動でこうしたい…！というニーズが結構あったので、その辺がjavascriptなどを使うことでスパスパと解決していくのが気持ちいいです。
CSSも複雑なセレクタは自分では指定できないので助かります。
#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #てがろぐ
BingAIに助けてもらってさらに追加したサイトの機能の覚え書き
- gifアニメーションには自動で再生ボタンを付ける（giffferを使用する）
- リンク先が外部サイトなら別タブで開く（別ホストのリンクには自動でtarget="_blank"とrel="noopener noreferrer"を追加、※推奨設定らしい）
- 外部リンクにはリンク文字列の末尾にアイコンフォントを自動付与する
- てがろぐの個別投稿でリストアイコンを任意に指定した場合はてがろぐスキン側で設定されているリストアイコンを非表示にする（使っているスキンが疑似要素::beforeでリストアイコンを設定しているのでそのままでは上書きされないため）
- img要素にwidthとheightを自動で設定する
- てがろぐの特定のスキンでは出力するURLに自動的に&order=reverseを付与する
増えたらここに追記予定。
もし〇〇なら自動でこうしたい…！というニーズが結構あったので、その辺がjavascriptなどを使うことでスパスパと解決していくのが気持ちいいです。
CSSも複雑なセレクタは自分では指定できないので助かります。
#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #てがろぐ
>>250の続き。
BingAIの力を借りて、Galleryのサイドバーでカテゴリ名をクリックすると、その場所までスクロールしつつ、同時に折り畳みをオープンする仕様にしてみました。例によってPCのみ。
▲gif動きます。ちょっとわかりづらいかも。
今までは折りたたみのオープンは手動だったので、閉じた状態ではサイドバーは完全に無意味なものだったんですが、これでかなり直感的になったと思います。
先のまとめて開閉ボタンとあわせてポチポチ押すだけでたのしい。
BingAIとの会話のコツもだいぶわかってきて、小回りが利くようになってきました。
なんかもうちゃんとjavascript覚えてブラウザゲームとかWebアプリケーションとか作りたくなってきました。
続き>>254
#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #やりたいこと
BingAIの力を借りて、Galleryのサイドバーでカテゴリ名をクリックすると、その場所までスクロールしつつ、同時に折り畳みをオープンする仕様にしてみました。例によってPCのみ。
▲gif動きます。ちょっとわかりづらいかも。
今までは折りたたみのオープンは手動だったので、閉じた状態ではサイドバーは完全に無意味なものだったんですが、これでかなり直感的になったと思います。
先のまとめて開閉ボタンとあわせてポチポチ押すだけでたのしい。
BingAIとの会話のコツもだいぶわかってきて、小回りが利くようになってきました。
なんかもうちゃんとjavascript覚えてブラウザゲームとかWebアプリケーションとか作りたくなってきました。
続き>>254
#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #やりたいこと
AIと少し仲良くなってみた
前から気になっていたギャラリーの折り畳み開閉ボタンのデザインと挙動について。
▲gif動きます
これを、1つのボタンで開閉できる仕様にしたいと思っていました。
javascriptを使えば実現できそうなのはわかったのですが、ぐぐってもそのものズバリのコードはわからず、いつものコピペ戦法は通用せず。
ゼロからjavascriptを体系的に学ぶのはいつかやりたいけど、今はそういう気分じゃなく。
そういえば、こういう時のAIだなと思い出し、助けを乞うことに。
ChatGPTはよくわからなかったので、登録不要で使えるBing AIに聞いてみました。
試行錯誤の結果、こんな感じで質問してみたら目当てのコードを教えてもらえました。
▲「1つの」ボタンと言わないと意図が通じないようで、バラバラに独立したボタンを勧めてきます。
▲fontawesomeを使いたいことを明示しないと、innerHTMLではなくtextContentを勧めてくるのでアイコンフォントが使えません。
質問の仕方に少しコツがいりますが、ここまでほぼそのままちゃんと使えるコードを出してくれたことには驚きました。
しつこいくらい細かく指示してあげないと、知識のない素人がそのまま使えるようなコードにはならないですが。
現状、検索エンジンより多少あいまいに検索できるくらいの使用感かなぁと思いました。（それでも物凄い助かりました。ぐぐるだけじゃ絶対こんなすぐに実装できなかったので）
人間との会話と違って、向こうから「それはこういうことですか？」と汲み取るような質問返しをしてくれないので、こっち側に多少の知識がないと会話にならないのかなと思いました。
あと、相手が人間だったら、絵や図を描いて説明することができるので、それができないAIに対して、知識がなくふわっと浮かんでるだけのやりたいことを全部文字にして説明するのも結構大変な気がしました。
逆に言うとそれができるようになったらマジで下手な人間のオペレーターよりよっぽど優秀ですね…。
引き合いに出して申し訳ないけどロリポップのAIアシスタントは凄く期待した割に思ってたものと全然違ってガッカリしたのでこれは嬉しい驚き。
最終的に出来上がった開閉ボタンはこんな感じ。
▲gif動きます
狙い通りの挙動をしてくれて大満足です！！
なおトグルボタンのサイドバー常駐はPCのみで、液晶の小さい端末では本文内に設置しています。
続き>>252
#AI #手打ちサイト #カスタマイズ #javascript #備忘録
前から気になっていたギャラリーの折り畳み開閉ボタンのデザインと挙動について。
▲gif動きます
これを、1つのボタンで開閉できる仕様にしたいと思っていました。
javascriptを使えば実現できそうなのはわかったのですが、ぐぐってもそのものズバリのコードはわからず、いつものコピペ戦法は通用せず。
ゼロからjavascriptを体系的に学ぶのはいつかやりたいけど、今はそういう気分じゃなく。
そういえば、こういう時のAIだなと思い出し、助けを乞うことに。
ChatGPTはよくわからなかったので、登録不要で使えるBing AIに聞いてみました。
試行錯誤の結果、こんな感じで質問してみたら目当てのコードを教えてもらえました。
▲「1つの」ボタンと言わないと意図が通じないようで、バラバラに独立したボタンを勧めてきます。
▲fontawesomeを使いたいことを明示しないと、innerHTMLではなくtextContentを勧めてくるのでアイコンフォントが使えません。
質問の仕方に少しコツがいりますが、ここまでほぼそのままちゃんと使えるコードを出してくれたことには驚きました。
しつこいくらい細かく指示してあげないと、知識のない素人がそのまま使えるようなコードにはならないですが。
現状、検索エンジンより多少あいまいに検索できるくらいの使用感かなぁと思いました。（それでも物凄い助かりました。ぐぐるだけじゃ絶対こんなすぐに実装できなかったので）
人間との会話と違って、向こうから「それはこういうことですか？」と汲み取るような質問返しをしてくれないので、こっち側に多少の知識がないと会話にならないのかなと思いました。
あと、相手が人間だったら、絵や図を描いて説明することができるので、それができないAIに対して、知識がなくふわっと浮かんでるだけのやりたいことを全部文字にして説明するのも結構大変な気がしました。
逆に言うとそれができるようになったらマジで下手な人間のオペレーターよりよっぽど優秀ですね…。
引き合いに出して申し訳ないけどロリポップのAIアシスタントは凄く期待した割に思ってたものと全然違ってガッカリしたのでこれは嬉しい驚き。
最終的に出来上がった開閉ボタンはこんな感じ。
▲gif動きます
狙い通りの挙動をしてくれて大満足です！！
なおトグルボタンのサイドバー常駐はPCのみで、液晶の小さい端末では本文内に設置しています。
続き>>252
#AI #手打ちサイト #カスタマイズ #javascript #備忘録
ツールチップが楽しすぎて何か所か仕込んできた…！
といってもマウスホバーするたびにそこかしこからいちいち説明が浮かんで来たら鬱陶しそうなので最低限にしましたが…。
ぱっと見はシンプルの方が好きなのに、いちいちだらだらと説明したがる癖がある自分にはツールチップ機能ぶっ刺さってしまいました。
javascriptを使ってないようには見えない。凄すぎ。
title属性がタイムラグなく即表示されてくれるならそれでも十分だったんですけどね。
液晶の小さい端末（PC以外を想定）では非表示にしてます。
#手打ちサイト #カスタマイズ #備忘録
といってもマウスホバーするたびにそこかしこからいちいち説明が浮かんで来たら鬱陶しそうなので最低限にしましたが…。
ぱっと見はシンプルの方が好きなのに、いちいちだらだらと説明したがる癖がある自分にはツールチップ機能ぶっ刺さってしまいました。
参考：HTML＆CSSだけ！ツールチップを表示するサンプルコード３選 ｜ 向壁虚造
javascriptを使ってないようには見えない。凄すぎ。
title属性がタイムラグなく即表示されてくれるならそれでも十分だったんですけどね。
液晶の小さい端末（PC以外を想定）では非表示にしてます。
#手打ちサイト #カスタマイズ #備忘録
なんだかんだで通算5回目のリニューアルになりました。
今までピンクや紫基調のデザインが多かったですが、今回はイエロー主体でやさしめポップな印象にしてみました。
黄色が（ピンクの次に）好きというのもあるし、黄色ってどんな色とも相性がいい気がするので、どんなテイストの作品を載せても調和するかなぁ、と思いまして。
全体的に薄いのでちょっと視認性は悪いかも？
でもまぁ本文と画像のメインコンテンツが見やすければいいだろう精神です。
さらにPC・タブレットでは全体的にミニマルな感じにまとめています。ちょっと見づらいかもですが、いかにも”個人サイト然”としてて可愛くなったのではないでしょうか。
色合いや全体のシンプル感など、Ver2くらいに回帰した感じですね。
【トップ絵のこと】
今回のトップ絵はタイトルをつけるなら「手癖リース」とでもいう感じでしょうか。
なんとなく好きな感じのものを詰め込みました。何も決めずにいきあたりばったりで。
電話しながら落書きしてるときみたいな、何が出てくるのかわからない感じを楽しむ感じで。
この辺もゆるく楽しく描くという原点回帰な感じです。最近ちょっと頑張りすぎな絵が多かったので；；
こういう力の抜けた絵が映えるようなデザインにしたので、シールを貼り替えるくらいの気分でこまめに新しいものを描けたらいいなと思っています。
そして、トップ絵にするために絵を描いたのはこれが初めてでした。
今までは描いたもので気に入ったものを流用してたので。
もうひとつのコンセプトは「忘れた頃の自分でも手に負えるシンプルデザイン」です。
前回のVerで、自分で＆BingAI（GPT-4）を使って作ったパーツやスクリプトはほぼそのまま流用したので、今回新たに書いたコードはほんの少しで済みました。
メインコンテンツが増えたり、HTMLをいじるのが久々な時でも、簡単にトップページのメニューリンクを貼れることを第一に考えました。
今回の特に大きな変更点は、「Doll/Craft」のページが復活したことです。
これまでハンドメイド系コンテンツは切り離したりMemoに統合したりと、長いこと扱いに手をこまねいてきましたが、最近またドール服などを作るようになって作品数が増えそうだったので、再び単独のコンテンツとして切り離すことにしました。
【ハンドメイド用ギャラリーの仕様を考える】
イラストギャラリーと違って、ハンドメイドのギャラリーはサムネ画像をクリックした時に画像を拡大するのではなく、個別のページに飛ぶ仕様にしたいと考えました。
制作過程や補足コメントなんかの文字情報（長文）や追加の写真情報を作品画像と並列で見せたいからです。
Wordpressだったらそういう仕様にするのは簡単なので、WordPress時代には実際そうしてたのですが、HTML手打ちサイトだとちょっと大変そうです。
前回リニューアル時にサイトのHTML化に踏み切った際に、ちょうどハンドメイドに飽きてたということもあり、そのようなギャラリーを実装することなくMemoに統合してアーカイブした経緯があります。
そこを今回のリニューアルで改めて着手した…という感じです。
”サムネ画像クリックで個別ページに飛ぶ仕様のギャラリー”を作るにあたって、更新のたびに自分でサムネ画像とHTMLページを作って…というのは考えただけでしんどかったので、ここでもてがろぐを活用させてもらいました。
【てがろぐの有償ライセンスを買う】
このタイミングでてがろぐの有償ライセンスを購入しました。
Doll/Craftのページは複数のてがろぐを埋め込んでいる都合、クレジット表記も1ページ内に複数表示されることになるのが個人的にあまり美しくないと感じたので、有償ライセンスを購入することでクレジット表記を非表示にさせてもらいました。
それでなくても、なんらかの形で応援させていただきたいなと以前から思っていましたし、このサイトはてがろぐなしではもう成り立たないので。
【それにしても散らかりすぎ】
冒頭で「忘れた頃の自分でも手に負えるシンプルデザイン」と言いましたが、確かに１つ１つのページのデザイン自体はシンプルなので記憶喪失にでもならない限りメンテできると思います。
ただ、いろんなところに散らばったファイルを埋め込んだり呼び出したりしていて、構造的な意味ではグッチャグッチャです。
一回時間が空いて忘れてしまったら多分もう手に負えないので、記憶がHOTなうちに何かマップみたいなものを書いてメモしておかないとなぁ。。と思ってます。
見ている人には全く関係ないですね；；
#カスタマイズ #手打ちサイト #備忘録 #てがろぐ