Firefox76でブックマークサイドバーをマウスオーバーで表示する

2020-08-01 追記
79.0でも動作しています｡
2020-09-03 追記
80.1でも動作しています｡
2021-02-11 追記
85.0でも動作しています｡
2022-11-19 追記
107.0では動きません｡
2022-12-18追記
コメントの通り修正し､108.0で動きました｡ありがとうございました｡
#sidebar-box,#sidebar-box:hover内のleft:の行をコメントアウト
開閉にアニメーションが欲しい方は下記サイトのやり方が良いと思います｡
Firefox 100におけるサイドバー自動開閉
https://zilfah-s.net/software/firefox-sidebar

アドオンは無くなっているが､userChrome.cssというので実現可能らしいのでやってみる

userChrome.cssの有効化
こちらを参考に
Firefox 69 以降でも userChrome.css を使う方法
https://at.sachi-web.com/firefox69_userchrome_css.html

アドレスバーに｢about:config｣
検索欄に｢toolkit.legacyUserProfileCustomizations.stylesheets｣
切り替えボタンで｢true｣に

userChrome.cssの配置
こちらを参考に
Firefox Quantum 以降でも userChrome.js を使う
https://qiita.com/yokra9/items/7e5af03b81423bddbe4e
userChrome.cssだけをリンクを右クリック→｢名前を付けてリンク先を保存｣で取得
アドレスバーに｢about:profiles｣
｢ルートディレクトリ｣を開く
｢chrome｣ディレクトリを作成
userChrome.cssを配置

動作の確認
こちらを参考に
Firefox userChrome.cssのコードまとめ
https://www.bugbugnow.net/2018/04/firefox-userchromecss.html
userChrome.cssに下のコードを追記

* {
  color: red;
}

Firefox再起動
ツールバー等の文字色が赤くなっていたらOK
上のコードを削除しておく

userChrome.cssに追記して実装(左側に)
こちらを参考に
Firefox 64のmy設定【userChrome.cssその2】
https://10prs.com/view/7
FireFoxを72.0.1更新 サイドバー（自動開閉）が開かない
https://oshiete.goo.ne.jp/qa/11438606.html

/************** サイドバー自動開閉 */
/* マウスオーバーする部分 幅5px 表示ディレイを追加 */
#sidebar-box {
    position: relative !important;
    overflow-x: hidden !important;
    margin-right: -5px !important;
    /* left: 5px !important; */
    min-width: 5px !important;
    max-width: 5px !important;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
    z-index: 1;
    transition-delay: 0.1s;
}

/* 表示されるサイドバー 幅350px */
#sidebar-box:hover {
    margin-right: -350px !important;
    /* left: 350px !important; */
    min-width: 350px !important;
    max-width: 350px !important;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
}

/* いらない?
#sidebar {
    opacity: 0 !important;
}

#sidebar:hover {
    opacity: 1 !important;
}
*/

/* サイドバーのヘッダー部分を非表示に */
#sidebar-header {
    display: none !important;
}

Firefoxを再起動する

ブックマークサイドバーを表示する
こちらを参考に
Firefox のサイドバーを使用して、ブックマークや履歴、ソーシャル機能にアクセスする
https://support.mozilla.org/ja/kb/use-firefox-sidebar-access-bookmarks-history-synced
私はツールバーの左端に置いてON/OFFしやすいようにしています

サイドバーを右にする場合
cssをリネームするか､上のコードをコメントアウトしてFirefoxを再起動
こちらを参考にサイドバーを右側に
Firefoxのブックマーク・サイドバーを右側に移動させる方法
http://blog.livedoor.jp/blackcode/archives/2073315.html
cssはこちらを参考に､上のコードのleftとrightを入れ替え
Firefox 64のmy設定【userChrome.cssその2】
https://10prs.com/view/7

おまけ
コードの表示はこちらを参考にしました
ブログにソースコードをきれいに載せる方法（Google Code Prettify）
https://www.apnari.com/entry/SourceCodeSyntaxHighlight

シャットダウンのアイコン

512 x 512 png


こんな感じ

windows10のデスクトップアイコンをGIMPで作る

こちらを参考にデスクトップにシャットダウンのショートカットを作り､アイコンも変更したが
https://pc-karuma.net/windows-10-shortcut-shutdown/

いまいちなので､アイコンを探して､こちらを見ていて
https://icons8.jp/icon/20925/%E3%82%B7%E3%83%A3%E3%83%83%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3

自分で作れるのではと思い､やってみました｡

作ったのはこれ(icoにする前のpng)

アイコン完成後に試したところ
モニターサイズ 15.6インチ
解像度 1366 x 768
だと､デスクトップアイコンは 48 x 48 でいいみたい｡(32 x 32だとぼやける｡)

GIMPのバージョンは2.10.18です｡

こちらを参考に作ろうかと思ったんですが､もっとシンプルなのでいいかと､最初の方だけ参考に
http://kojiko-android.hatenablog.com/entry/2016/02/14/012902

1

｢ファイル｣→｢新しい画像｣
サイズ　512 x 512
解像度　192

グリッドの表示はこちらを参考に
https://gimp-easy.net/grid/
｢表示｣→｢グリッドの表示｣で、グリッドを表示

｢画像｣→｢グリッドの設定｣

こちらを参考に透明にしておく
http://itpp.seesaa.net/article/199930396.html
｢レイヤー｣→｢透明部分｣→｢アルファチャンネルを追加｣
｢選択｣→｢色域を選択｣で、画像をクリック
｢編集｣→｢切り取り｣で、透明になる

こちらを参考に円を描く
(これ以下､サイズ､色はお好みで｡左上角の座標はサイズに合わせて｡)
https://gimp-easy.net/circle-how/

2

｢矩形選択｣を右クリック→｢楕円選択｣ または ｢ツール｣→｢楕円選択｣
画像の上に適当に広げる
左上角の座標 16 16
サイズ 480 480
色 e02222
塗りつぶし
(一応､｢ファイル｣→｢名前を付けて保存｣しておく｡)

 

3

｢レイヤー｣→｢新しいレイヤー｣の追加
設定変更は無し

楕円選択
画像の上に適当に広げる
左上角の座標 96 96
サイズ 320 320
色 ffeecc
塗りつぶし
(一応､名前を付けて保存しておく｡)

4

｢レイヤー｣→｢新しいレイヤーの追加｣
楕円選択
画像の上に適当に広げる
左上角の座標 136 136
サイズ 240 240
色 e02222
塗りつぶし
(一応､名前を付けて保存しておく｡)

5-1

こちらを参考に､三角形を描き､切り欠きをつくる(垂直に切り欠く場合は5-3へ)
https://l-s-b-f.com/post-857/1887
｢レイヤー｣→｢新しいレイヤー｣の追加
｢ツール｣→｢パス｣ または ｢パス｣アイコンクリック
多角形にチェックを入れる
アンカーは適当にクリックしてグリッドを見ながら移動させる(サイズ､形はお好みで｡)
256 256にアンカー
424 88にアンカー
88 88にアンカー
256 256付近にアンカーして256 256に移動

選択→パスを選択範囲に
色 e02222
白いところを塗りつぶし
(一応､名前を付けて保存しておく｡)

5-2

角を丸くする(必要なければ6-1へ)
｢レイヤー｣→｢新しいレイヤーの追加｣
楕円選択
画像の上に適当に広げる
左上角の座標 138 136
サイズ 40 40
色 ffeecc
赤いところを塗りつぶし

反対も同様に
楕円選択
画像の上に適当に広げる
左上角の座標 336 138
サイズ 40 40
色 ffeecc
赤いところを塗りつぶし
(一応､名前を付けて保存しておく｡)
6-2へ

5-3

｢レイヤー｣→｢新しいレイヤーの追加｣
｢楕円選択｣を右クリック→｢矩形選択｣ または ｢ツール｣→｢矩形選択｣
画像の上に適当に広げる
左上角の座標 216 80
サイズ 80 80
色 e02222
白いところを塗りつぶし
(一応､名前を付けて保存しておく｡)
6-1へ

6-1

｢レイヤー｣→｢新しいレイヤーの追加｣
｢楕円選択｣を右クリック→｢矩形選択｣ または ｢ツール｣→｢矩形選択｣
画像の上に適当に広げる
左上角の座標 236 72
サイズ 40 184
色 ffeecc
塗りつぶし
(一応､名前を付けて保存しておく｡)

6-2

 角の丸い棒にする場合(6-1でOKなら必要ない)
｢レイヤー｣→｢新しいレイヤーの追加｣
｢楕円選択｣を右クリック→｢矩形選択｣ または ｢ツール｣→｢矩形選択｣
画像の上に適当に広げる
左上角の座標 236 92
サイズ 40 144
色 ffeecc
塗りつぶし

楕円選択
画像の上に適当に広げる
左上角の座標 236 216
サイズ 40 40
色 ffeecc
赤いところを塗りつぶし

上側も同様に
左上角の座標 236 72
サイズ 40 40
色 ffeecc
赤いところを塗りつぶし
(一応､名前を付けて保存しておく｡) 

7

｢ファイル｣→｢名前を付けてエクスポート｣→｢名前｣欄に拡張子をpngで→｢エクスポート｣
 ポップアップして出てくる設定はそのままで｢エクスポート｣

8

当初の目的には 48 x 48 だけで良いのだが､マルチアイコンというのにしておくと､適切なサイズを選んでくれるらしいので､こちらを参考に
(完成後に試したところ､マルチアイコンにしないと円の縁がギザギザになるような気がする｡)
https://arigayas.exblog.jp/15118069/

作成するサイズは
16 x 16
24 x 24
32 x 32
48 x 48
64 x 64
128 x 128
256 x 256
512 x 512
の8種類(元のサイズが512なので追加｡いらないかも｡)

エクスポートしたpng画像をGIMPで開く
｢レイヤー｣→｢レイヤーの複製｣(Shift + Ctrl + D)を7回繰り返す

(以下2つはもっとうまいやり方があるかも)
レイヤー名を
1をクリック→｢レイヤーメニュー｣→｢レイヤー名の変更｣
または
2で右クリック→｢レイヤー名の変更｣
で､一つずつ変更

レイヤーの縮小は
1をクリック→｢レイヤーメニュー｣→｢レイヤーの拡大･縮小｣
または
2で右クリック→｢レイヤーの拡大･縮小｣
または
｢レイヤー｣→｢レイヤーの拡大･縮小｣
 で､こちらも一つずつ変更

すべて縮小したら､名前を付けて保存しておく
縮小後はこんな感じ

｢ファイル｣→｢名前を付けてエクスポート｣→｢名前｣欄に拡張子をicoで→｢エクスポート｣
ポップアップが出る
このままだと 256, 512 が無効なので｢圧縮｣の左のチェックを外す
(128まででいいなら､そのままで)
で､｢エクスポート｣

これでアイコン完成｡
シャットダウンのショートカットアイコンを変更したら､こんな感じ
最初の方で見たフリー素材のアイコンと変わらないけど､割と満足｡
ついでにfaviconにも設定してみた｡

Visual Studio Code PHP XDebug

Visual Studio CodeでPHPデバッグする際に
https://qiita.com/deux222/items/af75319ece05653c4bb5
↑こちらなどを参考にしたんですが
https://xdebug.org/wizard.php
からダウンロードしたXDebugをphp.iniで指定しても動かない

https://helog.jp/php/vscode-php-debug/
↑こちらを見るとphp\ext\php_xdebug.dllがすでにあればそれを使えばいいみたい

ちゃんと確認してからやらないとダメですね

xamppの設定

xamppの設定でやったこと

エディタの変更
xampp control panelの右上configボタン
Editor欄にサクラエディタ(使いたいエディタ)のexeを絶対パスで指定
(ブラウザはsystem defaultでいいので指定しなかった｡必要ならエディタ同様絶対パスで使いたいブラウザのexeを指定する)


ポート番号の変更
ポート番号80を使用しているプロセスが他になければ変更しなくてもいいがなんとなく
880にしたのは他に予約されてなさそうなので

xampp control panelの右上 config → Service and Port Settings で
apacheの Main Port を 880 に変更
(SSLは443のまま)

これ以降ファイルに変更を加える場合は元ファイルをコピーして
httpd.conf なら httpd.conf.back 等にしてバックアップしておくほうがいいかも

これ以降行番号は目安
httpd.confの変更　(apache\conf\httpd.conf)
60行目あたりを

#Listen 80
Listen 880

230行目あたりを

#ServerName localhost:80
ServerName localhost:880


httpd-ssl.confの変更　(apache\conf\extra\httpd-ssl.conf)
125行目あたりを

#ServerName www.example.com:443
ServerName localhost:443

に変更
なんかエラーが出てたので


php.iniの変更　(php\php.ini)
いろいろなサイトを参考にしたがどこだったかは不明
よく分かっていない変更点が多い

930行目あたり
extension=pdo_sqlite
を
;extension=pdo_sqlite
としてコメントアウト

1637行目あたりの
;mbstring.language=Japanese
の;をとってコメント解除

1644行目あたり
mbstring.internal_encoding = UTF-8
を追記

1654行目辺り
mbstring.http_input = pass
 を追記

1665行目辺り
mbstring.http_output = pass
を追記

1673行目辺り
mbstring.encoding_translation = Off
の;をとってコメント解除

1679行目辺り
mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII
を追記

1684行目辺り
mbstring.substitute_character = none
の;をとってコメント解除

1695行目辺り
mbstring.func_overload = 0
の;をとってコメント解除

1700行目あたり
mbstring.strict_detection = Off
を追記

1973行目あたりを
;date.timezone=Europe/Berlin
date.timezone=Asia/Tokyo
に変更


config.inc.phpの変更　(phpMyAdmin\config.inc.php)
/* Authentication type and info */
の下を
$cfg['Servers'][$i]['auth_type'] = 'cookie';
$cfg['Servers'][$i]['user'] = '';
に変更

とりあえずこんな感じ

xampp-control.ini アクセスが拒否されました

ちょっとうろ覚えですが､xamppをインストールした際に
｢Error:cannnot create file "C:/xampp/xampp-control.ini" アクセスが拒否されました｣
というエラーが発生しました｡
xamppコントロールパネルは起動できるのですが､quitする際にも発生します｡

xampp-control.iniが読み取り専用になっているのが原因?
xampp-control.exeを右クリックし｢管理者として実行｣すればいいのですが､
面倒くさいのでxampp-control.iniの権限?を変更したら通常の起動でも問題なくなりました｡

ここを参考に
https://www2.mouse-jp.co.jp/ssl/user_support2/sc_faq_documents.asp?FaqID=10494
やったこと(追記あり)
1. xampp-control.iniを右クリックしプロパティを選択
2. ｢xampp-control.iniのプロパティ｣のセキュリティタブ で編集
3. ポップアップした｢xampp-control.iniのアクセス許可｣で追加
4. ポップアップした｢ユーザーまたはグループの選択｣の
    ｢選択するオブジェクト名を入力してください｣の下の欄に
    Authenticated Users
   を追加しOK
5. ｢xampp-control.iniのアクセス許可｣に戻って
    ｢グループ名またはユーザー名｣欄のAuthenticated Usersを選択し
   ｢アクセス許可｣欄の｢許可｣の｢変更｣にチェックを入れる
   (｢読み取りと実行｣､｢読み取り｣､｢書き込み｣にもチェックが入る)
   OK
6. ｢xampp-control.iniのプロパティ｣のセキュリティタブ でOK


上記実行前の状況
OS Windows10 1909
私の場合｢xampp-control.iniのプロパティ｣のセキュリティタブの
 ｢グループ名またはユーザー名｣欄に

Everyone
Administrators (PC名\Administrators)

しかありませんでした｡
ログインしているアカウントを確認すると管理者になっていました｡
試しに同じディレクトリにあるproperties.iniのプロパティを確認してみると

Authenticated Users
SYSTEM
Administrators (PC名\Administrators)
Users (PC名\Users)

となっていました｡
ので､上記のようにそれっぽいグループ名のAuthenticated Usersを
追加してみたら､なんとかなりました｡

正直｢Authenticated Users｣と｢Administrators｣の違いは分かっていません｡
xamppインストール時にc:\xamppをxamppのインストーラー任せにせず
先に自分で作っておくほうが良かったのか?
まあ､しばらくこれで様子見でいいかな｡ 


追記
｢選択するオブジェクト名を入力してください｣の下の欄に
｢Authenticated Users｣でなくログインしているアカウント名を入力し
｢名前の確認｣ボタンクリック
｢複数の名前が見つかりました｣がポップアップした場合は
それらしい方(フォルダー欄に記載のある方?)を選択
あとは上記(やったこと)と同様に 

Microsoftアカウントでログインしている場合は
アカウント名はメールアドレスでいいみたい 

複数で利用するのでなければこっちのほうがいいのかも

 あと､｢アクセス許可｣欄の｢許可｣の｢フルコントロール｣と｢変更｣の違いはわかりません｡