dockerって何とか、DBとの連携でコード上で具体的にどうするのとか、初心者的にはイメージがつかないほど良くわからないので、teamlabさんのオンラインスキルアップ課題をやってみた。 こちらから課題にアクセスします。 STEP1の内容は下記のようになっています。 インターネットのしくみ WEBサーバについて HTMLとCSSについて 4-a. 【Windows】Dockerと開発環境の作り方 4-b. 【Mac】Dockerと開発環境の作り方 PHPを書いてみる PHPでGET/POSTをやってみる データベースについて SQLを書いてみる PHPでデータベースを操作してみる 10. GitとGitHubについて 4-b：【Mac】Dockerと開発環境の作り方 1,2,3はわかった気になってとりあえず進めて、まずは4のDockerのセットアップから入ります。 docker-compose -v dockerがちゃんとインストールされているか上記のコマンドで確かめます。 docker-compose up -d teamlabさんのサイトからダウンロードしたフォルダに遷移して、上のコマンドを叩くとコンテナを作成して、起動します。 ※Dockerのコマンドに関してはこちら なんかいろいろエラーは起きたのですが、無事？doneになっています。 「skillup-php-step1-master」をダウンロードして解凍したフォルダに移動したいけど移動できない！っていう場合にですが、フォルダさえ探せれば、フォルダごとターミナルに落としてあげることでpathが表示されるので、あとは先頭にcdつけるだけでフォルダに移動できるはずです。 1-6：PHPでGET/POSTをやってみる 1-5は普通にコピペでコード貼って、Dockerで立ち上げたlocalhostにアクセスするだけなので、はしおります。 まず、エディターがない人は適当なエディターをインストールしてください。 (ぼくはsublimeをつかっています。) とりあえず、課題のpostだけやってみました index.html1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <p>コメントしてください。</p> <form method="POST" action="index.php"> <input name="comment" /> <input type="submit" value="送信" /> </form> </body> </html> php1 <?php //commentがPOSTされているなら if(isset($_POST["comment"])){ //エスケープしてから表示 $comment = htmlspecialchars($_POST["comment"]); print("あなたのコメントは「 ${comment} 」です。"); } else { ?> 最後にこの課題があります。 [課題]送信する内容を変更してみよう 掲示板に必要な情報としては少なくとも名前と本文が必要です。名前も送信し、受け取るように変更してみましょう。余力のある人はタイトル・文字色・メールアドレスなども追加してみましょう。 なんかとりえあえず複数のデータを送ってみてほしいとのことだったので、僕は次のようにしました。 index.html2 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <style> .cell{ padding: 1px 15px; margin: 1px 30px; line-height: 0.1; } </style> <h1>「同窓会の参加有無」</h1> <div class=cell> <form method="POST" action="index.php"> <ol> <li><p>氏名：<input name="name" /></p></li> <li><p>メール：<input name="mail" /></p></li> <li><p>参加可否：<input name="comment" /></p></li> <input type="submit" value="送信" style= "width:150px;,height:100px;"/> </div> </form> </body> </html> php 2 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <?php //commentがPOSTされているなら if(isset($_POST["mail"],$_POST["name"],$_POST["comment"])){ //エスケープしてから表示 $mails = htmlspecialchars($_POST["mail"]); $names = htmlspecialchars($_POST["name"]); $comments = htmlspecialchars($_POST["comment"]); print("あなたの入力した情報は以下になります。<br/>"); print("名前：${mails}<br/>"); print("メール：${names}<br/>"); print("参加有無：${comments}<br/>"); }else{ print("情報の入力が正しくありません。"); } ?> </body> </html> 震えるくらいクソコードであることはなんとなくですが、自覚してます.... STEP1-9.PHPでデータベースを操作してみる これやってみたのですが、すごい勉強になりました。 phpでデータベースをこうやっていじるんだ！みたいなのがなんとなくですが理解できます。 こちらも特に説明を読んでいけば問題なく進めました。 唯一初心者目線でひっかかりそうなのが、データベースにアクセスするときに自分でつけたデータベースの名前じゃないと、エラーになるので注意が必要。 僕の場合はdbname=「TEST」ではなくて「text」でしたので最初はエラってました。 実行結果1 先程はDBのname,textを全て表示したが今度はJohnにしぼったものだけを表示させます。 実行コード <?php $dsn = 'pgsql:dbname=test;host=pgsql;port=5432'; $user = 'postgres'; $pass = 'example'; try { // DBに接続する $dbh = new PDO($dsn, $user, $pass); //$query_result = $dbh->query('SELECT * FROM test_comments'); $sth_select = $dbh->prepare('SELECT * FROM test_comments WHERE name = ?'); // prepareメソッド(INSERT)最下部でinsertするname/textを定義 $sth = $dbh->prepare('INSERT INTO test_comments (name, text) VALUES (?, ?)'); // DBを切断する $dbh = null; } catch (PDOException $e) { // 接続にエラーが発生した場合ここに入る print "DB ERROR: " . $e->getMessage() . "<br/>"; die(); } ?> <?php //これでdbのnameとtextに新たに文字列が加わる $name = "John"; $text = "Power to the People"; $sth->execute(array($name, $text)); ?> <?php $name = "John"; $sth_select->execute(array($name)); //実行したクエリから実行結果を取得している $prepare_result = $sth_select->fetchAll(); foreach($prepare_result as $row) { print $row["name"] . ": " . $row["text"] . "<br/>"; } $sth_select->execute(array($name)); ?> 実行結果2 とりあえず、無事表示されました。 次は気が向いたらSTEP2をやります。
dockerって何とか、DBとの連携でコード上で具体的にどうするのとか、初心者的にはイメージがつかないほど良くわからないので、teamlabさんのオンラインスキルアップ課題をやってみた。
こちらから課題にアクセスします。
STEP1の内容は下記のようになっています。
インターネットのしくみ WEBサーバについて HTMLとCSSについて 4-a. 【Windows】Dockerと開発環境の作り方 4-b. 【Mac】Dockerと開発環境の作り方 PHPを書いてみる PHPでGET/POSTをやってみる データベースについて SQLを書いてみる PHPでデータベースを操作してみる 10. GitとGitHubについて
1,2,3はわかった気になってとりあえず進めて、まずは4のDockerのセットアップから入ります。
docker-compose -v
dockerがちゃんとインストールされているか上記のコマンドで確かめます。
docker-compose up -d
teamlabさんのサイトからダウンロードしたフォルダに遷移して、上のコマンドを叩くとコンテナを作成して、起動します。
※Dockerのコマンドに関してはこちら
なんかいろいろエラーは起きたのですが、無事？doneになっています。 「skillup-php-step1-master」をダウンロードして解凍したフォルダに移動したいけど移動できない！っていう場合にですが、フォルダさえ探せれば、フォルダごとターミナルに落としてあげることでpathが表示されるので、あとは先頭にcdつけるだけでフォルダに移動できるはずです。
1-5は普通にコピペでコード貼って、Dockerで立ち上げたlocalhostにアクセスするだけなので、はしおります。
まず、エディターがない人は適当なエディターをインストールしてください。 (ぼくはsublimeをつかっています。)
とりあえず、課題のpostだけやってみました
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <p>コメントしてください。</p> <form method="POST" action="index.php"> <input name="comment" /> <input type="submit" value="送信" /> </form> </body> </html>
<?php //commentがPOSTされているなら if(isset($_POST["comment"])){ //エスケープしてから表示 $comment = htmlspecialchars($_POST["comment"]); print("あなたのコメントは「 ${comment} 」です。"); } else { ?>
最後にこの課題があります。
[課題]送信する内容を変更してみよう 掲示板に必要な情報としては少なくとも名前と本文が必要です。名前も送信し、受け取るように変更してみましょう。余力のある人はタイトル・文字色・メールアドレスなども追加してみましょう。
なんかとりえあえず複数のデータを送ってみてほしいとのことだったので、僕は次のようにしました。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <style> .cell{ padding: 1px 15px; margin: 1px 30px; line-height: 0.1; } </style> <h1>「同窓会の参加有無」</h1> <div class=cell> <form method="POST" action="index.php"> <ol> <li><p>氏名：<input name="name" /></p></li> <li><p>メール：<input name="mail" /></p></li> <li><p>参加可否：<input name="comment" /></p></li> <input type="submit" value="送信" style= "width:150px;,height:100px;"/> </div> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>POSTのサンプル</title> </head> <body> <?php //commentがPOSTされているなら if(isset($_POST["mail"],$_POST["name"],$_POST["comment"])){ //エスケープしてから表示 $mails = htmlspecialchars($_POST["mail"]); $names = htmlspecialchars($_POST["name"]); $comments = htmlspecialchars($_POST["comment"]); print("あなたの入力した情報は以下になります。<br/>"); print("名前：${mails}<br/>"); print("メール：${names}<br/>"); print("参加有無：${comments}<br/>"); }else{ print("情報の入力が正しくありません。"); } ?> </body> </html>
震えるくらいクソコードであることはなんとなくですが、自覚してます....
これやってみたのですが、すごい勉強になりました。 phpでデータベースをこうやっていじるんだ！みたいなのがなんとなくですが理解できます。
こちらも特に説明を読んでいけば問題なく進めました。
唯一初心者目線でひっかかりそうなのが、データベースにアクセスするときに自分でつけたデータベースの名前じゃないと、エラーになるので注意が必要。 僕の場合はdbname=「TEST」ではなくて「text」でしたので最初はエラってました。
先程はDBのname,textを全て表示したが今度はJohnにしぼったものだけを表示させます。
<?php $dsn = 'pgsql:dbname=test;host=pgsql;port=5432'; $user = 'postgres'; $pass = 'example'; try { // DBに接続する $dbh = new PDO($dsn, $user, $pass); //$query_result = $dbh->query('SELECT * FROM test_comments'); $sth_select = $dbh->prepare('SELECT * FROM test_comments WHERE name = ?'); // prepareメソッド(INSERT)最下部でinsertするname/textを定義 $sth = $dbh->prepare('INSERT INTO test_comments (name, text) VALUES (?, ?)'); // DBを切断する $dbh = null; } catch (PDOException $e) { // 接続にエラーが発生した場合ここに入る print "DB ERROR: " . $e->getMessage() . "<br/>"; die(); } ?> <?php //これでdbのnameとtextに新たに文字列が加わる $name = "John"; $text = "Power to the People"; $sth->execute(array($name, $text)); ?> <?php $name = "John"; $sth_select->execute(array($name)); //実行したクエリから実行結果を取得している $prepare_result = $sth_select->fetchAll(); foreach($prepare_result as $row) { print $row["name"] . ": " . $row["text"] . "<br/>"; } $sth_select->execute(array($name)); ?>
とりあえず、無事表示されました。
次は気が向いたらSTEP2をやります。
こんにちは、ブログ「学生ブロックチェーンエンジニアのブログ」を運営しているアカネヤ(@ToshioAkaneya)です。 複数HTMLファイルでCSSを共有する場合の便利な手段 複数HTMLファイルでCSSを共有すると、意図しないHTMLファイルの方にCSSの変更が適用されてしまうことがあります。 オススメの解決策は、HTMLファイルのbodyタグにクラスを指定することです。 例 index.html <body class="index"> <h1>タイトル</h1> ... </body> about.html <body class="about"> <h1>タイトル</h1> ... </body> main.css .index h1 { color: black; } .about h1 { color: black; } はてなブックマーク・Pocketはこちらから はてなブックマークに追加 Pocketに追加
こんにちは、ブログ「学生ブロックチェーンエンジニアのブログ」を運営しているアカネヤ(@ToshioAkaneya)です。
複数HTMLファイルでCSSを共有すると、意図しないHTMLファイルの方にCSSの変更が適用されてしまうことがあります。
オススメの解決策は、HTMLファイルのbodyタグにクラスを指定することです。
例
<body class="index"> <h1>タイトル</h1> ... </body>
<body class="about"> <h1>タイトル</h1> ... </body>
.index h1 { color: black; } .about h1 { color: black; }
はてなブックマークに追加 Pocketに追加
自分のメモ用 内に入れるべきタグと重要度一覧。 文字のエンコード <meta charset="utf-8"> 重要度：★★★ 文字コードを指定するためのもの。 日本語サイトなら必須。 Internet Explorer用の設定 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 重要度：★★★ IEには過去バージョンで表示させる「互換モード」があり、デザイン崩れが起きる場合がある。 これを指定すれば、常に「標準モード」で表示される。 viewport設定 <meta name="viewport" content="width=device-width,initial-scale=1" /> 重要度：★★★ 「レスポンシブデザイン」のサイトを作成するなら必須。 タイトルタグ <title>ページタイトル</title> 重要度：★★★ SEO対策 指定したタイトルを検索結果やブラウザのタブに表示させる。 メタディスクリプション <meta name="description" content="ページの説明文" /> 重要度：★★ そのページがどんな内容なのか１００文字以下で記載。 検索結果の下の説明文に反映される。 （SEO対策には直接的な効果はない。） OGPタグ <meta property="og:url" content="ページURL" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="ページタイプ" /> <meta property="og:desvription" content="記事の抜粋文" /> <meta property="og:img" content="画像URL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:local" content="ja_JP" /> <!-- twitter card --> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザ名" /> 重要度：★★★ facebookやTwitterなどのソーシャルメディアでシェアをされた時に、よくあるやつ。 必須項目 og:title ページタイトル og:type ページ種類（website、blog、video、article など） og:image サムネイル画像 og:url webページのURL OGPの設定の仕方 URLの正規化 <link rel="canonical" href="正規化するURL"> 重要度：★★ SEO対策 内容が全く同じページが複数ある場合、検索エンジンからの評価を統一するために使用する。 例：PCとスマホで同じ内容でもURLが違う場合 サイトアイコン(favicon) <link rel="icon" href="./favicon.ico"> <link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png"> 重要度：★★ ブラウザのタブに表示やブックマークした時のサイトアイコンとして使用される。 2行目はiPhoneで使用され、Webページをホーム画面に追加した時のアイコン画像として使用される。 2019年版ホームページのタブ画像作成と設定方法まとめ favicon作成 windows用タイル設定 <meta name="msapplication-TileImage" content="画像URL" /> <meta name="msapplication-TileColor" content="カラーコード" /> 重要度：★ Windows8~できたピン留機能用のアイコン設定。 タイル画像と背景色を設定できる。 metaタグコピペ用 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>ページタイトル</title> <meta name="description" content="ページの説明文" /> <link rel="icon" href="./favicon.ico"> <link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png"> <!-- ogp --> <meta property="og:url" content="ページURL" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="ページタイプ" /> <meta property="og:desvription" content="記事の抜粋文" /> <meta property="og:img" content="画像URL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:local" content="ja_JP" /> <!-- twitter card --> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザ名" /> 任意で消したり、追加したりどうぞ。 index.htmlテンプレ <!DOCTYPE html> <html> <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>Site Title</title> <link rel="icon" href="favicon.ico"> </head> <body> <header> header </header> <main> main </main> <footer> footer </footer> </body> </html> 毎回書くのめんどくさいので、、、 参考記事 head内に書くべきタグの総まとめ 以上です。 変更や追加があったら随時更新します。
自分のメモ用
<meta charset="utf-8">
重要度：★★★ 文字コードを指定するためのもの。 日本語サイトなら必須。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
重要度：★★★ IEには過去バージョンで表示させる「互換モード」があり、デザイン崩れが起きる場合がある。 これを指定すれば、常に「標準モード」で表示される。
<meta name="viewport" content="width=device-width,initial-scale=1" />
重要度：★★★ 「レスポンシブデザイン」のサイトを作成するなら必須。
<title>ページタイトル</title>
重要度：★★★ SEO対策 指定したタイトルを検索結果やブラウザのタブに表示させる。
SEO対策
<meta name="description" content="ページの説明文" />
重要度：★★ そのページがどんな内容なのか１００文字以下で記載。 検索結果の下の説明文に反映される。 （SEO対策には直接的な効果はない。）
<meta property="og:url" content="ページURL" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="ページタイプ" /> <meta property="og:desvription" content="記事の抜粋文" /> <meta property="og:img" content="画像URL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:local" content="ja_JP" /> <!-- twitter card --> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザ名" />
重要度：★★★ facebookやTwitterなどのソーシャルメディアでシェアをされた時に、よくあるやつ。
必須項目 og:title ページタイトル og:type ページ種類（website、blog、video、article など） og:image サムネイル画像 og:url webページのURL
OGPの設定の仕方
<link rel="canonical" href="正規化するURL">
重要度：★★ SEO対策 内容が全く同じページが複数ある場合、検索エンジンからの評価を統一するために使用する。 例：PCとスマホで同じ内容でもURLが違う場合
<link rel="icon" href="./favicon.ico"> <link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png">
重要度：★★
ブラウザのタブに表示やブックマークした時のサイトアイコンとして使用される。
2行目はiPhoneで使用され、Webページをホーム画面に追加した時のアイコン画像として使用される。
2019年版ホームページのタブ画像作成と設定方法まとめ favicon作成
<meta name="msapplication-TileImage" content="画像URL" /> <meta name="msapplication-TileColor" content="カラーコード" />
重要度：★ Windows8~できたピン留機能用のアイコン設定。 タイル画像と背景色を設定できる。
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>ページタイトル</title> <meta name="description" content="ページの説明文" /> <link rel="icon" href="./favicon.ico"> <link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png"> <!-- ogp --> <meta property="og:url" content="ページURL" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="ページタイプ" /> <meta property="og:desvription" content="記事の抜粋文" /> <meta property="og:img" content="画像URL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:local" content="ja_JP" /> <!-- twitter card --> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザ名" />
任意で消したり、追加したりどうぞ。
<!DOCTYPE html> <html> <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>Site Title</title> <link rel="icon" href="favicon.ico"> </head> <body> <header> header </header> <main> main </main> <footer> footer </footer> </body> </html>
毎回書くのめんどくさいので、、、
head内に書くべきタグの総まとめ
以上です。 変更や追加があったら随時更新します。
インクリメンツし過ぎてハミ出ちゃいました、的な！— 無職やめ太郎（本名） (@Yametaro1983) April 11, 2019 バグの内容 Qiitaは通知が100件以上になると、「99+」と表示される仕様がありました。 しかし実はそのアルゴリズム、『トレンド画面』しか効いておらず、他の画面では『素の数字』が表示されていたのです。 プロフィールや記事ページは100を越えて表示され、それ以外は99+となるみたいですね。 pic.twitter.com/BXVZ8gi2Ds— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019 他にも、結構通知を貯金されて気づいていらっしゃる方がいたんですね。Qiitaで有名な@suin さんまで・・・ これやりたくなるの分かるwうっかりクリックして貯めた数百が吹き飛ぶ↓そっとインスペクタ開くって流れ、やったなあ… https://t.co/uT7VnWTAu7— suin❄️PHPでオブジェクト指向 (@suin) April 10, 2019 JS の丸め処理が評価される前は、そのままの数字が出る。閾値は1000なのかな pic.twitter.com/EGRVZJh0eV— Enjoy Hacking! (@zaru) April 10, 2019 『13954件ってなんだよ（羨望）（感動）』 早速Qiitaのコードを解析してみる 【1/2】トレンド画面 【2/2】それ以外の画面 既に構造が変わっていますね。 特にglobalHeaderなるidが、トレンド画面にしか存在していないのが気になります。 多分セレクタミスをしているのでしょうね。 スクリプトを調査するため、Source画面でJSファイルを掘り出してみましょう。 いっぱいありますね！ QiitaはRuby on Railsで作られているので、サーバーが絡んでたら終わりです。 rbファイルとかphpファイルはSourceで確認できないからです。 とりあえず望みに賭けて、それっぽいjsファイルを目星付けてみます。 indexの隣にあったり、社名の入ったCDNの中なんかは当たりが多いですね。 qiita用のCDN・・・これが怪しいですね。早速見てみましょう。 セレクタが不明なので、「99+」で検索してみます。 い ま し た 変数名からして、こいつが99%悪さしてそうですね(99+だけに)。 中のコードはmin(最小化)されているので、beautifyして正体を顕にしてあげましょう 使うサイトはこちら⇛ https://beautifier.io/ これ?を・・・ こう?します！ 変換したらsyntaxの効いているエディタにコピペして、解析を始めてみましょう。 ここの部分ですね。 99<t.unreadNotificationsCount?"99+":t.unreadNotificationsCount unreadNotificationsCountが99より大きい場合、"99+”に書き換える。 それ以外の場合は、unreadNotificationsCountのまま。 この処理が、トレンド画面にしか反映されていないわけです。 トレンド画面以外のページでは、「スキップしている」or「前の処理でエラーを起こしてしまっている」の2パターンが考えられますね。 そしたら色々、前の方の条件式を見てみるか・・・ あ り ま し た やっぱりglobalHeaderじゃないか！ 関数の中まで追うまでもなく、このglobalHeaderが存在しないページでは以降の処理に不具合が出る事が想定されますね。 ここまでの検証はパッと5分程でした。 Qiitaに報告 Qiitaのお問い合わせからバグを報告してみます。 こういうissue文が一番、プログラマーに文才を求められる瞬間ですね。 読み返すと非常に読みづらい・・・githubでこんなissue文書いたら、弾かれそうですね（笑） 結果 2時間で直してくれました。 神対応すぎる、さすがQiita様！ Qiita、通知バグなおってた。運営さん対応がはやい。 pic.twitter.com/biaju0b1Ox— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019 まとめ 全然技術的な話が無くって申し訳ありません。 一番言いたかった事は、そう、冒頭の 「Increments株式会社なのにインクリメントの表示処理バグってる（笑）」 この奇跡ともいえるギャグを広めたかっただけです・・・ 改めて、光速の対応をして頂いたQiita運営様、本当にありがとうございました。 （できれば99+の方ではなく、無制限表示の方が嬉しいです・・・） おまけ 99+じゃなくて、ちゃんとインクリメンツしておくんなはれや、ってことですね！Incrementsだけに！— 無職やめ太郎（本名） (@Yametaro1983) April 11, 2019
インクリメンツし過ぎてハミ出ちゃいました、的な！— 無職やめ太郎（本名） (@Yametaro1983) April 11, 2019
インクリメンツし過ぎてハミ出ちゃいました、的な！
Qiitaは通知が100件以上になると、「99+」と表示される仕様がありました。 しかし実はそのアルゴリズム、『トレンド画面』しか効いておらず、他の画面では『素の数字』が表示されていたのです。
プロフィールや記事ページは100を越えて表示され、それ以外は99+となるみたいですね。 pic.twitter.com/BXVZ8gi2Ds— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019
プロフィールや記事ページは100を越えて表示され、それ以外は99+となるみたいですね。 pic.twitter.com/BXVZ8gi2Ds
他にも、結構通知を貯金されて気づいていらっしゃる方がいたんですね。Qiitaで有名な@suin さんまで・・・
これやりたくなるの分かるwうっかりクリックして貯めた数百が吹き飛ぶ↓そっとインスペクタ開くって流れ、やったなあ… https://t.co/uT7VnWTAu7— suin❄️PHPでオブジェクト指向 (@suin) April 10, 2019
これやりたくなるの分かるwうっかりクリックして貯めた数百が吹き飛ぶ↓そっとインスペクタ開くって流れ、やったなあ… https://t.co/uT7VnWTAu7
JS の丸め処理が評価される前は、そのままの数字が出る。閾値は1000なのかな pic.twitter.com/EGRVZJh0eV— Enjoy Hacking! (@zaru) April 10, 2019
JS の丸め処理が評価される前は、そのままの数字が出る。閾値は1000なのかな pic.twitter.com/EGRVZJh0eV
『13954件ってなんだよ（羨望）（感動）』
既に構造が変わっていますね。 特にglobalHeaderなるidが、トレンド画面にしか存在していないのが気になります。 多分セレクタミスをしているのでしょうね。
スクリプトを調査するため、Source画面でJSファイルを掘り出してみましょう。
いっぱいありますね！ QiitaはRuby on Railsで作られているので、サーバーが絡んでたら終わりです。 rbファイルとかphpファイルはSourceで確認できないからです。
とりあえず望みに賭けて、それっぽいjsファイルを目星付けてみます。 indexの隣にあったり、社名の入ったCDNの中なんかは当たりが多いですね。
qiita用のCDN・・・これが怪しいですね。早速見てみましょう。 セレクタが不明なので、「99+」で検索してみます。
い ま し た
変数名からして、こいつが99%悪さしてそうですね(99+だけに)。 中のコードはmin(最小化)されているので、beautifyして正体を顕にしてあげましょう 使うサイトはこちら⇛ https://beautifier.io/
これ?を・・・
こう?します！
変換したらsyntaxの効いているエディタにコピペして、解析を始めてみましょう。
ここの部分ですね。
99<t.unreadNotificationsCount?"99+":t.unreadNotificationsCount
この処理が、トレンド画面にしか反映されていないわけです。 トレンド画面以外のページでは、「スキップしている」or「前の処理でエラーを起こしてしまっている」の2パターンが考えられますね。
そしたら色々、前の方の条件式を見てみるか・・・ あ り ま し た
やっぱりglobalHeaderじゃないか！ 関数の中まで追うまでもなく、このglobalHeaderが存在しないページでは以降の処理に不具合が出る事が想定されますね。 ここまでの検証はパッと5分程でした。
Qiitaのお問い合わせからバグを報告してみます。
こういうissue文が一番、プログラマーに文才を求められる瞬間ですね。 読み返すと非常に読みづらい・・・githubでこんなissue文書いたら、弾かれそうですね（笑）
2時間で直してくれました。 神対応すぎる、さすがQiita様！
Qiita、通知バグなおってた。運営さん対応がはやい。 pic.twitter.com/biaju0b1Ox— std::がっちょ( ¨̮ ) (@wanotaitei) April 11, 2019
Qiita、通知バグなおってた。運営さん対応がはやい。 pic.twitter.com/biaju0b1Ox
全然技術的な話が無くって申し訳ありません。 一番言いたかった事は、そう、冒頭の
「Increments株式会社なのにインクリメントの表示処理バグってる（笑）」 この奇跡ともいえるギャグを広めたかっただけです・・・
改めて、光速の対応をして頂いたQiita運営様、本当にありがとうございました。 （できれば99+の方ではなく、無制限表示の方が嬉しいです・・・）
99+じゃなくて、ちゃんとインクリメンツしておくんなはれや、ってことですね！Incrementsだけに！— 無職やめ太郎（本名） (@Yametaro1983) April 11, 2019
99+じゃなくて、ちゃんとインクリメンツしておくんなはれや、ってことですね！Incrementsだけに！
macOS Mojaveで画面を目に優しい黒基調にしてくれる「ダークテーマ」が導入されました。 それ以降、設定したテーマに色調を追従させるようなアプリが続々と出てますね。 こうなるとWebアプリやWebサイトもテーマに合わせたくなります。 今回、開発しているWebアプリ（テーマ切り替え機能自体は導入済み）でmacOSテーマに追従しようとして方法を調べたのでまとめます。 CSS Media Queryで取得する方法 Media Queryで利用できるメディア特性として、prefers-color-schemeというものがあります。 これはユーザーが明色か暗色のどちらを求めているかを教えてくれます。 つい先日リリースされたSafari 12.1からデフォルトで有効になっており、Firefoxは67から対応となっています。 Chromeは実装作業中のようです。 実際にCSSで表示を切り替えたい場合は以下のようにすれば良いです。 @media (prefers-color-scheme: light) { body { background-color: white; color: black; } } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } } 実際はこんな感じでCSS変数にまとめると各所の色を一括して変更できるのでおすすめです。 @media (prefers-color-scheme: light) { html { --primary-color: black; --background-color: white; } } @media (prefers-color-scheme: dark) { html { --primary-color: white; --background-color: black; } } html { color: var(--primary-color); background-color: var(--background-color); } JavaScriptで取得する方法 初めてテーマを導入する場合は上記のCSSによる切り替えでいいと思います。 ただJavaScriptによるテーマの切り替えと同時に実装したい場合は、現在の状態をJavaScript側で取得する必要があります。 Media Queryでスタイルを切り替えてwindow.getComputedStyleを使って状態を取得する、という方法でも良いです。 が、OSテーマの切り替え時に即座に反応するためにはポーリングしなくてはならなくなり非効率です。 そこでテーマの切り替えをイベントで取得するためにwindow.matchMediaを使います。 window.matchMediaに通常のMedia Queryの文字列をそのまま渡すとMediaQueryListオブジェクトが手に入ります。 const mql = window.matchMedia('(prefers-color-scheme: dark)') MediaQueryListオブジェクトのmatchesプロパティがMedia Queryがマッチしたかどうかを真偽値で持っているので、 if (window.matchMedia('(prefers-color-scheme: dark)').matches) { /* ダークテーマの時 */ } else { /* ライトテーマの時 */ } とりあえずこれで状態の取得が可能です。 イベントを受け取るためには次のようにします。 // ダークテーマの時にマッチするMediaQueryListオブジェクト const isDark = window.matchMedia('(prefers-color-scheme: dark)') // コールバック関数はMediaQueryListオブジェクトを受け取る function toggleTheme (mql) { if (mql.matches) { /* ダークテーマの時 */ } else { /* ライトテーマの時 */ } } // イベントリスナーを追加 isDark.addListener(toggleTheme) テーマを切り替えるたびにtoggleTheme関数が呼ばれ、マッチ状態に応じてテーマの切り替え処理を実行することができます。 今回私が書いた環境のVue.js+Vuexだとこんな感じです。 export default { name: 'app', methods: { toggleTheme(mql) { if (mql.matches) { this.$store.commit('updateTheme', 'dark') } else { this.$store.commit('updateTheme', 'light') } } }, mounted() { this.$nextTick(() => { const isDark = window.matchMedia('(prefers-color-scheme: dark)') isDark.addListener(this.toggleTheme) }) } } これでどんな感じのテーマ機能が実装できるか置いておきます。 左下の月のアイコンがテーマのトグルボタンですが、JavaScript側にも状態が反映されていることがわかると思います。
macOS Mojaveで画面を目に優しい黒基調にしてくれる「ダークテーマ」が導入されました。 それ以降、設定したテーマに色調を追従させるようなアプリが続々と出てますね。 こうなるとWebアプリやWebサイトもテーマに合わせたくなります。 今回、開発しているWebアプリ（テーマ切り替え機能自体は導入済み）でmacOSテーマに追従しようとして方法を調べたのでまとめます。
Media Queryで利用できるメディア特性として、prefers-color-schemeというものがあります。 これはユーザーが明色か暗色のどちらを求めているかを教えてくれます。 つい先日リリースされたSafari 12.1からデフォルトで有効になっており、Firefoxは67から対応となっています。 Chromeは実装作業中のようです。
prefers-color-scheme
実際にCSSで表示を切り替えたい場合は以下のようにすれば良いです。
@media (prefers-color-scheme: light) { body { background-color: white; color: black; } } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }
実際はこんな感じでCSS変数にまとめると各所の色を一括して変更できるのでおすすめです。
@media (prefers-color-scheme: light) { html { --primary-color: black; --background-color: white; } } @media (prefers-color-scheme: dark) { html { --primary-color: white; --background-color: black; } } html { color: var(--primary-color); background-color: var(--background-color); }
初めてテーマを導入する場合は上記のCSSによる切り替えでいいと思います。 ただJavaScriptによるテーマの切り替えと同時に実装したい場合は、現在の状態をJavaScript側で取得する必要があります。 Media Queryでスタイルを切り替えてwindow.getComputedStyleを使って状態を取得する、という方法でも良いです。 が、OSテーマの切り替え時に即座に反応するためにはポーリングしなくてはならなくなり非効率です。
window.getComputedStyle
そこでテーマの切り替えをイベントで取得するためにwindow.matchMediaを使います。 window.matchMediaに通常のMedia Queryの文字列をそのまま渡すとMediaQueryListオブジェクトが手に入ります。
window.matchMedia
MediaQueryList
const mql = window.matchMedia('(prefers-color-scheme: dark)')
MediaQueryListオブジェクトのmatchesプロパティがMedia Queryがマッチしたかどうかを真偽値で持っているので、
matches
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { /* ダークテーマの時 */ } else { /* ライトテーマの時 */ }
とりあえずこれで状態の取得が可能です。
イベントを受け取るためには次のようにします。
// ダークテーマの時にマッチするMediaQueryListオブジェクト const isDark = window.matchMedia('(prefers-color-scheme: dark)') // コールバック関数はMediaQueryListオブジェクトを受け取る function toggleTheme (mql) { if (mql.matches) { /* ダークテーマの時 */ } else { /* ライトテーマの時 */ } } // イベントリスナーを追加 isDark.addListener(toggleTheme)
テーマを切り替えるたびにtoggleTheme関数が呼ばれ、マッチ状態に応じてテーマの切り替え処理を実行することができます。
toggleTheme
今回私が書いた環境のVue.js+Vuexだとこんな感じです。
export default { name: 'app', methods: { toggleTheme(mql) { if (mql.matches) { this.$store.commit('updateTheme', 'dark') } else { this.$store.commit('updateTheme', 'light') } } }, mounted() { this.$nextTick(() => { const isDark = window.matchMedia('(prefers-color-scheme: dark)') isDark.addListener(this.toggleTheme) }) } }
これでどんな感じのテーマ機能が実装できるか置いておきます。 左下の月のアイコンがテーマのトグルボタンですが、JavaScript側にも状態が反映されていることがわかると思います。
はじめに Markdownのソースコード表示を改善しよう！で preの内容はとてもみやすくなった。 あわせてcodeの内容もQiita風にする。 実装 Qiita風インラインコード背景色 code { background-color:#EEEEEE; } codeタグだけの場合はこれで問題ないが、pre(正しくはpre code)と併用されると preの外観にcodeのスタイルが適用された残念な表示となる。 美しい対処とは言えないが苦肉の策で以下のようにする。 Qiita風のcode、pre両対応スタイル pre { margin-left: 20px; margin-right: 20px; padding: 10px; color:#E3E3E3; background-color:#364549; } pre code { color:#E3E3E3; background-color:#364549; } code { background-color:#EEEEEE; } 結果 定義はやぼったいが、やりたいことはできた。
Markdownのソースコード表示を改善しよう！で preの内容はとてもみやすくなった。 あわせてcodeの内容もQiita風にする。
pre
code
code { background-color:#EEEEEE; }
codeタグだけの場合はこれで問題ないが、pre(正しくはpre code)と併用されると preの外観にcodeのスタイルが適用された残念な表示となる。
美しい対処とは言えないが苦肉の策で以下のようにする。
pre { margin-left: 20px; margin-right: 20px; padding: 10px; color:#E3E3E3; background-color:#364549; } pre code { color:#E3E3E3; background-color:#364549; } code { background-color:#EEEEEE; }
定義はやぼったいが、やりたいことはできた。
印刷用のレイアウトを調整して欲しい 紙に印刷… まだそんなレガシーな技術を使う人類が居るのか… と愚痴ってる場合ではありません。 やって欲しいと言われたらやるのです。 じゃぁ実際に印刷プレビューを見てみよう まずは現状の確認から <div id="hitotume"> <br>1 <br>2 <br>3 </div> <div id="hutatume"> <br>4 <br>5 <br>6 </div> <div id="mittume"> <br>7 <br>8 <br>9 </div> 例としてこんな感じのマークアップです。 で印刷プレビューを見てみると ---page1---------------------------------- 1 2 3 4 5 ---page2---------------------------------- 6 7 8 9 という感じにhutatumeの要素がpage1とpage2に分断されてしまいました。 これでは視認性が悪く、ページの把握に手間取ります。 じゃぁどうするのか cssにはプリンターで印刷する時に便利なプロパティがあります。 break-before break-after break-inside の３つです。 このプロパティはページの区切りを制御します。 それぞれ解説します。 break-before MDN web docs:break-before このプロパティを指定された要素の前にページを区切るか否かを指定します。 break-before:autoは初期値、 break-before:avoidは区切るのを禁止、 break-before:allは強制的に区切ります。 今回の例なら hutatumeにbreak-before:all を指定すると ---page1---------------------------------- 1 2 3 ---page2---------------------------------- 4 5 6 7 8 ---page3---------------------------------- 9 となります。 hutatumeの前である3と4の間でページが区切られます。 break-after MDN web docs:break-after このプロパティを指定された要素の後にページを区切るか否かを指定します。 break-after:autoは初期値、 break-after:avoidは区切るのを禁止、 break-after:allは強制的に区切ります。 今回の例なら hutatumeにbreak-after:all を指定すると ---page1---------------------------------- 1 2 3 4 5 ---page2---------------------------------- 6 ---page3---------------------------------- 7 8 9 となります。 hutatumeの後である6と7の間でページが区切られます。 break-inside MDN web docs:break-inside このプロパティを指定された要素がページに区切られるか否かを指定します。 break-inside:autoは初期値、 break-inside:avoidは区切られるのを禁止します。 今回の例なら hitotume、hutatume、mittumeにそれぞれbreak-inside:avoid を指定すると ---page1---------------------------------- 1 2 3 ---page2---------------------------------- 4 5 6 ---page3---------------------------------- 7 8 9 となります。 それぞれの要素にbreak-inside:avoidを指定しているので 要素の間でページが区切られることはないようにレイアウトされます。 結局どのように使えばいいの？ 「あ～、ココでセクションの終わりだからページを区切りたいな」 って時はbreak-afterにallを指定。 「ココからセクションが始まるからページの始まりにしたいな」 って時はbreak-beforeにallを指定。 「このセクションは2ページに跨って印刷されたくないな」 って時はbreak-insideにavoidを指定。 って感じに使えば良い感じにレイアウトされると思います。 編集後記 入社9日目 要素をページに区切られないようにするためにめっちゃ調べました。 多くのサイトはbreak-beforeとbreak-afterは説明してくれるんだけど 求めていたbreak-insideを説明してくれるサイトはごく僅かでした…。 でもいくらメディアクエリでprintを指定してCSSを書いてレイアウト整えても ブラウザ間の印刷プレビューに差がありすぎて吐きます。
紙に印刷… まだそんなレガシーな技術を使う人類が居るのか… と愚痴ってる場合ではありません。 やって欲しいと言われたらやるのです。
まずは現状の確認から
<div id="hitotume"> <br>1 <br>2 <br>3 </div> <div id="hutatume"> <br>4 <br>5 <br>6 </div> <div id="mittume"> <br>7 <br>8 <br>9 </div>
例としてこんな感じのマークアップです。 で印刷プレビューを見てみると
---page1---------------------------------- 1 2 3 4 5 ---page2---------------------------------- 6 7 8 9
という感じにhutatumeの要素がpage1とpage2に分断されてしまいました。 これでは視認性が悪く、ページの把握に手間取ります。
hutatume
cssにはプリンターで印刷する時に便利なプロパティがあります。 break-before break-after break-inside の３つです。 このプロパティはページの区切りを制御します。 それぞれ解説します。
break-before
break-after
break-inside
MDN web docs:break-before このプロパティを指定された要素の前にページを区切るか否かを指定します。
break-before:autoは初期値、 break-before:avoidは区切るのを禁止、 break-before:allは強制的に区切ります。
break-before:auto
break-before:avoid
break-before:all
今回の例なら hutatumeにbreak-before:all を指定すると
---page1---------------------------------- 1 2 3 ---page2---------------------------------- 4 5 6 7 8 ---page3---------------------------------- 9
となります。 hutatumeの前である3と4の間でページが区切られます。
MDN web docs:break-after このプロパティを指定された要素の後にページを区切るか否かを指定します。
break-after:autoは初期値、 break-after:avoidは区切るのを禁止、 break-after:allは強制的に区切ります。
break-after:auto
break-after:avoid
break-after:all
今回の例なら hutatumeにbreak-after:all を指定すると
---page1---------------------------------- 1 2 3 4 5 ---page2---------------------------------- 6 ---page3---------------------------------- 7 8 9
となります。 hutatumeの後である6と7の間でページが区切られます。
MDN web docs:break-inside このプロパティを指定された要素がページに区切られるか否かを指定します。
break-inside:autoは初期値、 break-inside:avoidは区切られるのを禁止します。
break-inside:auto
break-inside:avoid
今回の例なら hitotume、hutatume、mittumeにそれぞれbreak-inside:avoid を指定すると
hitotume
mittume
---page1---------------------------------- 1 2 3 ---page2---------------------------------- 4 5 6 ---page3---------------------------------- 7 8 9
となります。 それぞれの要素にbreak-inside:avoidを指定しているので 要素の間でページが区切られることはないようにレイアウトされます。
「あ～、ココでセクションの終わりだからページを区切りたいな」 って時はbreak-afterにallを指定。
all
「ココからセクションが始まるからページの始まりにしたいな」 って時はbreak-beforeにallを指定。
「このセクションは2ページに跨って印刷されたくないな」 って時はbreak-insideにavoidを指定。
avoid
って感じに使えば良い感じにレイアウトされると思います。
入社9日目 要素をページに区切られないようにするためにめっちゃ調べました。 多くのサイトはbreak-beforeとbreak-afterは説明してくれるんだけど 求めていたbreak-insideを説明してくれるサイトはごく僅かでした…。 でもいくらメディアクエリでprintを指定してCSSを書いてレイアウト整えても ブラウザ間の印刷プレビューに差がありすぎて吐きます。
print
はじめに CSSのライブラリAnimate.cssを使えば、簡易的なアニメーションは簡単に実装する事ができるらしい。 公式サイト、Downloadはこちら See the Pen yrbMyB by szaizen (@szaizen) on CodePen. ？！？！？！？！？！ めっちゃ簡単にできたよ（ ＾ω＾） CSSだけのライブラリって使いやすくていいですね（震え声） 初期準備 使用するにはまずlinkタグでライブラリを読み込みます。 ダウンロードして呼び出しても良し、下記をコピーするだけでも良し。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> 使い方 あとは、使いたいタグに animatedクラスと好きな動きのクラスをつけるだけ。 動きは公式サイトから試すことができます。 例えばrollInを選んでAnimate itボタンを押すと上の文字が動きます。これがrollInクラスの動き。 この動き使いたい！っていう時は <div class="animated rollIn">動かしたい文字</div> この記述でOK。 他の機能 無限ループ 他にも、ずーっと同じ動きをさせておきたい時は infiniteクラスをつけると繰り返してくれる。 最後に こんな簡単に使えて、軽量なCSSライブラリ、他にもたくさんあるみたいなので色々使ってみようと思います！！ See the Pen Animate.css by szaizen (@szaizen) on CodePen.
CSSのライブラリAnimate.cssを使えば、簡易的なアニメーションは簡単に実装する事ができるらしい。 公式サイト、Downloadはこちら
See the Pen yrbMyB by szaizen (@szaizen) on CodePen.
？！？！？！？！？！ めっちゃ簡単にできたよ（ ＾ω＾） CSSだけのライブラリって使いやすくていいですね（震え声）
使用するにはまずlinkタグでライブラリを読み込みます。 ダウンロードして呼び出しても良し、下記をコピーするだけでも良し。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
あとは、使いたいタグに animatedクラスと好きな動きのクラスをつけるだけ。 動きは公式サイトから試すことができます。 例えばrollInを選んでAnimate itボタンを押すと上の文字が動きます。これがrollInクラスの動き。
この動き使いたい！っていう時は <div class="animated rollIn">動かしたい文字</div> この記述でOK。
<div class="animated rollIn">動かしたい文字</div>
他にも、ずーっと同じ動きをさせておきたい時は infiniteクラスをつけると繰り返してくれる。
こんな簡単に使えて、軽量なCSSライブラリ、他にもたくさんあるみたいなので色々使ってみようと思います！！
See the Pen Animate.css by szaizen (@szaizen) on CodePen.
最近、cssに外から任意の値を与えて表示を弄れるという事に気付いたので、備忘録として。 cssには変数の仕組みがあって、定義を纏める事が出来る。 test.css :root { --color: red; } div { color: white; background-color: var(--color) } これを、htmlから使うと test1.html <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div>赤</div> </body> </html> こうなる でもこれ、css内で変数として使いまわせるってだけじゃなくて、html側から直接スタイル指定して、変数の上書きも出来る つまり以下の様なhtmlであれば test2.html <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div>赤</div> <div style="--color: blue;">青</div> <div style="--color: gold;">金</div> </body> </html> こうなる この仕組みの何が嬉しいかというと、例えば、ユーザー毎に画面デザインを変えたい様な場合に、直接htmlでスタイルを弄ってしまうのではなく、あくまでデザインの指定はcssに寄せたままで値だけを切り替えるのを、htmlとcss間のやり取りだけで実現出来る所。 直接スタイルを弄るだと（<div style="background-color: blue;">みたいな形）、同じスタイルの指定がcssとhtmlで重複してしまうけれど、値だけ渡せれば、デザインはcssで決定するという原則を、ある程度守り続ける事が出来る。 さらにこの実現において、javascriptを通さずにいられる。 デザインはデザインの問題として完結出来るなら、それに越したことは無いので、こうやって閉じ込めてしまえると、気持ちがいい。 rails/haml/scssのアプリで動的に表示を切り替えるのに、大変お世話になりました。
最近、cssに外から任意の値を与えて表示を弄れるという事に気付いたので、備忘録として。
cssには変数の仕組みがあって、定義を纏める事が出来る。
:root { --color: red; } div { color: white; background-color: var(--color) }
これを、htmlから使うと
<html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div>赤</div> </body> </html>
こうなる
でもこれ、css内で変数として使いまわせるってだけじゃなくて、html側から直接スタイル指定して、変数の上書きも出来る つまり以下の様なhtmlであれば
<html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div>赤</div> <div style="--color: blue;">青</div> <div style="--color: gold;">金</div> </body> </html>
この仕組みの何が嬉しいかというと、例えば、ユーザー毎に画面デザインを変えたい様な場合に、直接htmlでスタイルを弄ってしまうのではなく、あくまでデザインの指定はcssに寄せたままで値だけを切り替えるのを、htmlとcss間のやり取りだけで実現出来る所。 直接スタイルを弄るだと（<div style="background-color: blue;">みたいな形）、同じスタイルの指定がcssとhtmlで重複してしまうけれど、値だけ渡せれば、デザインはcssで決定するという原則を、ある程度守り続ける事が出来る。 さらにこの実現において、javascriptを通さずにいられる。 デザインはデザインの問題として完結出来るなら、それに越したことは無いので、こうやって閉じ込めてしまえると、気持ちがいい。
<div style="background-color: blue;">
rails/haml/scssのアプリで動的に表示を切り替えるのに、大変お世話になりました。
はじめまして プログラミングとは全く関係のない仕事についています。 柔道整復師というやつです。 仕事内容として接骨院で捻挫などを治療する人です。 プログラマーさんだったら、腰痛などでお世話になっているかたも多いんじゃないでしょうか。 なぜそんなやつがプログラミングを勉強しようかなと思った？と思われるんですが、 ちょっと教育関係の仕事もやってた過去もあり、教育のプログラムを作れない方と思ったわけです。 実質今、中高生や英会話などのプログラムはいっぱい出ているけれども実際こういうローカル？に近い仕事の勉強方法なんてあんまり出てこないわけです。 ほとんど”柔道整復師”というキーワードを調べても、国家試験か求人くらいしか出てこないんですよ。 学生時代の自分はどうしても楽をしたいなーと思ってても、過去問の本や教科書くらいしか勉強する道具がないんですよね。（ほんの少し国家試験アプリとかでてるけど、使いづらい） 今は、いろんなスマホでのツールがいっぱいありますけど、それを駆使して使うような学生も未だわずかなんですよね。（せいぜい教科書を写メってアプリで保存するくらい） 教員側もたかをくくってるのか実際最終的には過去問を解けば問題ない。 というなもので変化がないんですよね。 ならば、ネット上で学生が簡単に使えるようなツールを使ってしまえば、全体的に水準が高まるんじゃないかなと思ってるんですよね。 そんなこんなでとりあえず今は仕事の合間をぬってProgateを使って初心者講座をやってる次第であります。 HTML・CSSとPHPをやってる次第であります。 正直いえば、本格的なプログラマーさんからはそんなちまちまやってたらできるものもできないと思われても仕方ないと思いますが、一生懸命やっていきたいなと思います。 実際にやりたいことは、4択問題の作成プログラムを作りたいなと思ってます。 よくjavascriptで自動ツールがあると思いますが、もうちょっと分野別だったり文字検索だったりタグ付け、コメントができる機能が欲しいなと思ってます。 こんな自分ですが、何かしらアドバイスいただけたら幸いです。
はじめまして プログラミングとは全く関係のない仕事についています。 柔道整復師というやつです。 仕事内容として接骨院で捻挫などを治療する人です。 プログラマーさんだったら、腰痛などでお世話になっているかたも多いんじゃないでしょうか。
なぜそんなやつがプログラミングを勉強しようかなと思った？と思われるんですが、 ちょっと教育関係の仕事もやってた過去もあり、教育のプログラムを作れない方と思ったわけです。
実質今、中高生や英会話などのプログラムはいっぱい出ているけれども実際こういうローカル？に近い仕事の勉強方法なんてあんまり出てこないわけです。 ほとんど”柔道整復師”というキーワードを調べても、国家試験か求人くらいしか出てこないんですよ。
学生時代の自分はどうしても楽をしたいなーと思ってても、過去問の本や教科書くらいしか勉強する道具がないんですよね。（ほんの少し国家試験アプリとかでてるけど、使いづらい） 今は、いろんなスマホでのツールがいっぱいありますけど、それを駆使して使うような学生も未だわずかなんですよね。（せいぜい教科書を写メってアプリで保存するくらい）
教員側もたかをくくってるのか実際最終的には過去問を解けば問題ない。 というなもので変化がないんですよね。
ならば、ネット上で学生が簡単に使えるようなツールを使ってしまえば、全体的に水準が高まるんじゃないかなと思ってるんですよね。
そんなこんなでとりあえず今は仕事の合間をぬってProgateを使って初心者講座をやってる次第であります。 HTML・CSSとPHPをやってる次第であります。
正直いえば、本格的なプログラマーさんからはそんなちまちまやってたらできるものもできないと思われても仕方ないと思いますが、一生懸命やっていきたいなと思います。
実際にやりたいことは、4択問題の作成プログラムを作りたいなと思ってます。 よくjavascriptで自動ツールがあると思いますが、もうちょっと分野別だったり文字検索だったりタグ付け、コメントができる機能が欲しいなと思ってます。
こんな自分ですが、何かしらアドバイスいただけたら幸いです。
