練習

まずは書き出し方法の整理のみ。

今後実施予定

• 自己紹介
• 始めた動機
• ロードマップ

メディアクエリの使い方

個人アプリでレスポンシブ対応が必要だったので、その使い方を記事にまとめました。

index.blade.php

<div class = "content">
    @foreach($posts as $post)
      <img src="/storage/{{$post->image}}" class="image" width=293px height=293px>
    @endforeach
  </div>

index.css

@media (max-width: 1420px) {
  .content {
    margin: 90px 218px 0;
  }
 }

 @media (max-width: 1420px) {
  .image {
    width: 280px;
    height: 280px;
  }
 }

 @media (max-width: 1340px) {
  .content {
    margin: 90px 200px 0;
  }
 }

 @media (max-width: 1340px) {
  .image {
    width: 260px;
    height: 260px;
  }
 }

 @media (max-width: 1260px) {
  .content {
    margin: 90px 180px 0;
  }
 }

 @media (max-width: 1260px) {
  .image {
    width: 240px;
    height: 240px;
  }
 }

こんな感じで要素の幅によって中身のサイズを調整してあげる。
検証機能を使えば、幅が簡単にわかるので、それを見ながら調整していけば、
自然にビューのレスポンシブができるようになります！

httpリクエストでHTMLのページを取得して正規表現でタイトルを引っ張り出します。Node.jsを使う方法とシェルスクリプト(Bash)を使う方法で出来たので書き残しておきます。

ちなみに、Node.jsもシェルスクリプトも初心者です。

環境
Mac OS 10.14.6

Node.js

Node.jsからダウンロードします。

$ node -v
v12.18.1

requestモジュール

Node.js標準でもHTTPリクエストできるそうですがrequestモジュールを使うと楽、らしい。

$ npm install request

これはできるだけ上位のディレクトリでやったほうがいい。インストールしたところ以下でrequestが使えるがそれより上のディレクトリでは使えない。（個人的な実験の結果）（npmについてのまとめ - Qiitaに詳しいことが書いてある（グローバルインストールとやらに失敗したので上の階層に入れた））

実装

get_title.js

var request = require('request');

var URL = process.argv[2];

var re_title = RegExp("(?<=<title.*>).*(?=</title>)")

function callback(error, response, body) {
  if (!error && response.statusCode == 200) {
    var title = re_title.exec(body);
    if(!title){
      console.log("No title")
    }else{
      console.log(title[0]);
    }
  }else{
    console.log("Error!");
  }
}

request(URL, callback);

• 1行目 requestモジュールを使えるようにする
• 3行目 コマンドライン引数からURLを取得する
• 5行目 title要素を取得する正規表現（後述）
• 7行目~ requestの結果に対するコールバック関数（後述）
• 最終行 request実行

実行

$ node get_title.js https://...
タイトル

正規表現

ここで使う正規表現は

"(?<=<title.*>).*(?=</title>)"

です。（参考 正規表現 - JavaScript | MDN）

• (?<=<title.*>): これは「後読み」と呼ばれ、<title.*>に続くものをマッチさせますが<title.*>自体はマッチしません
• .*: これは「任意の文字の(.)」「0回以上の繰り返し(*)」にマッチします
• (?=</title>): これは「先読み」と呼ばれ、</title>が後に続くものをマッチさせますが</title>自体はマッチしません

この正規表現でHTMLを探索することでtitle要素の中身にマッチさせることができます。ちなみに、title開始タグを見つける「後読み」部分が<title>ではなく<title.*>を使っているのは、title開始タグにオマケがついているページがあったからです。ここ→request - npmなんですけど、ソースを見ると

<title data-react-helmet="true">request  -  npm</title>

って書いてあります。何のこっちゃわからないのですが。

requestのコールバック関数

そんなに深入りしないです。

リクエストがエラー吐いたりステータスコードが200じゃなかったら"Error!"と出力して終わる。
OKだったら正規表現でbodyから.exec()メソッドで最初にマッチするところを探して結果をtitleに入れる。
マッチすればtitle[0]がタイトルだし、マッチしなければnullが返ってくるので"No title"と出力。

まあ基本正常に返ってくることを期待しているので。

Bash

こっちのほうが、複雑だが面白かった。

実装

get_title.sh

#!/bin/bash

read URL

#RegExp='s/.*<title.*>\(.*\)<\/title>.*/\1/p'
RegExp='/.*<title.*>\(.*\)<\/title>.*/{s/.*<title.*>\(.*\)<\/title>.*/\1/p;q;}'

title=`curl -s $URL | sed -n $RegExp`

echo -e "\n[$title]($URL)\n" #markdown式

• 1行目 おまじない。よくわからんけど書いとけ
• 3行目 標準入力からURLを受け取る
• 5,6行目 sedに送るコマンド
• 8行目 curlとsedでページタイトルの取得
• 10行目 出力（markdown式にカスタマイズ）

実行

$ bash get_title.sh
https://qiita.com/

[Qiita](https://qiita.com/)

curl

$ curl -s {URL}

で{URL}の中身であるHTML文書を取得。さらにパイプで次のsedコマンドに流している。-sは進捗の表示をさせないオプション

sed

パイプでやるという条件を揃えて書くと

#!/bin/bash
$ echo -e {複数行文字列} | sed -n s/{置換前}/{置換後}/p

で、{複数行文字列}から{置換前}を含む行があれば{置換後}に置き換えて出力。-nは、デフォルトでは置換の有無にかかわらず毎行出力していたのを無効にするオプション。pは明示的に出力するフラグ

#!/bin/bash
$ echo -e "hogehoge\nfugafuga" | sed -n "s/g.*g/QQ/p"
hoQQe
fuQQa

5行目のコマンド

s/.*<title.*>\(.*\)<\/title>.*/\1/p

大枠 = s/{置換前}/{置換後}/p
{置換前} = .*<title.*>\(.*\)<\/title>.*
{置換後} = \1

• {置換前}: 「任意文字列(.*)」「<title.*>」「.*」「<\/title>」「.*」の文字列を見つける。真ん中は「\(.*\)」としてエスケープつきの括弧で囲むことでグループ化して一時保存しています
• {置換後}: 先ほど一時保存したところを\1で呼び出しています

#!/bin/bash
$ echo -e "hogehoge\nfugafuga" | sed -n "s/.*g\(.*\)g.*/\1/p"
eho
afu

6行目のコマンド

/.*<title.*>\(.*\)<\/title>.*/{s/.*<title.*>\(.*\)<\/title>.*/\1/p;q;}

大枠 = /{文字列}/コマンド
文字列 = .*<title.*>\(.*\)<\/title>.*（さっきの探索文字列）
コマンド = {s/.*<title.*>\(.*\)<\/title>.*/\1/p;q;}

• 大枠: {文字列}がある行に対してコマンドを実行
• コマンド: {}で囲んで複文にする。前半s/.*<title.*>\(.*\)<\/title>.*/\1/p;は先述の通りの置換&表示コマンド。後半q;はsedコマンドの終了。

これがなぜ欲しいかというと、request - npmの中になんだか知らんがtitle要素が出現するところが2行あるので。1回マッチしたら{変換&終了}する。

その他

sedの後一回変数に入れたいなぁと思って色々調べたら、式自体をバッククォートで囲んで代入すれば良いとのこと。

bashで改行付きでechoするためには-eオプションが必要→echo -e "\n[$title]($URL)\n"

おしまい

bashの方が色々設定とかせずにすみそうで良いな

参考

• request - npm
• コマンドライン引数を処理する · JavaScript Primer #jsprimer
• 正規表現 - JavaScript | MDN
• 初心者向けシェルスクリプトの基本コマンドの紹介 - Qiita
• sed | テキストの置換処理を得意とするスクリプト言語
• sedでディレクトリ配下のファイルにある「特定文字の直後にある大文字を小文字にする」方法 - Qiita
• sedコマンドまとめ - グローバルプロジェクトマネージャーへの道
• [Bash] クォートの種類と変数への格納 - Qiita

ナビゲーションバーをクリックした箇所にスライドさせてグラデーションをかける

■ポイント
・CSSでグラデーションの処理（linear-gradientを使用）
・JavaScriptのdocument.querySelectorで要素を取得
・offsetLeftでクリックした対象要素の左からの幅をpx単位で（左）へ移動させる
・offsetWidthでクリックした対象要素のWidth（幅）を決定
（説明がわかりずらいかもしれません・・・検証ツールで幅の変化等を見て頂くとわかりやすいです）
offsetLeftの説明はこちらのサイト様を参考にいたしました（わかりやすかった、ありがとうございます）
https://syncer.jp/javascript-reference/element/offsetleft
念の為こちらも載せときます↓
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
・addEventListenerでクリックされた場所に反応するように指定
・そしてトップバーだけじゃ寂しいのでビデオ背景載せてます

■出来たサイトの動き

■コード

HTML

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>グラデーションナビバー</title>
    <link rel="stylesheet" href="30_8.css">
</head>
<body>
    <div class="nav-top">
        <nav>
            <div id="marker"></div>
            <a href="#">Home</a>
            <a href="#">Company</a>
            <a href="#">Work</a>
            <a href="#">Sample</a>
            <a href="#">Team</a>
            <a href="#">Contact</a>
        </nav>
    </div>
    <script type="text/javascript">
        const marker = document.querySelector('#marker');
        const item = document.querySelectorAll('nav a');

        function indicator(e){
            marker.style.left = e.offsetLeft+"px";
            marker.style.width = e.offsetWidth+"px";
        }

        item.forEach(link => {
            link.addEventListener('click', (e)=>{
                indicator(e.target);
            })
        })
    </script>

<video src="goomalling-storm.mp4" loop="" autoplay="" muted=""  width="100%" class="bgv"></video>
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.nav-top
{
    display: flex;
    justify-content: center;
    background-color:black;
}
nav
{
    position: relative;
    display: flex;
}
nav a
{
    position: relative;
    margin: 10px 20px;
    padding: 5px;
    font-size: 2em;
    color: white;
    text-decoration: none;
}
nav #marker
{
    position: absolute;
    left: 0;
    height: 100%;
    width: 0;
    opacity: 0.5;
    background: linear-gradient(
    black,
    rgb(128, 0, 113),
    blue,
    black);
    bottom: 0px;
    transition: 0.5s;
    border-radius: 4px;
}

■苦労した点
　・querySelectorとgetElementByIdの使い分け

■疑問点とやりたかったこと
　・レスポンシブ最適化までいけませんでした。
　・レスポンシブ最適化のため、少しいじりましたが、今の知識レベルでは時間がかかりそうだったため、タイミングを改めて実装してみようと思います。

以上となります。

ここは違う、ここはこうしたほうが良いかも？といったものございましたらご指摘いただけますと幸いです。
最後までみていただき、ありがとうございます。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

100日チャレンジの353日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
353日目は、

おはようございます
昨日1日でやったこと⇩
●ブログ1記事作成
●プログラミング学習353日目　2.0h
・ポートフォリオ一部修正

モヤモヤがあってあんまり集中できませんでした
あと、寝落ちしました#早起きチャレンジ#100DaysOfCode

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 22, 2020