ブラウザソースでhttps://discord.com/appを開く。 CSSはこちら body, #app-mount, [class*=app], [class*=bg], [class*=chat] { background: none !important; } div[class*=sidebar], div[class*=overlay], div[class*=border], nav[class*=guilds] { display: none !important; } 追加した後、「対話」ボタンで操作していく QRコードでログインすればログインできる。 別のデバイスで通話に参加してから、そのアカウントでログインすると良い。
はじめに タイトルの内容で記事を書いた理由は、「キャッシュクリアの為にファイル名の後ろに数字をつけるアレ」と曖昧な覚え方をしていたからです。 曖昧な覚え方だとググることすらもできなかったので、備忘録として記事にしました。 Cache Busting Javascript、CSS、画像等のファイルの更新に合わせてクエリストリングを変更することで、ブラウザ側でキャッシュクリアをしなくてもいい状態にすることです。 ブラウザ側がサーバ側のファイルを読み込まずキャッシュを読み込むことでJavascript、CSS、画像の修正が反映されないことを防ぎます。 後ろにつけるアレの正式名称を覚えたい クエリ クエリストリング クエリ文字 GETパラメータ パラーメータ 特に固定された呼び方はないのでしょうか。 個人的にクエリストリングがしっくりきたのでクエリストリングと呼びつつ他にこういう言い回しもあるという程度に覚えておきます。 具体例 Javascript、CSS、画像ファイルの後ろに?クエリストリングと記述します。 CSSファイルの読み込みを例として、クエリストリングを書いてない場合は <link rel="stylesheet" type="text/css" href="/css/default.css" /> クエリストリングを書いている場合は <link rel="stylesheet" type="text/css" href="/css/default.css?20210909" /> と記述します。 CakePHPでヘルパーを利用してタグを作成した場合にクエリストリングを付与 環境 ソフトウェアのバージョン PHP 7.3.15 CakePHP 2.10.20 HtmlHelper利用時にクエリストリング付与 パラメータ無しでクエリストリングを付与 パラメータの$urlにクエリストリングを付与したファイル名を記述します。 index.ctp <?php $this->Html->css('test.css?20210909', array('inline' => false)); ?> 出力結果は以下の通りです。 <link rel="stylesheet" type="text/css" href="/css/test.css?20210909"/> パラメータありでクエリストリングを付与 パラメータの$urlにクエリストリングを付与したファイル名を記述する際にパラメータを記述します。 index.ctp <?php $this->Html->css('test.css?param=20210909', array('inline' => false)); ?> 出力結果は以下の通りです。 <link rel="stylesheet" type="text/css" href="/css/test.css?param=20210909"/> Configureを利用してクエリストリングを付与 クエリストリングが複数ある場合に同時に修正したかったので、Configureを利用してみました。 Configディレクトリに設定用のファイルを作成し、設定したいクエリストリングを記述します。 testConfig.php <?php $config['reloadQuery'] = '20210909'; Configディレクトリのbootstrap.phpに設定ファイル読み込みの記述をします。 bootstrap.php Configure::load("testConfig.php"); Controllerでクエリストリングを受け取り、テンプレートに渡します。 テンプレートが複数ある場合に共通化した処理になると考えたため、AppController.phpにbeforeFilter()を記述してクエリストリングを受け取っています。 AppController.php class AppController extends Controller { public function beforeFilter() { $reloadQuery = Configure::read('reloadQuery'); $this->set(compact('reloadQuery')); } } Controllerから受け取った$reloadQueryをテンプレートで使用します。 index.ctp <?php $this->Html->css('test.css?' . $reloadQuery, array('inline' => false)); ?> 出力結果は以下の通りです。test.css?の後ろにtestConfig.phpで設定した値が表示されます。 <link rel="stylesheet" type="text/css" href="/css/test.css?20210909"/> index.ctpよりも外側のテンプレート(例：default.ctp)があるとして、そこで直接タグを書いている場合は以下のように記述します。 default.ctp <?php <link rel="stylesheet" type="text/css" href="/css/default.css?<?php echo $reloadQuery; ?>" /> ?> 出力結果は以下の通りです。 <link rel="stylesheet" type="text/css" href="/css/default.css?20210909" /> そもそもCakePHPだったらコメントアウトを外すだけ？ そもそもCakePHP2.xだとcore.phpに記述されている以下のコメントアウトを外すだけでキャッシュクリアを行ってくれるようでした。 core.php Configure::write('Asset.timestamp', 'force'); コメントが英語だったのでしっかりと理解できていませんでしたが、おそらくブラウザを開くたびに毎回キャッシュクリアをする設定だと思います。 今回の目的はファイル更新後に1度だけキャッシュを読み直して欲しかったので上記の設定は使わなかったです。 参考にさせてもらったサイト 以上です。
はじめに 比率で配置できるFlexboxのflexプロパティについてのまとめです。 flex:数値 比率で配置する アイテムをどのような比率で配置するか html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> </div> </body> </html> 下記のコードの場合、１対３の比率で配置できる css .container{ display: flex; } .item1 { background-color: pink; flex: 1; } .item2 { background-color: blue; flex: 3; }
CSSのpositionプロパティの使い方を下記に記載致します。 目次 1.positionでできること 2.値 3.参考記事 1. positionでできること positionプロパティではボックスの配置を指定します。 ※絶対位置や相対位置です。 ボックスの位置を指定する際には、 値（static・relative・absolute・fixed）、 top・bottom・left・rightを記載して、 要素を基準の位置からどれくらい動かすか指定します。 2. 値 ・static デフォルトで設定されているもので、topやleftなどを指定ができないです。また、z-index(=要素の重なる順番を決めるプロパティ)も指定できないです。 ・relative staticを指定した場合に表示される位置が基準位置となり、 ここから相対位置をtopやleftなどで指定します。 z-indexも指定でき、absoluteを設定する際の基準位置になります。 style.css box { position: relative; top: 50px; left: 50px; } top(上)から50px、left(左)から50pxに設定した内容です。 absolute 絶対位置への配置となります。 親ボックスにstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 style.css box { position: relative; top: 50px; left: 50px; } box2 { position: absolute; top: 80px; left: 80px; } fixed 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。 style.css header { position: fixed; top: 0; left: 0; } 位置を指定し、スクロールしても位置を固定します。 3. 参考記事 https://blog.codecamp.jp/css-position-property https://developer.mozilla.org/ja/docs/Web/CSS/position http://www.htmq.com/style/position.shtml
対象者 link_toメソッドの使い方を知りたい方 目的 link_toメソッド使ってviewでボタンを表示する 実際の手順と実例 1.link_toメソッドの表示の違い a. 基本的な構文 <%=link_to "表示する文字", "URL" %> 上記の書き方だとテキストリンクになってしまう b. doとendで囲う方法 <%= link_to URL do %> 表示する文字 <% end %> これでボタン化できます。 2. 実際の使用例 下記サイトを参考に表示テキストがホバーすると変わるボタンを実装 上記記事のHTMLコードは下記の通り index.html <a href="#" class="btntextchange"> <span>About</span><span>私たちについて</span> </a> ※CSSは省略します。class="btntextchange"に表示を切り替えるcssのコードが書かれています。 これをRailsのコードに置き換えて実験してみた index.html.erb <a href="#" class="btntextchange"> <span><%=link_to "About", "about_path" %></span> <span><%=link_to "私達について", "about_path" %></span> </a> 上記の書き方だとボタン化できません。 原因としては、link_toメソッドを使用することでaタグのHTMLが作成され、二重に精製されてしまっていることが考えられます。 3.例の解決方法 下記のようにボタン化して解決できます。 index.html.erb <%= link_to about_path do %> <div class="btntextchange"> <span>About</span> <span>私たちについて</span> </div> <% end %> 上記のようにHTMLコードを挟み込むことで、 ボタンとして活用できます！ 参照 【Rails入門】link_toの使い方とオプションをわかりやすく解説！ 【Rails基礎】link_toメソッドをボタン化して使う方法
