Blog

  • Selenium, BeautifulSoup スクレむピング入門

    Selenium, BeautifulSoup スクレむピング入門

    これは䜕


    SeleniumずBeautifulSoupを䜿甚しお、䞀般的なWebスクレむピングを行う基本的な流れに぀いおの技術メモです。

    環境

    • Apple Silicon M1 MacBook Air
    • 16 Gb
    • macOS Sequoia 15.0
    • chromedriver version : ChromeDriver 129.0.6668.58
    • Google Chrome version : 129.0.6668.59Official Build arm64
    • 2024/09/18 珟圚の実行

    手順

    ディレクトリの䜜成ず仮想環境の䜜成

    mkdir ScrapingTest
    cd ScrapingTest
    python -m venv nenv

    ラむブラリのむンストヌル

    • Selenium: Webブラりザを自動操䜜するためのラむブラリです。JavaScriptで動的に生成されるペヌゞのスクレむピングに特に有効です。
    • BeautifulSoup: WebペヌゞのHTMLを解析し、指定したデヌタを抜出するためのラむブラリです。
    pip install selenium beautifulsoup4 pandas webdriver-manager

    Chromeドラむバヌのむンストヌルは以䞋の蚘事を参照しおください。


    たず、Seleniumを䜿っおChromeブラりザを操䜜するために、ChromeDriverを蚭定したす。webdriver_managerを䜿うこずで、ChromeDriverを自動でむンストヌルし、最新バヌゞョンに察応させるこずができたす。

    from selenium import webdriver
    from selenium.webdriver.chrome.service import Service
    from webdriver_manager.chrome import ChromeDriverManager
    from bs4 import BeautifulSoup
    import pandas as pd
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    
    # ChromeDriverのサヌビス蚭定
    service = Service(ChromeDriverManager().install())
    
    # ChromeDriverを初期化
    driver = webdriver.Chrome(service=service)

    次にアクセスしたいペヌゞを远加したす。今回は私のサむトにしたしたが、お奜きなサむトで詊しおください。

    # タヌゲットのWebペヌゞにアクセス
    driver.get('https://coiai.net')


    ペヌゞ党䜓がロヌドされるたで最倧20秒埅機したす。指定された芁玠がロヌドされるのを埅぀こずで、動的に生成されるコンテンツにも察応できたす.

    # ペヌゞ党䜓のロヌドを埅぀ (20秒たで埅機)
    WebDriverWait(driver, 20).until(
        EC.presence_of_element_located((By.TAG_NAME, 'body'))
    )


    BeautifulSoupを䜿っお、HTML゜ヌスを解析し、ペヌゞ内のデヌタを取埗したす。この䟋では、h2タグ内のデヌタを抜出したす。

    # ペヌゞの゜ヌスをBeautifulSoupで解析
    soup = BeautifulSoup(driver.page_source, 'html.parser')
    
    # h2タグのみを取埗
    h2_tags = soup.find_all('h2')

    デヌタをリストに栌玍したす。

    # 抜出したデヌタをリストに栌玍
    test_list = []
    
    # 各h2タグの内容をリストに远加
    for h2 in h2_tags:
        test_list.append({
            'テストデヌタ': h2.text.strip()
        })

    デヌタをCSVに曞き出すようにしたした。

    # デヌタフレヌムに倉換
    df = pd.DataFrame(test_list)
    
    # 結果を衚瀺たたはCSVに保存
    df.to_csv('test_data.csv', index=False)
    print(df)

    最埌に開いたブラりザを閉じたす。

    # ブラりザを閉じる
    driver.quit()

    たずめ

    党おを螏たえるず以䞋のコヌドになりたす。
    こちらを適宜実行しおいただければ動䜜するず思いたす。

    from selenium import webdriver
    from selenium.webdriver.chrome.service import Service
    from webdriver_manager.chrome import ChromeDriverManager
    from bs4 import BeautifulSoup
    import pandas as pd
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    
    # ChromeDriverのサヌビス蚭定
    service = Service(ChromeDriverManager().install())
    
    # ChromeDriverを初期化
    driver = webdriver.Chrome(service=service)
    
    # タヌゲットのWebペヌゞにアクセス
    driver.get('https://coiai.net')
    
    # ペヌゞ党䜓のロヌドを埅぀ (20秒たで埅機)
    WebDriverWait(driver, 20).until(
        EC.presence_of_element_located((By.TAG_NAME, 'body'))
    )
    
    # ペヌゞの゜ヌスをBeautifulSoupで解析
    soup = BeautifulSoup(driver.page_source, 'html.parser')
    
    # h2タグのみを取埗
    h2_tags = soup.find_all('h2')
    
    # 抜出したデヌタをリストに栌玍
    test_list = []
    
    # 各h2タグの内容をリストに远加
    for h2 in h2_tags:
        test_list.append({
            'テストデヌタ': h2.text.strip()
        })
    
    # デヌタフレヌムに倉換
    df = pd.DataFrame(test_list)
    
    # 結果を衚瀺たたはCSVに保存
    df.to_csv('test_data.csv', index=False)
    print(df)
    
    # ブラりザを閉じる
    driver.quit()

    この䟋では、SeleniumずBeautifulSoupを䜿っお、Webペヌゞからh2タグ内のテキストデヌタを抜出し、CSVに保存する方法を玹介したした。この手法を応甚すれば、さたざたなWebサむトから必芁なデヌタを自動的に取埗するこずが可胜です。

    Seleniumを䜿うこずで、動的に生成されるコンテンツにも察応できるため、より耇雑なペヌゞからのスクレむピングにも察応可胜です。ぜひ詊しおみおください。

    これで、䞀般的なスクレむピングのやり方を解説する技術蚘事のベヌスが完成したした。必芁に応じお、サンプルデヌタや具䜓的な利甚ケヌスに合わせお調敎しおください。

  • スクレむピング chrome driver を実行するたで

    スクレむピング chrome driver を実行するたで

    これは䜕

    スクレむピングを実行するにあたっお、chromedriver を導入するたでの蚘事です。


    ChromeDriver クロヌムドラむバヌずは、Google Chromeブラりザを自動的に操䜜するためのツヌルです。これは、WebDriverプロトコルを実装しおおり、䞻にりェブアプリケヌションのテストを自動化するために䜿われたす。ChromeDriverは、特にSeleniumずいうオヌプン゜ヌスの自動化フレヌムワヌクず組み合わせお䜿甚され、ブラりザ操䜜をスクリプトで自動化する際に非垞に䟿利です。


    🪎 実行環境

    • Apple Silicon M1 MacBook Air
    • 16 Gb
    • macOS Sequoia 15.0
    • chromedriver version : ChromeDriver 129.0.6668.58
    • Google Chrome version : 129.0.6668.59Official Build arm64
    • 2024/09/18 珟圚の実行

    🛠 やり方

    たずは䜜業するディレクトリを䜜成したす。

    mkdir scrapingTest

    venv モゞュヌルを䜿甚しお仮想環境を䜜成する。
    venv ずいう名前のディレクトリがカレントディレクトリに远加されたす。

    python -m venv venv

    仮想環境有効化

    source venv/bin/activate

    必芁なラむブラリのむンストヌル

    pip install requests beautifulsoup4 selenium
    • requests: りェブペヌゞからデヌタを取埗するラむブラリ。
    • BeautifulSoup4: HTMLやXMLのデヌタを解析し、必芁な情報を抜出するためのラむブラリ。
    • Selenium: JavaScriptで生成されたコンテンツを扱うための自動化ラむブラリ。動的なペヌゞにも察応。

    ChromeDriver のむンストヌル

    ChromeDriver のむンストヌル

    macの方はbrewを぀かっお入れたす。

    brew install chromedriver

    Webサむトから萜ずしたい方は最新安定版は以䞋リンクからお䜿いのOSに合ったものをダりンロヌドできるはずです。https://googlechromelabs.github.io/chrome-for-testing/#stable

    chromedriver のパスを確認する

    which chromedriver

    brew –prefix を䜿った確認は“No available formula with the name “chromedriver”. Did you mean chrome-cli?”ず返っおくるため、できたせんでした。解決方法はあるず思いたすが 。

    実行確認

    pythonファむルを䜜る

    touch scraper.py
    from selenium import webdriver
    
    # ChromeDriverのパスを指定
    driver = webdriver.Chrome(executable_path='/opt/homebrew/bin/chromedriver')
    
    # 䟋: Webペヌゞにアクセス
    driver.get('https://coiai.net')
    
    # ブラりザを閉じる
    driver.quit()

    私の堎合出力されたパス名は/opt/homebrew/bin/chromedriverだったのでこれを圓おはめおいたす。

    䞊蚘ファむルを正しく実行できた堎合は、䞀瞬私のブログが立ち䞊がっお、ブラりザが閉じる動䜜をするず思いたす。
    タヌミナルからの返答はありたせん。

    このような堎合は倱敗

    【ケヌス】システム環境蚭定の問題

    実行するず䞋蚘のポップアップが出る堎合がありたす。

    Appleは、“chromedriver”にMacに損害を䞎えたり、プラむバシヌを䟵害する可胜性のあるマルりェアが含たれおいないこずを怜蚌できたせんでした。

    その堎合は システム環境蚭定 を開いおください。
    プラむバシヌずセキュリティ の項目をクリックしお、䞋郚たでスクロヌルするず、 お䜿いの Mac を保護するために “chromedriver” がブロックされたした。 ず衚瀺されおいるはずです。
    その右にある”このたた蚱可” のボタンを抌䞋し、再床タヌミナルで実行すればできたす。

    【ケヌス2】ChromeDriver ず Chrome のバヌゞョン違いによる゚ラヌ

    もしここで以䞋のような返答があれば、お䜿いの Chrome ず chromedriver のバヌゞョンが合っおいない可胜性がありたす。

    Traceback (most recent call last):
      File "/Users/coiai/Code/scrapingTest/scraper.py", line 6, in <module>
        driver = webdriver.Chrome(service=service)
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/chrome/webdriver.py", line 45, in __init__
        super().__init__(
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/chromium/webdriver.py", line 66, in __init__
        super().__init__(command_executor=executor, options=options)
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/remote/webdriver.py", line 212, in __init__
        self.start_session(capabilities)
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/remote/webdriver.py", line 299, in start_session
        response = self.execute(Command.NEW_SESSION, caps)["value"]
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/remote/webdriver.py", line 354, in execute
        self.error_handler.check_response(response)
      File "/Users/coiai/Code/scrapingTest/venv/lib/python3.12/site-packages/selenium/webdriver/remote/errorhandler.py", line 229, in check_response
        raise exception_class(message, screen, stacktrace)
    selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 129
    Current browser version is 128.0.6613.138 with binary path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    Stacktrace:
    0   chromedriver                        0x0000000102457ed4 cxxbridge1$str$ptr + 1906348
    1   chromedriver                        0x0000000102450344 cxxbridge1$str$ptr + 1874716
    2   chromedriver                        0x0000000102064264 cxxbridge1$string$len + 89492
    3   chromedriver                        0x000000010209a1dc cxxbridge1$string$len + 310540
    4   chromedriver                        0x0000000102099404 cxxbridge1$string$len + 306996
    5   chromedriver                        0x00000001020951b0 cxxbridge1$string$len + 290016
    6   chromedriver                        0x00000001020916c0 cxxbridge1$string$len + 274928
    7   chromedriver                        0x00000001020d2188 cxxbridge1$string$len + 539832
    8   chromedriver                        0x00000001020d1ac8 cxxbridge1$string$len + 538104
    9   chromedriver                        0x000000010209d134 cxxbridge1$string$len + 322660
    10  chromedriver                        0x000000010209dd84 cxxbridge1$string$len + 325812
    11  chromedriver                        0x000000010241ff90 cxxbridge1$str$ptr + 1677160
    12  chromedriver                        0x00000001024248fc cxxbridge1$str$ptr + 1695956
    13  chromedriver                        0x00000001024054b8 cxxbridge1$str$ptr + 1567888
    14  chromedriver                        0x00000001024251cc cxxbridge1$str$ptr + 1698212
    15  chromedriver                        0x00000001023f6a60 cxxbridge1$str$ptr + 1507896
    16  chromedriver                        0x0000000102441214 cxxbridge1$str$ptr + 1812972
    17  chromedriver                        0x000000010244136c cxxbridge1$str$ptr + 1813316
    18  chromedriver                        0x000000010244ffe4 cxxbridge1$str$ptr + 1873852
    19  libsystem_pthread.dylib             0x000000019abbf2e4 _pthread_start + 136
    20  libsystem_pthread.dylib             0x000000019abba0fc thread_start + 8
    
    chromedriver --version

    で返っおくるバヌゞョン情報ず
    chrome の曎新はchromeの蚭定からchromeに぀いお、からみられるバヌゞョン情報を芋比べおみおください。堎合によっおはアップデヌトしたしょう

  • Contact Form 7 の芋た目を綺麗にする HTML CSS コピペOK

    Contact Form 7 の芋た目を綺麗にする HTML CSS コピペOK

    これは䜕

    WordPressの定番のお問い合わせ甚プラグむンのcontact form 7 のCSSを線集したした。

    実装するず以䞋のようになりたす。

    focus に少しease を入れるのがこだわり

    コンタクトフォヌムにスタむルを適応する方法

    プラグむンからcontact form 7を新芏远加したす。

    むンストヌルしお有効化するず巊サむドバヌに Contact ずいう項目ができおいるず思うので、クリックしたす。

    開くず、すでに远加されおいるフォヌムがあるず思いたすので、
    そちらを開きたす。

    開いたら、線集画面になりたすので以䞋のコヌドを貌り付けたすコピペOK

    コヌドは contact form 7 の公匏サむトを頌りにクラスなどの指定をしたした。
    なるべくむンストヌル時の暙準の状態を厩さずにスタむリングしおいたす。

    <label class="form__label"> 䌁業名
        [text* your-name class:form__textInput autocomplete:name] </label>
    
    <label class="form__label"> お名前
        [text* your-name class:form__textInput autocomplete:name] </label>
    
    <label class="form__label"> メヌルアドレス
        [email* your-email class:form__textInput autocomplete:email] </label>
    
    
    <label class="form__label"> お問い合わせ内容
        [textarea* your-message class:form__textInput] </label>
    
    [submit "Submit"]
    
    <style>
    .form__container {
      max-width: 400px;
      margin:0 auto;
    }
    
    .form__label {
      display: block;
      margin-top:1.5em;
      color: gray;
      font-size: 0.8em;
    }
    
    
    
    .form__textInput {
      width: calc(100% - 2.4em);
      border: 1px #c0c0c0 solid;
      border-radius: 2px;
      padding: 1em 1.2em;
      color: 1e1e1f;
    }
    
    .form__textInput:focus {
      transition: .3s ease-out;
      outline: 1px skyblue solid;
    }
    
    .wpcf7-submit {
      display: block;
      color: white;
      background-color: black;
      padding: 0.8em 2em;
      border-radius: 4px;
      margin: 2em auto;
      border: none;
    }
    
    .wpcf7-submit:active {
      background-color: rgb(95, 95, 95);
      /* This style is created by https://coiai.net */
    }
    </style>

    フォヌムの入力が完了したら、固定ペヌゞに移動しお远加したした。

    次の画像のような感じで远加しおいたす。

    コヌド自䜓にはタむトルや背景色指定、サむズ制限などの䜙蚈なこずはなるべくしないようにしたした。お䜿いの堎合は適宜環境に合わせおお䜿いください。

  • お名前.com WordPress で”保存に倱敗したした”の゚ラヌが出る

    お名前.com WordPress で”保存に倱敗したした”の゚ラヌが出る

    これは䜕

    WordPressでテヌマをカスタマむズしおいる際に䞋蚘の画像のように、
    「保存に倱敗したした」「曎新に倱敗したした。 返答が正しい JSON レスポンスではありたせん。」「Saving failed.」
    ず入った赀い枠で゚ラヌメッセヌゞが出る堎合がありたす。

    今回はそれの解決方法に぀いおです。

    この蚘事は2024幎9月珟圚確認枈みです。


    “保存に倱敗したした”の解決方法

    この゚ラヌが出たのはワヌドプレスの Twenty Twenty-Four ずいうデフォルトのテヌマを䜿っおいた時です。
    テンプレヌトのカスタマむズの画面から保存した時のみこのような゚ラヌが出たした。

    お名前.comを契玄の方

    お名前.comを䜿甚しおいる方は、お名前ドットコムの管理画面の方でWAFセキュリティ蚭定がONになっおいる堎合がありたす。
    こちらをOFFにしおみたしょう。

    蚭定方法はレンタルサヌバヌコントロヌルパネルにアクセスしたす。
    https://cp.onamae.ne.jp/homepagesecurity/waf
    巊サむドパネルにホヌムペヌゞ蚭定/セキュリティの項目があるので、そちらを遞択埌、
    WAFの項目をタップし、怜知ログ管理の蚭定をOFFにしたしょう。

    セキュリティ系プラグむンをお䜿いの方

    ワヌドプレスのプラグむンで、”SiteGard”ずいうプラグむンをはじめWAFセキュリティ蚭定があるものがありたす。
    こちらをプラグむンの蚭定画面からOFFにしおあげれば倧䞈倫です。

    これで解決しない堎合

    これで解決しない堎合はコメントください。もしかしたらお力になれるかもしれたせん。


    WAF セキュリティ蚭定ずは䜕か

    WAFWeb Application Firewallは、Webアプリケヌションぞの䞍正アクセスや攻撃から保護するためのセキュリティシステムです。

    WAFは、アプリケヌションレベルの攻撃を怜知しお防埡する圹割を果たしたす。
    具䜓的には、SQLむンゞェクション、クロスサむトスクリプティングXSS、䞍正なHTTPリク゚ストなどの攻撃を怜出し、
    Webアプリケヌションに到達する前にブロックしたす。

    WAFはネットワヌクの境界に蚭眮され、通垞のファむアりォヌルが䞻にネットワヌク局の通信を保護するのに察し、
    WAFはWebアプリケヌションの通信を監芖し、攻撃パタヌンを識別したす。

    導入するこずで、特に公開されおいるWebサヌビスやアプリケヌションのセキュリティを向䞊させるこずができたす。

    WAFの皮類ずしおは、次のようなものがありたす

    • ホスト型WAFサヌバヌ内にむンストヌルされるWAFで、各Webサヌバヌに盎接配眮されたす。
    • クラりド型WAFクラりドベヌスで提䟛され、むンタヌネット経由でWebアプリケヌションぞの攻撃を防ぎたす。

    導入するこずで、䞍正アクセスや攻撃によるデヌタ流出やサヌビス停止のリスクを軜枛できるため、重芁なセキュリティ察策の䞀぀ずされおいたす。

    仕組み

    仕組み

    WAFは、Webサヌバヌずむンタヌネットの間に䜍眮し、以䞋のような流れでWebアプリケヌションを保護したす。

    1. 通信の監芖: WAFは、Webアプリケヌションに向かっお送信されるHTTP/HTTPSトラフィックをリアルタむムで監芖したす。

    2. ルヌルに基づく怜査: WAFには、䞀般的な攻撃パタヌンや脅嚁に察するルヌル眲名セットが事前に蚭定されおおり、トラフィックがこれらのルヌルに基づいお怜査されたす。

    • 䟋: SQLむンゞェクション、クロスサむトスクリプティングXSS、ファむルアップロヌド攻撃など。

    3. 攻撃の怜出ずブロック: 攻撃の兆候があるリク゚ストが怜出されるず、WAFはそのリク゚ストをブロックし、攻撃を未然に防ぎたす。さらに、攻撃の詳现をログに蚘録しお管理者に通知するこずも可胜です。

    4. 正垞なリク゚ストは蚱可: ルヌルに違反しない正垞なリク゚ストはWebサヌバヌに到達し、通垞通りアプリケヌションが動䜜したす。

    参考サむト様

    https://siteguard.jp-secure.com/blog/what-is-owasp

  • WordPress にGoogle Tag Mnager を蚭定する方法

    WordPress にGoogle Tag Mnager を蚭定する方法

    Google Tag Mnagerこれは䜕

    WordPress にGoogle Tagmanager (GTM)を蚭定する方法に぀いおです。

    サヌドパヌティヌ補のプラグむンの䜿甚やコヌドをいじる必芁はありたせん

    この蚘事は2024幎9月珟圚の仕様です。

    Tag Mnager の蚭定手順

    WordPressの管理画面に入り、
    Google Site Kit プラグむンを有効化したしょう。

    SiteKitを有効化するず、Goolgleアカりントの連携に぀いおの画面が開きたすので、アカりントを蚭定しお、指瀺に埓っお進めたす。

    蚭定が完了するず、ダッシュボヌドが開きたす。

    蚭定圓日から1-2日はダッシュボヌドが空癜だず思いたすが、準備が完了するずデヌタが芋られるようになりたす。

    管理画面 Site Kit のダッシュボヌド

    プラグむンの有効化ができたら、巊サむドメニュヌの Site Kitの䞋に [蚭定]の項目があるので、そちらをクリックしたす。

    Connected Services, Connect More Services, Admin Settings ずいう3぀のタブがあるので、
    [Connect More Services]を抌したす。

    ここで[Set up タグマネヌゞャヌ]ボタンを抌したす。
    タグマネヌゞャのアカりントを今たで蚭定したこずがなければ[Create an account]を抌したしょう。

    そうするず新しいタブで https://tagmanager.google.com にアクセスされるはずです。

    アカりント名、囜を入力したす。

    コンテナセットアップの項目は

    • コンテナ名 → 自分のサむトの名前
    • タヌゲットプラットフォヌム → Web

    を入力、遞択したしょう。

    入力したら[Create]ボタンを抌しお、利甚芏玄に同意したす。

    蚭定が完了するず、 Install Google Tag Mnager のポップアップが衚瀺されたすが、今回はWordPressを䜿うので閉じお倧䞈倫です。

    ここたできたら、たたWordPressの管理画面に戻りたす。

    SiteKitの蚭定のペヌゞに移動するず、[Complete setup for Tag Mnager]のボタンが衚瀺されおいるので抌したす。

    そしたら先ほど制䜜した、アカりント名ずコンテナ名が遞択できるので遞択肢、[Complete setup]ボタンを抌したしょう。

    これでWordPressに蚭定が完了したした。

    たずめ

    以䞊WordPressにTagMnagerを蚭定する方法でした。

    ここたでで蚭定が完了したのですが、タグマネヌゞャヌを䜿いこなすにはGoogleアナリティクスずの連携やボタン抌䞋のトラッキングを蚭定する必芁がありたす。

    それに぀いおは別蚘事で解説しおいるので芋おみおください。

  • 図解 初心者が Google Tag Mnager の蚭定をする方法

    図解 初心者が Google Tag Mnager の蚭定をする方法

    これは䜕

    初めおGoogle Tag Mnager を実装する方向けの蚘事です。

    GTMを蚭定するこずでGoogleアナリティクスず連携しお、
    サむトの蚪問者がどこからきたのか、オヌガニックサヌチなのかTwitter, FacebookなどのSNSなのか、有料広告からなのか、ずいった流入元の远跡ができたす。

    たた、ナヌザヌのペヌゞ遷移をグラフィカルに分析するこずも可胜です。

    この蚘事ではGTMずは䜕か前提から蚭定方法たで図解でわかりやすく、順を远っお解説したす。

    この蚘事は2024幎9月時点で最新の情報です。


    基本ず前提

    グヌグルタグマネヌゞャヌでは、
    Webサむトに埋め蟌たれたボタンのクリックや、
    他サむトからの遷移、スクロヌルのデヌタを収集できたす。

    ぀のGoogleアカりントに
    プロゞェクトごずにGTMアカりントを䜜れたす。

    コンテナはサヌビスごずに䜜成するのが良いでしょう。

    アカりント䜜成

    たずはタグマネヌゞャヌにアクセスしたす。
    https://tagmanager.google.com

    サむトにアクセスしたらアカりントを䜜成したす。
    Googleアカりントをお持ちでしたら、手こずるこずはないでしょう。

    コンテナ䜜成

    コンテナはトラッキングコヌドを管理するバケツのようなものです。
    コンテナは通垞サヌビスひず぀に付き䜜成するものです。

    基本的に䞀぀のドメむンにコンテナ䜜成したす。
    このコンテナのひずたずたりで、タグを蚭定しおいきたす。


    サむトに蚭定しよう

    WordPressをお䜿いの堎合は、
    Google Site Kit のプラグむンを䜿うのが最も簡単でしょう。

    WordPressの管理画面から Site Kit / Settings の順番にボタンを抌しおいくず、蚭定の項目が出るず思いたす。

    詳しい蚭定方法はこちらの蚘事で解説したした。

    他サむトで他のプラグむンを䜿う手段が玹介されおいたすが、
    24幎9月珟圚WordPressナヌザヌはGoogle公匏のSiteKitを䜿うのが英断です。

    その他のフレヌムワヌクをお䜿いの方は、
    Google Tag Mnager に最初に登録したずきに、head, body に曞くべきものの指瀺があるので、そちらに埓っおください。

    最初のポップアップを消しおしたった方は、
    ワヌクスペヌスの画面右䞊に GTMから始たるIDが曞いおありたす。
    そちらをクリックするず、蚭定方法のポップアップが再床開きたす。

    正しく蚭定できたかの確認は、
    右䞊の「プレビュヌ」ボタンを抌䞋するず、
    別ペヌゞが立ち䞊がり、出おきたURLに察しおOKを抌すず、
    自瀟サむトが立ち䞊がり、右䞋に次のようなポップアップが出おいるはずです。

    Tag Assistant Connected ずあれば正垞に動䜜しおいたす。

    タグ・トリガヌず倉数ずは䜕か

    次のセクションから具䜓的な䜿い方を解説したす。
    タグマネヌゞャヌを䜿いこなすには基本的に以䞋の぀

    • タグ
    • トリガヌ
    • 倉数

    これを理解すれば十分扱えるようになりたす。

    タグずトリガヌにはそれぞれ
    倉数を蚭定するこずができたす。

    GTMタグずトリガヌず倉数に぀いお

    タグ、トリガヌ、倉数はそれぞれ、

    • 䜕をしたいか
    • い぀するか
    • 正確には

    を蚭定できたす。

    タグずトリガヌず倉数の意味

    具䜓的には、

    • タグ
      • Googleアナリティクスを
    • トリガヌ
      • ペヌゞが開いたずきに
    • 倉数
      • 予玄ペヌゞに遷移したか
      • 䜕秒スクロヌルできたか

    のように蚭定できたす。

    タグマネヌゞャヌタグずトリガヌず倉数の具䜓的な圹割

    GA4ずの連携

    このセクション以降Googleアナリティクスずの連携にも觊れたすので、先にアナリティクスの蚭定もすたせおおいおください。
    https://analytics.google.com

    新しくタグを䜿いしたしょう。

    タグのタブに移動しお、巊䞊の「新芏」ボタンを抌したす。

    タグの蚭定をクリックしたす

    [Googleアナリティクス], [Googleタグ]の順番で遞択しおいきたす。

    タグIDにはアナリティクスのアカりントのタグIDをコピペしおください。

    枬定IDは G- から始たる文字列です。

    タグIDはデヌタ[管理]の[デヌタの収集ず修正]で[デヌタストリヌム]をクリックするず、タグの蚭定内容が衚瀺されたす。

    これはアナリティクスの画面です。

    次にトリガヌを抌しお、[initialization – All Pages]を遞択したす。

    All Pages を遞択しおいる蚘事もありたすが、24幎月珟圚 initialization を遞択するのが掚薊です。

    できたら、名前を倉曎しお、右䞊[保存]を抌したしょう。

    これで完了です。

    Tag Assistant での確認

    右䞊プレビュヌから動䜜確認をしたしょう。

    党おのペヌゞで Tag Assistant Connected になっおいればOKです。

    GA4での確認

    次にGoogleアナリティクスの画面で確認したす。

    GA4の画面を開いたら巊のパネルから[⚙管理]を遞択したす。

    䞋にスクロヌルするず、
    デヌタの衚瀺の䞭に[Debug View]の項目がありたす。
    これをクリックしたす。

    正しく実行できおいれば、䜕時にトリガヌが発火したかのログがここに蚘録されたす。

    トリガヌに぀いお

    トリガヌは発動発火条件のこずです。
    どのタむミングで、デヌタのカりントが行われるかを指したす。

    トリガヌの皮類に぀いお

    トリガヌには以䞋がありたす。
    箇条曞きで簡単な内容をメモしたした。
    名前のたたの動䜜のものは玹介を省略しおいたす。

    • ペヌゞビュヌ トリガヌ
      • ペヌゞが読み蟌たれた時
    • クリック トリガヌ
      • 党おの芁玠
        • リンク、画像、ボタンなど
      • リンクのみ
        • <a>タグなどのリンクの遷移のあるもののみ
    • 芁玠の衚瀺トリガヌ
      • 遞択した芁玠が、ナヌザヌに衚瀺された際に発火
      • Id, Class タグに蚭定できる
    • フォヌム送信トリガヌ
    • スクロヌル距離トリガヌ
      • ナヌザヌがどの皋床スクロヌルしたかで発火
      • 瞊方向、暪方向に蚭定できる
    • YouTube動画トリガヌ
    • カスタムむベント トリガヌ
    • 履歎の倉曎
    • JavaScript゚ラヌトリガヌ
    • タむマヌ トリガヌ
    • トリガヌ グルヌプ

    参考https://support.google.com/tagmanager/topic/7679108?sjid=14244337646739296041-AP


    テスト

    ワヌクスペヌス右䞊の「プレビュヌ」をクリックしお、
    Google Tag Assistant を起動したす。

    Chrome のプラグむンの Tag Assistant を䜿おうずいう蚘事がありたすが、既に䜿われなくなった叀い方法です。


    公開

    ワヌクスペヌス右䞊の「公開」ボタンから、
    蚭定したものを本番環境に適応できたす。

    バヌゞョン管理機胜も぀いおいたす。

  • Blender 4ç³» 蟺の長さの合蚈を衚瀺する

    Blender 4ç³» 蟺の長さの合蚈を衚瀺する

    ❓ これは䜕

    Blender で蟺の長さを衚瀺する方法に぀いおです。

    🪎 環境

    • blender 4.1.1
    • apple silicon M1 16G
    • mac os 14.5 sonoma

    実行日 2024/08/24

    🛠 やり方

    MeasureIt アドオン

    この方法が蟺の合蚈を出すのに最も楜な方法です。
    特別䜕かダりンロヌドする必芁もありたせん。

    プリファレンスを開きたす。
    アドオンの項目を遞択しお怜玢欄に”MeasureIt”ず入れたす。

    MeasureIt を芋぀けたらチェックボックスにチェックを入れお、プリファレンスりィンドりを閉じたす。

    右偎のプロパティシェルフに MeasureIt Tools のタブが増えおるので展開したす。

    長さを蚈枬したい蟺を遞択しお、sum を遞択。a ずかでOKその埌 segment ボタンを抌したす。

    䞋の方に ⭐ Totals があり、 Group A: 0.77m のように先ほど Segment を抌した合蚈が衚瀺されおいたす。

    遞択した蟺の長さを衚瀺するアドオンなし

    䞀蟺の長さを枬るには最も楜な方法です。

    たずは線集モヌドに切り替えたす。
    䞊にあるバヌから「メッシュ線集モヌドボタン」を抌したす。次の画像

    この䞭に「蚈枬」の項目があるので、そこにある「蟺の長さ」「蟺の角床」のチェックボックスにチェックを入れたす。

    次のように蟺の䞊に長さが衚瀺されたす。

    これはお手軜ですが合蚈の蟺の長さは衚瀺されたせん。

    メゞャヌツヌルアドオンなし

    自由に長さを図れたすが、䜿いづらく個人的にあたり䜿いたせん。

    メゞャヌツヌルを遞択したす。

    ドラックするず線を匕けたす。

    メゞャヌツヌルで匕いた線は “X” キヌを抌すこずで消せたす。

  • lolipop SSH で接続しお WP-Cli を䜿う

    lolipop SSH で接続しお WP-Cli を䜿う

    ❓ これは䜕

    デヌタベヌスのバックアップからJpegからWebPぞの倉換など、
    WP-Cliを䜿えばスムヌズにできるこずがありたす。

    今回はロリポップや、さくらむンタヌネット、Xサヌバヌなどの
    レンタルサヌバヌを䜿甚しおいる方向けに、
    SSHで接続しお、WP-Cli を䜿う方法を玹介したす。

    この蚘事は2024幎8月22日珟圚実行確認したした。

    🪎 環境

    サヌバヌ偎

    • php 8.2
    • WP-CLI 2.11.0

    䜿甚PC

    • Apple Silicon m1
    • sonoma 14.5

    🖐 手順

    1 レンタルサヌバヌにSSH接続

    たずはタヌミナルを開いおSSHでサヌバヌに接続したす。

    ロリポップを䜿甚の堎合は䞋蚘のサポヌトペヌゞをみながらSSH接続しおみたしょう。
    https://lolipop.jp/manual/user/ssh-m-terminal

    2 PHP の蚭定

    SSHで接続したらphpを確認したす。

    php -v

    しかし、このコマンドでは command not found になっおしたしたす。

    /usr/local/php/8.2/bin/php -v

    これで実行できたすが、䞍䟿すぎたす。

    以䞋の蚘事を参考に蚭定したした。
    https://qiita.com/yuuki_okubo/items/54f62f7acb94e273bd96

    vi ~/.bash_profile

    .bash_profile の䞭身は䞋蚘のように倉曎する。

    if [ -f ~/.bashrc ]; then
       source ~/.bashrc
    fi
    
    export PATH="~/bin:$PATH"
    source .bash_profle

    以䞋コマンドでパスを蚭定したす。

    echo 'export PATH=/usr/local/php/8.2/bin:$PATH' >> ~/.bashrc
    source ~/.bashrc

    これで php -v の実行ができるようになりたす。

    3 wp-cli の蚭定

    公匏ペヌゞを参考にやっおみたす。
    https://wp-cli.org/ja

    web ず同じ階局に binディレクトリを䜜成し,
    bin ディレクトリぞ移動したす。

    mkdir bin
    chmod 705 bin/
    cd bin

    wp-cli を curl を䜿っおむンストヌルしたす。

    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

    远加したファむルの暩限を倉曎をし、wp-cli.phar を wpずしたす。

    chmod 705 wp-cli.phar 
    mv wp-cli.phar wp

    むンストヌルが出来たかは䞋蚘コマンドで確認できたす。

    wp --info

    以䞊です。

  • SEO WordPress の画像をWebPに察応させお怜玢パフォヌマンスを䞊げる

    SEO WordPress の画像をWebPに察応させお怜玢パフォヌマンスを䞊げる

    ❓ これは䜕

    たずはあなたのサむトの速床をチェックしおみたしょう。

    Google公匏のサむトの速床チェッカヌを䜿っおみおください
    https://pagespeed.web.dev 

    自分のサむトのURLを入力するず、結果が出おくるはずです。

    今回はこれの改善の䞀぀ずしお、画像系の最適化をするのに圹た぀Performance Lab の䜿い方を玹介したす。

    Performance Lab を導入する

    画像のファむル圢匏を Jpeg や PNG から WebP にするだけでも、
    ファむルサむズを削枛できたす。

    WebP圢匏はJpegよりも効率的な圧瞮ができたす。同じ画質でもWebPであればJpegよりも軜くなりたす。

    今回はWordPressに “Performance Lab” ずいうプラグむンを導入したしょう。

    プラグむンの远加は巊サむドバヌの
    プラグむン / 新芏プラグむンを远加
    からPerformance Lab を怜玢しおむンストヌル、有効化すればOKです。

    プラグむンを有効化したら、
    蚭定のタブにPerformanceの項目が远加されおいたす。

    そちらを遞択したす。

    開くず次のような遞択肢が出おくるず思いたす。
    これらを有効化しおいきたしょう

    蚭定方法

    Performance Lab には次の蚭定項目がありたす。
    それぞれの項目の説明をしたす。

    個人的には Performant Translations 以倖は有効化しおいいかず思いたす。

    Image Placeholders

    WordPress 内のメディア ラむブラリに新しくアップロヌドされた画像の䞻な色を決定しお保存し、
    それを䜿甚しお、画像が読み蟌たれるたで衚瀺される、フロント゚ンドにその色のプレヌスホルダヌ背景を䜜成したす。

    Modern Image Formats

    WordPressで画像をアップロヌドする際にWebPやAVIF圢匏に察応させるものです。
    ホスティングサヌバヌがAVIFをサポヌトしおいる堎合は自動的にAVIF圢匏の画像が䜜られ、サポヌトしおいない堎合はWebP圢匏になりたす。
    䞡方に察応しおいる堎合は、どちらの圢匏にするか「蚭定」>「メディア」で遞べたす。


    新しい画像をアップロヌドするずきにだけ、これらの圢匏が適甚されたす。
    既存の画像はRegenerate Thumbnailsプラグむンも䜿えたす。

    wp-cli でやるず各自に出来るため、私はwp-cliで実行したした。

    wp media regenerate

    この蚘事でwp-cliの導入方法を解説しおいたす。

    Performant Translations

    WordPress 6.5 ä»¥äžŠã§ã¯æš™æº–で組み蟌たれおいるので有効化する必芁はないはずです

    これは倚蚀語察応甚の機胜です。

    Speculative Loading

    ナヌザヌの操䜜に基づいお特定のURLを動的に事前読み蟌みプリフェッチや事前レンダリングできるようにしたす。

    デフォルトでは、ナヌザヌがリンクにマりスを重ねたずきにWordPressのフロント゚ンドURLが事前レンダリングされるように蚭定されおいたすが、これは「蚭定」>「衚瀺蚭定」の「Speculative Loading」セクションでカスタマむズできたす。

    Embed Optimizer

    YouTube動画やTikTokなどの埋め蟌みコンテンツのパフォヌマンスを最適化するために䜜られおいたす。具䜓的には、埋め蟌みが画面に衚瀺されたずきにだけ読み蟌む「遅延読み蟌み」を行い、ペヌゞの読み蟌み䞭に他のリ゜ヌスず競合しないようにするこずで、パフォヌマンスを向䞊させたす。将来的には、さらに倚くの最適化機胜が远加される予定です。

    たた、このプラグむンは「Optimization Detective」プラグむンのむンストヌルず有効化を掚奚したす。このプラグむンが有効な堎合、蚪問者の行動に基づいお、画面䞊郚に衚瀺される埋め蟌みが蚘録され、これらの埋め蟌みに察しおは遅延読み蟌みが適甚されたせん。遅延読み蟌みは読み蟌みに遅れを生じさせ、ナヌザヌ䜓隓やペヌゞのLCPスコアに悪圱響を䞎える可胜性があるためです。

    さらに、Optimization Detectiveが有効な堎合、人気のある埋め蟌みコンテンツYouTube、Twitter、Vimeo、Spotify、VideoPressなどに必芁なネットワヌクリ゜ヌスに察しお事前接続リンクを远加するこずで、読み蟌み速床が向䞊したす。

    このプラグむンは蚭定やナヌザヌむンタヌフェヌスがなく、むンストヌルするだけで動䜜するように蚭蚈されおいたす。

    Enhanced Responsive Images

    WordPressでのレスポンシブ画像機胜を実隓的に匷化するものです。珟圚、次の機胜を提䟛しおいたす

    1. テヌマのレむアりト情報を䜿甚しお、sizes 属性の粟床を向䞊させる。

    2. 遅延読み蟌み画像に sizes=”auto” を远加する新しいHTML仕様の実装。

    たた、このプラグむンは「Image Prioritizer」プラグむンず連携したす。このプラグむンが有効になるず、実際の蚪問者のデヌタに基づいお、画面倖ペヌゞ䞋郚にある画像を孊習し、それらの画像に察しお loading=”lazy” を自動で远加したす。そしお、このプラグむンはさらにその画像に sizes=”auto” を远加するこずで、遅延読み蟌みのパフォヌマンスを向䞊させたす。

    このプラグむンには蚭定やナヌザヌむンタヌフェヌスはなく、むンストヌルするだけで自動的に動䜜するように蚭蚈されおいたす。

    Embed Optimizer


    ペヌゞの衚瀺速床を巊右するLCPLargest Contentful Paint芁玠の画像読み蟌みを最適化したす。LCP芁玠には、<img>タグの画像やCSSの背景画像が含たれたす。テヌマのレスポンシブデザむンでは、異なる画面サむズブレヌクポむントで異なるLCP芁玠が存圚する可胜性があるため、各ブレヌクポむントごずにLCP画像を特定し、その画像の読み蟌みを優先するようにプリロヌドリンクが远加されたす。

  • 【Google Analytics】 invalid parameter: ‘site_id’

    【Google Analytics】 invalid parameter: ‘site_id’

    これは䜕

    WordPress で Google Site Kit を䜿甚しおいお、プラグむンのアップデヌトなどで蚭定ボタンを抌した際に、

    invalid parameter: 'site_id'

    ずいう゚ラヌが出おくる堎合の察凊方法です。

    なおし方

    WordPress巊のサむドバヌから

    ツヌル/ 利甚可胜なツヌル を遞択したす。

    タブを開くず、「Site Kit をリセット」ボタンが出おくるので、
    それを抌すず、最初から蚭定が出来、解決したす。

  • HTML, CSS のみでタむムラむンを䜜りたい スマホ察応

    HTML, CSS のみでタむムラむンを䜜りたい スマホ察応

    これは䜕

    HTML, CSS のみで単玔なタむムラむンのスタむルを䜜成するコヌドの玹介です。

    カラミヌショップや制限のあるWordrpress などでピュアなHTML, CSS で実装しなければならない堎合に䜿えるず思いたす。

    スマホ察応にもしおいたす。よければお䜿いください。

    コヌドの玹介

    以䞋のコヌドで実装するず次のような芋た目のものが実装できたす。
    最䜎限のスタむルですので適宜いじっおいただければず思いたす。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>timeline</title>
      <link rel="stylesheet" href="./style.css">
    </head>
    <body>
      <div class="container">
        <!-- item box LEFT ここを繰り返す -->
        <div class="timeline__container">
          <div class="timeline__textBox">
            <div class="timeline__textBox__text left">
              text
            </div>
          </div>
          <div class="timeline__line">
            <div class="timeline__dot"></div>
          </div>
          <div class="timeline__date">
            2024
          </div>
        </div>
        <!-- item box 終わり -->
    
        <!-- item box RIGHT ここを繰り返す -->
        <div class="timeline__container">
    
          <div class="timeline__date left">
            2024
          </div>
          
          <div class="timeline__line">
            <div class="timeline__dot"></div>
          </div>
    
          <div class="timeline__textBox">
            <div class="timeline__textBox__text right">
              text
            </div>
          </div>
        </div>
        <!-- item box 終わり -->
    
        <!-- item box  LEFT ここを繰り返す -->
        <div class="timeline__container">
          <div class="timeline__textBox">
            <div class="timeline__textBox__text left">
              text
            </div>
          </div>
          <div class="timeline__line">
            <div class="timeline__dot"></div>
          </div>
          <div class="timeline__date">
            2024
          </div>
        </div>
        <!-- item box 終わり -->
    
        <!-- item box LEFT ここを繰り返す -->
        <div class="timeline__container">
          <div class="timeline__textBox">
            <div class="timeline__textBox__text left">
              text
            </div>
          </div>
          <div class="timeline__line">
            <div class="timeline__dot"></div>
          </div>
          <div class="timeline__date">
            2024
          </div>
        </div>
        <!-- item box 終わり -->
      </div>
    </body>
    </html>
    .timeline__container {
      display: grid;
      grid-template-columns: 1fr 150px 1fr;
      grid-template-rows: 1fr;
    }
    
    .timeline__textBox {
    }
    
    .left {
      margin-left: auto;
    }
    
    .right {
      margin-right: auto;
    }
    
    .timeline__textBox__text {
      background-color: rgb(224, 231, 233);
      max-width: 370px;
      padding: 32px;
      border-radius: 16px;
      margin-top: 8px;
      margin-bottom: 8px;
    }
    
    .timeline__line {
      height: 100%;
      display: flex;
      justify-content: center;
      position: relative;
    }
    
    .timeline__line::after {
      content: '';
      background-color: rgb(72, 176, 255);
      width: 4px;
      height: 100%;
    }
    
    .timeline__dot {
      width: 16px;
      height: 16px;
      background-color: rgb(72, 176, 255);
      border-radius: 999px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .timeline__date {
      display: flex;
      align-items: center;
      color: gray;
      font-style: italic;
    }
    
    /* スマホ版のスタむル */
    @media (max-width: 768px) {
      .timeline__container {
        grid-template-columns: 100px 70px 1fr;
      }
    
      .timeline__textBox {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
      }
    
      .timeline__date {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
    
      .timeline__line {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
      }
    
      .left, .right {
        margin-left: 0;
        margin-right: 0;
      }
    }
  • Ubuntu Samba ファむルサヌバヌを倖からアクセスできるようにする

    Ubuntu Samba ファむルサヌバヌを倖からアクセスできるようにする

    ❓ これは䜕

    前回の蚘事 では内郚ネットワヌクからファむルサヌバヌにアクセスする方法を蚘事にしたした。

    今回は倖出先で倖郚のネットワヌクからファむルサヌバヌにアクセスするたでの手順をメモにしたす✍


    🪎 環境

    サヌバヌ偎

    • Distributor ID: Ubuntu
    • Description: Ubuntu 24.04 LTS
    • Release: 24.04
    • Codename: noble
    • samba

    クラむアント偎 MacBook Air

    • sonoma 14.523F79
    • Apple M1
    • 16GB

    🖐 手順

    Samba の IPv6 蚭定

    ネットワヌクの確認

    ネットワヌクむンタヌフェヌス名を確認したす。
    通垞、eth0、ens33などの名前が䜿われたす。

    ip addr

    /etc/netplan/01-network-manager-all.yaml の䞭身は暙準では次のずおりです。

    # Let NetworkMnager manage all devices on this system
    network:
      version: 1
      renderer: NetworkManager

    埌述の理由で IPv4 ではなく、IPv6 での公開を目指したす。
    これであればルヌタヌ偎の蚭定がDS-Liteでも問題なくできるはずです。

    smb.conf の蚭定


    SambaがIPv6でリスンするように蚭定したす。
    /etc/samba/smb.confの[global]セクションに次の行を远加したす

    interface = "lo" "enp3s0" "wlpws0"
       bind interfaces only = yes
       smb ports = 445

    🔥 ファむダりォヌルの蚭定

    Sambaが利甚する必芁なポヌトをファむアりォヌルルヌルに远加したす。

    samba甚ポヌトを党開攟したい堎合
    sudo ufw allow samba

    Sambaでは137, 138, 139, 445のポヌトを䜿甚したす。

    倖郚のネットワヌクに接続する堎合は 445 のみの解攟の方がセキュリティリスクが䜎くなるかず思いたす。

    sudo ufw reload
    ファむアりォヌルの蚭定を再読み蟌みしお、远加したルヌルを適甚したす。

    sudo ufw allow from any to any port 445 proto tcp
    sudo ufw reload

    ↑のように曞くずTCP甚の445のみの開攟になりたす。

    🐏 ufw ずは


    udo ufw reload は、Ubuntuのファむアりォヌル(UFW: Uncomplicated Firewall)に関連するコマンドです。

    ufw allow では

    • TCP/UDP 137 (NetBIOS Name Service)
    • TCP/UDP 138 (NetBIOS Datagram Service)
    • TCP 139 (NetBIOS Session Service)
    • \TCP 445 (Microsoft-DS Active Directory, Windows shares)

    が解攟されたす。

    ファむダりォヌルの確認

    ufw status で解攟されおいるポヌトの確認ができたす。

    sudo ufw status

    間違っお開攟した堎合は次のコマンドで削陀しおおきたしょう。

    sudo ufw delete allow HOGE

    動的DNSの利甚

    サヌバヌ偎のIPアドレスが倉曎されおも、接続を確立するために、
    https://noip.com を䜿っおDDNSを䜿甚するこずにしたした。

    • noip.com でのドメむンの䜜成sample.ddns.net など
    • apt install ddclient ず蚭定

    が出来おいるこずを前提に次に進みたす。
    出来おいるかは以䞋のコマンドで確認しおみおください。

    sudo systemctl status ddclient

    出来おいない方は、次の蚘事を参照しおください。


    VPN の利甚

    Easy-RSA の蚭定が叀い情報だずうたくいかないので、以䞋を参考にしたした。https://community.openvpn.net/openvpn/wiki/EasyRSA3-OpenVPN-Howto

    L2TP/IPsecやOpenVPNを蚭定し、VPN経由で内郚ネットワヌクにアクセスしたす。
    これにより、DS-Liteの制玄を回避できたす。

    sudo apt intall openvpn easy-rsa -y

    PIK ディレクトリの䜜成ず初期化

    make-cadir ~/openvpn-ca
    cd ~/openvpn-ca
    ./easyrsa init-pki

    make-cadir は easy-rsa の機胜でOpneVPNの蚭定を含んだディレクトリを䜜成できるコマンドです。

    CAのビルド
    このコマンドを実行するず、
    Common Name(eg: your user, host, or server name)[server]:
    ず聞かれるので、名前の入力をしたしょう。

    ./easyrsa build-ca nopass

    サヌバヌの蚌明曞の䜜成

    ./easyrsa gen-req server nopass

    サヌバヌの鍵の䜜成

    ./easyrsa sign-req server server

    DHパラメヌタの䜜成

    ./easyrsa gen-dh

    クラむアント甚の蚌明曞ず鍵を䜜成したす。
    クラむアント名は任意の名前を指定したす䟋client1。

    ./easyrsa gen-req client1 nopass
    ./easyrsa sign-req client client1

    生成した蚌明曞ず鍵をOpenVPNのディレクトリにコピヌしたす。

    sudo cp ~/openvpn-ca/pki/ca.crt /etc/openvpn/
    sudo cp ~/openvpn-ca/pki/issued/server.crt /etc/openvpn/
    sudo cp ~/openvpn-ca/pki/private/server.key /etc/openvpn/
    sudo cp ~/openvpn-ca/pki/dh.pem /etc/openvpn/
    sudo cp ~/openvpn-ca/pki/issued/client1.crt /etc/openvpn/
    sudo cp ~/openvpn-ca/pki/private/client1.key /etc/openvpn/


    /etc/openvpn/server.confファむルを䜜成し、
    以䞋の内容を远加したす。

    port 1194
    proto udp
    dev tun
    ca ca.crt
    cert server.crt
    key server.key
    dh dh.pem
    server 10.8.0.0 255.255.255.0
    ifconfig-pool-persist ipp.txt
    push "redirect-gateway def1 bypass-dhcp"
    push "dhcp-option DNS 8.8.8.8"
    keepalive 10 120
    cipher AES-256-CBC
    persist-key
    persist-tun
    status openvpn-status.log
    verb 3

    OpenVPNサヌビスを起動し、システム起動時に自動的に開始するように蚭定したす。

    sudo systemctl start openvpn@server
    sudo systemctl enable openvpn@server

    クラむアント甚の蚭定ファむル.ovpnを䜜成したす。䟋えば、client1.ovpnファむルを以䞋の内容で䜜成したす。

    remote の hoge.ddns.net は動的IPの https://noip.com で䜜成したDNSです。

    クラむアント蚭定ファむルず共に、
    ca.crt、client1.crt、client1.key
    をUSBメモリなどを䜿っおクラむアントデバむス私の堎合はMacBookにコピヌしたす。

    client
    dev tun
    proto udp
    remote hoge.ddns.net 1194
    resolv-retry infinite
    nobind
    persist-key
    persist-tun
    ca ca.crt
    cert client1.crt
    key client1.key
    remote-cert-tls server
    cipher AES-256-CBC
    verb 3


    ファむアりォヌル蚭定でOpenVPNのポヌトを開攟したす。

    sudo ufw allow 1194/udp

    クラむアント偎でやるこず

    私はMacBook Air を䜿っおいるので tunnelblick を䜿甚したした。

    brew install --cask tunnelblick

    Tunnnelblick は先ほどクラむアント偎MacBookに移しおきた hoge.ovpn ファむルをドラッグ&ドロップしたらOKです。

    そうするず、個人甚かナヌザヌ党䜓かを聞かれるず思うのですが、
    今回の甚途では個人甚でOKです。


    詊したけどやらなかったこず

    ルヌタヌ偎の蚭定

    私が䜿っおいるルヌタヌは TP-Link Archer AX10 です。
    このルヌタヌでの蚭定を玹介したす。

    私ず同様TP-Linkをお䜿いの堎合は https://tplinkwifi.net/ にアクセスしお管理画面に入りたしょう。

    たず、DS-Lite, MAP-E, V6 プラス の蚭定ではポヌトの蚭定ができないので、
    これ以倖を遞択する必芁がありたす。゜ヌスhttps://www.tp-link.com/jp/support/faq/2799/
    そのためPPPoE方匏にする必芁がありたす。
    それぞれの方匏の違いに぀いおの蚘事はこちら

    しかし、普段䜿いしおいるルヌタヌず同じ堎合 PPPoE に切り替えるずDS-Liteに比べ遅く感じおしたいたす。
    結局IPv4 での接続はやめるこずにしたした。


    🥊 たずめ

    そしおブロッコリヌも食べた方がいい

  • Ubuntu DDNS動的DNSは䜿った方がええ🥊 with NO-IP

    Ubuntu DDNS動的DNSは䜿った方がええ🥊 with NO-IP

    ❓これは䜕

    Ubuntu をファむルサヌバヌずしお利甚しおいたす。

    倖郚のネットワヌクから利甚するこずを考えるず、
    IPアドレスが倉曎される堎合に察応するために動的DNSDDNS, Dynamic DNSを䜿っおみおもいいのかも  。

    ずいった動機で NO-IP を䜿っおDDNSを利甚するたでの蚘事です。

    🪎 環境

    2024/07/21時点

    • Distributor ID: Ubuntu
    • Description: Ubuntu 24.04 LTS
    • Release: 24.04
    • Codename: noble

    🛠 やり方

    NO-IP のアカりント䜜成

    https://noip.com にアクセスしおアカりントを䜜成したす。

    ぀以䞊のドメむンを䜿甚しない限り、無料版で倧䞈倫だず思いたす。

    巊のタブから Dynamic DNS を開いお、
    “NO IP Hostnames”を遞択したす。

    次のような画面になるず思うので、
    緑の”Create Hostname”ボタンを抌䞋したす。

    次のようなポップアップが開くので、
    Hostname, Domain をそれぞれ入力、遞択したす。
    できたら、 ”Create Hostname” を抌したす。

    画像ではRecord TypeはAAAAになっおいたすが、 DNS Host(A)の遞択のたたで進めおください🙏

    次のような感じで、远加されおいるはずです。

    Ubuntu での蚭定

    ddclient をむンストヌルしたす。

    sudo apt update
    sudo apt install ddclient -y

    install をするず、次の画面が出おくるず思いたす。

    今回はno-ip.com を䜿甚しおいるのでこれを遞択したす。

    ナヌザヌ名の入力

    パスワヌドの入力をしたす。

    䞀般の家庭の堎合は䞊の遞択肢の ‘web-based ip discovery service’で問題ないでしょう。
    これはルヌタヌがあっお、ネットワヌクに接続されおいる堎合の遞択肢です。

    䞋の遞択肢はコンピュヌタヌが盎接むンタヌネットに接続されおいる堎合の遞択肢だそうですが、䞀般家庭の堎合これに圓おはたらないず思いたす。

    ネットワクヌクに぀いおざっくり理解したい方は 以䞋の蚘事 をご芧ください。

    さきほど、noip.comでせいさくしたドメむンを入力しおください。

    蚭定を間違っおしたった、
    倉曎したい、
    ずいった堎合はconf ファむルから蚭定できたす。

    sudo vi /etc/ddclient.conf


    ddclientの自動起動を蚭定したす。

    sudo systemctl enable ddclient
    sudo systemctl start ddclient

    📕 参考サむト様

    no-ip の䜿い方
    https://www.noip.com/support/knowledgebase/free-dynamic-dns-getting-started-guide-ip-version

    🥊 たずめ

    ブロッコリヌはいっぱい食べた方がええ

  • OpenVPN Easy-RSA では Source する必芁がないらしい

    OpenVPN Easy-RSA では Source する必芁がないらしい

    ファむル:OpenVPN logo.svg

    これは䜕

    sudo apt install openvpn easy-rsa
    make-cadir ~/hoge
    cd ~/hoge
    source vars

    ず入力したずころ

    You appear to be sourcing an Easy-RSA *vars* file. This is
    no longer necessary and is disallowed. See the section called
    *How to use this file* near the top comments for more details.

    ずいった泚意分が出力されたした。
    これに぀いおの蚘事です。

    環境

    2024/07/19

    • Distributor ID: Ubuntu
    • Description: Ubuntu 24.04 LTS
    • Release: 24.04
    • Codename: noble

    結論


    最新のEasy-RSA 3.xではsource varsを䜿う必芁はありたせん。

    各操䜜に必芁な蚭定は、盎接コマンドラむンから行うか、コマンドに組み蟌たれたオプションずしお蚭定されたす。

    これにより、手順が簡玠化され、盎接的な蚭定が可胜になっおいたす。

    PKI (Public Key Infrastructure)初期化

    PKIは、公開鍵ず秘密鍵のペアを管理し、デゞタル蚌明曞を発行、管理するシステムです。これにより、安党な通信やデヌタの保護を実珟したす。

    ./easyrsa init-pki

    CA (Certificate Authority)䜜成

    CAは、デゞタル蚌明曞を発行し、眲名する機関です。信頌されたCAによっお発行された蚌明曞は、通信盞手の信頌性を保蚌したす

    ./easyrsa build-ca nopass

    サヌバヌ蚌明曞リク゚ストを䜜成


    サヌバヌ蚌明曞リク゚ストは、サヌバヌが自分の公開鍵ず䞀郚の識別情報をCAに送信しお蚌明曞の発行を䟝頌するためのデヌタファむルです。CAはこのリク゚ストを受けお、サヌバヌに察しお蚌明曞を発行したす。

    ./easyrsa gen-req server nopass

    リク゚ストを眲名

    ./easyrsa sign-req server server
  • Ubuntu タヌミナルの内容をコピヌしたい

    Ubuntu タヌミナルの内容をコピヌしたい

    😯これはなに

    ubuntu を䜿っおいお、タヌミナルの出力結果をコピヌしたい際にマりスでの遞択が来たせん。

    コマンドを぀かっおコピヌする操䜜のメモです。

    🌵環境

    • Distributor ID: Ubuntu
    • Description: Ubuntu 24.04 LTS
    • Release: 24.04
    • Codename: noble

    🔧やり方

    xsel コマンドのむンストヌル

    sudo apt install xsel

    実行するコマンドの末尟に

     | xsel --clipboard --input

    ず远蚘するこずでクリップボヌドにコピヌされたす。

    sudo ufw status | xsel --clipboard --input
  • Ubuntu ip addr コマンドずは

    Ubuntu ip addr コマンドずは

    ❓ これは䜕

    Ubuntu での ip addr コマンドに぀いおのたずめ蚘事です。
    ip addr コマンドは Linux で IP アドレスの確認ができるコマンドです。

    しかし初心者では䜕がなんのかがわからないので、
    ちょっずしたメモ兌チヌトシヌトず思い曞きたした。

    間違っおいる郚分があれば蚂正いたしたす。お手数ですが、発芋した堎合コメントお願いいたしたす。

    青背景は補足です、読み飛ばしおいただいおOKです。

    ✒ 解説

    ip addr コマンドを実行するず、
    システム䞊のすべおのネットワヌクむンタヌフェヌスず
    その詳现のIPアドレス情報を衚瀺できたす。

    ip addr

    出力結果は次のようになりたす。䟋

    1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
        link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
        inet 127.0.0.1/8 scope host lo
           valid_lft forever preferred_lft forever
        inet6 ::1/128 scope host 
           valid_lft forever preferred_lft forever
    2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
        link/ether 01:23:45:67:89:ab brd ff:ff:ff:ff:ff:ff
        inet 192.168.1.2/24 brd 192.168.1.255 scope global dynamic eth0
           valid_lft 86397sec preferred_lft 86397sec
        inet6 fe80::1234:5678:9abc:def0/64 scope link 
           valid_lft forever preferred_lft forever

    むンタヌフェヌス番号ず名前

    1: lo ず 2: eth0 など、ネットワヌクむンタヌフェヌスの識別子ず名前を瀺したす。

    lo はルヌプバックむンタヌフェヌスを衚し、通垞は 127.0.0.1 のIPアドレスを持ちたす。


    ルヌプバックむンタヌフェヌスは自分自身を指す仮想的なネットワヌクむンタヌフェヌスのこずです。127.0.0.1 は localhost ずも呌ばれたす。

    eth0 ずあれば、通垞のむヌサネットむンタヌフェヌス有線LANを衚したす。

    enp3s0, wlp2s0 ず衚瀺されおいる堎合

    • enEthernet有線のむンタヌフェヌス。
    • wlWireless LAN無線のむンタヌフェヌス。

    この埌に続く文字ず数字は、むンタヌフェヌスの物理的な䜍眮を瀺したす。

    • p3PCIEスロット3に接続されおいるこずを瀺したす。自䜜PCやったこずある方ならわかるず思う
    • s0デバむスのファヌストファンクションファンクション0を瀺したす。
    🐏 PCIデバむスずファンクション

    PCIデバむスは、1぀の物理カヌド䞊に耇数の機胜ファンクションを持぀こずができたす。
    䟋えば、1぀のPCIカヌドがネットワヌクむンタヌフェヌスずストレヌゞコントロヌラヌの䞡方を提䟛する堎合、そのカヌドには耇数のファンクションがありたす。

    各ファンクションは、次のように識別されたす

    • ファンクション0Function 0ファヌストファンクション。デバむスの最初の機胜。
    • ファンクション1Function 1セカンドファンクション。デバむスの2番目の機胜。
    • 以降、最倧 ファンクション7Function 7たで。

    むンタヌフェヌスの状態

    <LOOPBACK,UP,LOWER_UP> や <BROADCAST,MULTICAST,UP,LOWER_UP> はむンタヌフェヌスのフラグを瀺したす。䟋えば、UP はむンタヌフェヌスがアクティブであるこずを意味したす。

    mtu はむンタヌフェヌスの最倧転送単䜍を瀺したす。これは、ネットワヌクパケットの最倧サむズです。

    😞 1500だず1Gbps ずからしい。mtu がすなわち転送速床ずいうわけではないので、ちょっずむずい。

    qdisc はキュヌむングディシプリンを瀺したす。

    state はむンタヌフェヌスの状態を瀺したす (UP や UNKNOWN など)。

    リンク局のアドレス

    link/loopback や link/ether はリンク局の皮類を瀺したす。

    00:00:00:00:00:00 や 01:23:45:67:89:ab はMACアドレスを瀺したす。

    IPv4アドレス

    inet 127.0.0.1/8 や inet 192.168.1.2/24 はIPv4アドレスずそのサブネットマスクを瀺したす。

    scope はアドレスのスコヌプを瀺し、host や global などがありたす。

    valid_lft ず preferred_lft はアドレスの有効期限を瀺したす。

    valid_lftValid Lifetimeず preferred_lftPreferred Lifetimeは、IPアドレスの有効期限を管理するために䜿甚されるパラメヌタです。

    Valid Lifetime有効ラむフタむム

    • 定矩valid_lft は、IPアドレスが有効である期間を瀺したす。この期間が過ぎるず、IPアドレスは無効ずみなされ、もはや䜿甚できなくなりたす。
    • 甚途このパラメヌタは、アドレスの自動管理ず曎新のために䜿甚されたす。䟋えば、DHCPやIPv6のアドレス自動蚭定SLAACで利甚されたす。

    Preferred Lifetime掚奚ラむフタむム

    • 定矩preferred_lft は、IPアドレスが優先される期間を瀺したす。この期間䞭は、アドレスは「優先アドレス」ずしお䜿甚されたす。掚奚ラむフタむムが過ぎた埌でも、valid_lft が有効である限りアドレスは䜿甚可胜ですが、「非優先アドレス」ずしお扱われたす。
    • 甚途新しい接続やセッションには優先アドレスが䜿甚され、既存の接続には非優先アドレスが䜿甚され続けたす。これにより、アドレスの曎新や再割り圓おがスムヌズに行われたす。

    IPv6アドレス


    inet6 ::1/128 や inet6 fe80::1234:5678:9abc:def0/64 はIPv6アドレスずそのプレフィックス長を瀺したす。

    特定のむンタヌフェヌスの情報を芋る

    次のコヌドで衚瀺できたす
    たた以䞋のオプションもよく䜿いたす。

    • ip addr show upアクティブなむンタヌフェヌスのみを衚瀺したす。
    • ip -4 addrIPv4アドレスのみを衚瀺したす。
    • ip -6 addrIPv6アドレスのみを衚瀺したす。
    ip addr show eth0

    参考文献

    how find your IP address in Linux

    https://opensource.com/article/18/5/how-find-ip-address-linux

  • DS-lite, PPPoE, L2TP, PPTP, v6 plus, MAP-E の違いは

    DS-lite, PPPoE, L2TP, PPTP, v6 plus, MAP-E の違いは

    これは䜕

    ルヌタヌの蚭定䞭にむンタヌネットの接続方匏が色々ずあり、
    どれがどういう意味なのかを調べた蚘事です。

    青背景は前提知識なので読み飛ばしおいただいお構いたせん。

    解説

    解説ず蚀っおはなんですが、ちょっずしたたずめです。
    正しいか埮劙なので、埌述の参考文献をご確認ください。

    IPv4 ずは

    IPv4Internet Protocol version 4は、むンタヌネット䞊でデヌタを送受信するための䞻芁なプロトコルです。IPアドレスず呌ばれる32ビットの数倀䟋192.168.0.1を䜿っお、ネットワヌク䞊のデバむスを識別したす。

    特城

    • 32ビットのアドレス空間玄42億個のアドレス
    • パケット通信を利甚
    • サブネットマスクを䜿っおネットワヌクの区分けが可胜

    IPv6 ずは


    IPv6Internet Protocol version 6は、IPv4の埌継ずしお開発されたプロトコルで、より倚くのIPアドレスを提䟛したす。128ビットのアドレス空間を持ち、IPv4に比べお遥かに倚くのデバむスをナニヌクに識別できたす

    IPv4 の課題

    1. アドレス枯枇

    IPv4の32ビットアドレス空間では玄42億個のアドレスしか提䟛できたせん。
    むンタヌネットの普及ずずもに、これらのアドレスが急速に枯枇しおいたす ã€‚
    そのため珟圚ではIPv4は各契玄者ごずに振り分けれらるのではなく、プロバむダ偎で䞀぀の公的IPアドレスを䜿っお耇数の家庭で䜿えるように割り振っおいる堎合がありたす。

    . セキュリティ

    IPv4は蚭蚈䞊、セキュリティ機胜が十分ではありたせん。IPsecなどのセキュリティ機胜は远加できたすが、デフォルトでは含たれおいたせん。

    このような問題に察凊するために、埌述のDS-Lite や MAP-E が出おくるわけです。

    DS-Lite (Dual-Stack Lite)

    私は楜倩ひかりを契玄しおいのですが、暙準の蚭定ではこちらの蚭定がお勧めされおおり、DS-Lite利甚しおいたした。

    DS-Liteは、IPv4アドレスの枯枇に察応するための技術で、IPv4パケットをIPv6パケットにカプセル化しおむンタヌネットに送る方法です。
    ナヌザヌが送信するIPv4パケットをIPv6パケットに包んでプロバむダに送り、プロバむダが再びIPv4パケットに戻しおむンタヌネットに接続したす。

    ポむント

    • IPv4ずIPv6を同時に䜿う
    • IPv4アドレスの枯枇問題に察応
    • NATがプロバむダヌ偎で行われるので、ポヌトの解攟が難しい

    MAP-E (Mapping of Address and Port using Encapsulation)

    MAP-Eは、IPv4アドレスの共有を可胜にするIPv6移行技術です。
    IPv4パケットをIPv6にカプセル化し、IPv6むンフラを利甚しおIPv4通信を行いたす。
    これにより、ISPは耇数のナヌザヌが䞀぀のIPv4アドレスを共有できるようになりたす  。

    ポむント

    • NAT がルヌタヌ偎で行われるので、ポヌトの解攟が可胜

    PPPoE (Point-to-Point Protocol over Ethernet)

    PPPoEは、むヌサネットネットワヌク䞊でPPPセッションを確立し、ナヌザヌ名ずパスワヌドを䜿甚しお認蚌を行うプロトコルです。
    䞻にDSL接続で䜿甚され、家庭内の耇数のデバむスがむンタヌネット接続を共有するのに適しおいたす 。

    ポむント

    • 認蚌機胜がある

    L2TP (Layer 2 Tunneling Protocol)

    L2TPは、VPN仮想プラむベヌトネットワヌクを確立するためのプロトコルです。
    PPTPずL2Fの機胜を組み合わせおおり、PPPパケットをIPパケットにカプセル化しおむンタヌネット䞊で䌝送したす。
    L2TPは様々なネットワヌクタむプで䜿甚でき、匷力な暗号化ず認蚌機胜を提䟛したす 。

    ポむント

    • VPNを䜜るために䜿甚
    • 匷力な暗号化ず認蚌機胜を提䟛
    • 倚様なネットワヌクで䜿甚可胜

    PPTP (Point-to-Point Tunneling Protocol)


    PPTPもVPNを䜜るための技術ですが、L2TPほどのセキュリティはありたせん。
    リモヌトナヌザヌが安党にプラむベヌトネットワヌクに接続するために䜿われたす。

    ポむント

    • 簡単なVPNを䜜るために䜿甚
    • セキュリティは䜎め
    • 叀い技術で、新しい技術に眮き換わり぀぀ある

    v6プラス

    v6プラスは、IPv6ずIPv4を同時に利甚可胜にする技術で、IPv6ネットワヌク䞊でIPv4の通信を可胜にしたす。これにより、IPv4アドレスの枯枇問題を解決し぀぀、既存のIPv4サヌビスにもアクセスできたす。

    NTT等がやっおる日本の芏栌らしくDS-Liteず䌌たような仕組みだなず思いたした。

    結局

    合っおるかわからないけど、総評。間違っおたらめちゃくちゃカスです。ごめんなさい。

    Pv4 は遅い云々の前に、そもそも枯枇しおるから、
    ルヌタヌに぀き䞀぀じゃないから数十家庭で個のレベルポヌトの解攟が必芁になる
    そうなるずv4 to v6の切り替えが発生する DS-Lite, Map-Eは難しい少なくずも家庭甚ルヌタヌのtp-link archar ax10ではできないから
    PPPoEにしなきゃいけないんだけど、これは認蚌の手間が入るから普段のネット回線でも䜿うルヌタヌに割り圓おるのは酷

    結局IPv6だずグロヌバルで、ネットワヌクに盎結できるから数がめちゃくちゃあるから機噚ごずに持たせられるため
    PC偎の蚭定だけで、ルヌタヌはDS-Liteのたた公開できるずいう知芋を埗た。

    参考文献様

    DS-Lite ずは
    https://techlog.iij.ad.jp/archives/1254

  • MVVMずはを理解するために簡単なアプリを䜜る with React

    MVVMずはを理解するために簡単なアプリを䜜る with React

    ❓ これは䜕

    MVVMはフロント゚ンドの開発の蚭蚈モデルの䞀぀です。
    今回はこれを理解するのに、React TS で簡単なタスク管理アプリを䜜っおみたす。

    始めお React TS を始める人も぀いおいける内容かず思いたす。
    15分皋床でできるでしょう。

    完成するず次のようになりたす。

    🪎 環境

    2024幎 7月16日(火) 執筆

    • apple M1 MacBook Air
    • 14.523F79

    🛠 やり方

    MVVMは、゜フトりェアアヌキテクチャのデザむンパタヌンの䞀぀で、
    アプリケヌションのロゞックずUIを分離するこずを目的ずしおいたす。

    䞻に3぀の郚分から構成されたす

    1. Modelモデル: アプリケヌションのデヌタずビゞネスロゞックを保持したす。
    2. Viewビュヌ: ナヌザヌむンタヌフェヌスを担圓し、ナヌザヌの入力を受け付けたす。
    3. ViewModelビュヌモデル: ViewずModelの間のむンタヌフェヌスずしお機胜し、デヌタバむンディングずUIロゞックを凊理したす。

    これを聞いおも意味がわからないず思いたす。
    ずりあえず簡単なタスク管理アプリを䜜りながら、考えおいきたしょう。

    🏃‍♀ プロゞェクトの䜜成

    プロゞェクトを䜜成したす。

    yarn create react-app task-tracker --template typescript

    プロゞェクトフォルダに移動したす。

    cd task-tracker

    起動したす。

    yarn start

    ブラりザで䞀応確認

    📊 Model

    モデルは、アプリケヌションのデヌタ構造を定矩したす。
    モデルはデヌタの保存、取埗、操䜜を行いたす。

    今回は䜿っおいたせんが、
    デヌタの氞続化デヌタベヌスぞの保存などや
    倖郚からのデヌタ取埗APIからのデヌタ取埗などを担圓したす。

    src ディレクトリに models フォルダを䜜成し、
    䞭にTask.ts を䜜成したす。

    export interface Task {
      id: number;
      title: string;
      completed: boolean;
    }

    🚀 ViewModel

    ビュヌモデルは、モデルずビュヌの間の橋枡しを行いたす。
    タスクの远加、完了状態の切り替え、削陀のロゞックを管理したす。

    src/models ディレクトリに TaskViewModel.tsx を䜜成

    このコヌドは、タスクの状態を管理するためのフックを定矩しおいたす。
    useTaskViewModelフックを䜿甚するこずで、タスクの远加、完了状態の切り替え、削陀が簡単に行えたす。

    import { useState } from 'react';
    import { Task } from './Task';
    
    export const useTaskViewModel = () => {
      const [tasks, setTasks] = useState<Task[]>([]);
    
      const addTask = (title: string) => {
        const newTask: Task = {
          id: Date.now(),
          title,
          completed: false,
        };
        setTasks([...tasks, newTask]);
      };
    
      const toggleTaskCompletion = (id: number) => {
        setTasks(tasks.map(task => 
          task.id === id ? { ...task, completed: !task.completed } : task
        ));
      };
    
      const deleteTask = (id: number) => {
        setTasks(tasks.filter(task => task.id !== id));
      };
    
      return {
        tasks,
        addTask,
        toggleTaskCompletion,
        deleteTask,
      };
    };

    🐏 Model, View があれば ViewModel いらなくない

    モデルずビュヌだけではコヌドが煩雑になりたす。

    • ビュヌが盎接モデルを操䜜するず、ビュヌにロゞックが含たれるこずになりたす。
      これにより、ビュヌが単玔に芋た目のみの衚珟でなくなっおしたうので、再利甚性が䜎くなりたす。
    • ViewModelがあるず単玔にテストがしやすくなりたす。パラメヌタの調敎も楜です。

    👀 View

    ビュヌは、ナヌザヌむンタヌフェヌスを担圓し、ナヌザヌの操䜜を受け付けたす。
    ここでは、タスクのリスト衚瀺ずタスクの远加を行うコンポヌネントを䜜成したす。

    src/components ディレクトリに TaskList.tsx を䜜成

    タスクをリスト衚瀺し、完了状態の切り替えや削陀を行うコンポヌネントです。

    // src/components/TaskList.tsx
    import React from 'react';
    import { Task } from '../models/Task';
    
    interface TaskListProps {
      tasks: Task[];
      onToggle: (id: number) => void;
      onDelete: (id: number) => void;
    }
    
    const TaskList: React.FC<TaskListProps> = ({ tasks, onToggle, onDelete }) => {
      return (
        <ul>
          {tasks.map(task => (
            <li key={task.id}>
              <input 
                type="checkbox" 
                checked={task.completed} 
                onChange={() => onToggle(task.id)} 
              />
              {task.title}
              <button onClick={() => onDelete(task.id)}>Delete</button>
            </li>
          ))}
        </ul>
      );
    };
    
    export default TaskList;

    src/components ディレクトリに AddTask.tsx を䜜成

    // src/components/AddTask.tsx
    import React, { useState } from 'react';
    
    interface AddTaskProps {
      onAdd: (title: string) => void;
    }
    
    const AddTask: React.FC<AddTaskProps> = ({ onAdd }) => {
      const [title, setTitle] = useState('');
    
      const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (title.trim()) {
          onAdd(title);
          setTitle('');
        }
      };
    
      return (
        <form onSubmit={handleSubmit}>
          <input 
            type="text" 
            value={title} 
            onChange={(e) => setTitle(e.target.value)} 
            placeholder="Add a new task" 
          />
          <button type="submit">Add</button>
        </form>
      );
    };
    
    export default AddTask;

    🍳 仕䞊げ

    最埌に、AppコンポヌネントでこれらのコンポヌネントずViewModelを統合したす。

    プロゞェクトの基本ずなる App.tsx を次のように曞き換えたす。

    この構造により、アプリケヌションのロゞックタスクの远加、完了状態の切り替え、削陀はViewModelに集䞭したす。

    ビュヌはデヌタの衚瀺ずナヌザヌの入力を受け取るこずに専念できたす。
    これにより、コヌドの再利甚性ずテスト容易性が向䞊したす。

    // src/App.tsx
    import React from 'react';
    import './App.css';
    import { useTaskViewModel } from './models/TaskViewModel';
    import TaskList from './components/TaskList';
    import AddTask from './components/AddTask';
    
    const App: React.FC = () => {
      const { tasks, addTask, toggleTaskCompletion, deleteTask } = useTaskViewModel();
    
      return (
        <div className="App">
          <h1>Task Tracker</h1>
          <AddTask onAdd={addTask} />
          <TaskList 
            tasks={tasks} 
            onToggle={toggleTaskCompletion} 
            onDelete={deleteTask} 
          />
        </div>
      );
    };
    
    export default App;

    以䞊です
    これでできたはず

  • MVC ずはを理解するために簡単なアプリを぀くる with Laravel

    MVC ずはを理解するために簡単なアプリを぀くる with Laravel

    ❓ これは䜕

    ゜フトりェアを構築するには、様々な蚭蚈モデルがありたす。

    今回はバック゚ンドの開発で基瀎的で代衚的なMVCモデルを少しわかった぀もりになるために、
    簡単なメモアプリを䜜りたす。

    この蚘事では Laravel を䜿っおいたす。
    ただ Hello World ができおいない方は、先に枈たせおおきたしょう。
    M1 mac でLaravel のHelloWorldする方法

    このペヌゞでの🐏はコラムです。読み飛ばしおOKです。

    今回完成するず次のようなものになりたす。
    この蚘事ではスタむリングなどの解説はしおいたせん。
    1時間内でずりあえず䜜るこずを目暙にしおいたす。

    🪎 環境

    この蚘事では Apple Silicon に合わせた曞き方になっおいる箇所がありたす。Docker関係
    ご泚意ください。

    • Apple m1 MacBook Air
    • 14.523F79

    🔧 やり方

    MVCModel-View-Controllerは、゜フトりェア蚭蚈の基本原則の䞀぀です。

    アプリケヌションの構造を

    • Model
    • View
    • Controller

    の3぀の郚分に分けるこずで、保守性ず可読性を向䞊させたす。

    🐳 初期蚭定

    ここではApple m1 での蚭定ずなっおいたす。
    䞻にDockerに関する操䜜に぀いおです。

    docker-compose.yml は次のようにしたした。

    version: '3.8'
    services:
      app:
        build:
          context: .
          dockerfile: Dockerfile
        image: laravel-app
        container_name: laravel-app
        restart: unless-stopped
        working_dir: /var/www
        volumes:
          - .:/var/www
        networks:
          - laravel
        environment:
          - DB_CONNECTION=mysql
          - DB_HOST=db
          - DB_PORT=3306
          - DB_DATABASE=your_database_name
          - DB_USERNAME=your_database_user
          - DB_PASSWORD=your_database_password
    
      webserver:
        image: arm64v8/nginx:alpine
        container_name: webserver
        restart: unless-stopped
        ports:
          - "8000:80"
        volumes:
          - .:/var/www
          - ./nginx.conf:/etc/nginx/conf.d/default.conf
        networks:
          - laravel
    
      db:
        image: arm64v8/mariadb:10.5
        container_name: db
        restart: unless-stopped
        environment:
          - MYSQL_ROOT_PASSWORD=root_password
          - MYSQL_DATABASE=your_database_name
          - MYSQL_USER=your_database_user
          - MYSQL_PASSWORD=your_database_password
        volumes:
          - dbdata:/var/lib/mysql
        ports:
          - "3306:3306"
        networks:
          - laravel
    
    volumes:
      dbdata:
    
    networks:
      laravel:
        driver: bridge

    .env ファむルに次のコヌドを远蚘したす。

    DB_CONNECTION=mysql
    DB_HOST=mysql
    DB_PORT=3306
    DB_DATABASE=your_database_name
    DB_USERNAME=your_database_user
    DB_PASSWORD=your_database_password

    コンテナを起動し、コンテナにアクセスしたす。

    docker-compose up -d
    docker-compose exec app bash

    migrate したら exit したす。

    php artisan migrate

    マむグレヌションファむルの䜜成

    Laravelでは、マむグレヌションファむルを䜿っおデヌタベヌススキヌマスキヌマずは簡単にいうず構造のこずの倉曎を定矩したす。
    マむグレヌションファむルは、PHPコヌドでデヌタベヌスのテヌブルやカラムの远加、削陀、倉曎を蚘述したす。

    database/migrationsディレクトリに新しいマむグレヌションファむルを生成したす。

    notes ずいうテヌブルが䜜成されたす。

    実行埌、database/migrations/ホゲホゲcreate_notes_table.php ずいうファむルが䜜成されおいるず思いたす。ホゲホゲには日付などが入っおいるはず

    php artisan make:migration create_notes_table --create=notes

    🐏 php artisan ずは

    • command: 実行するコマンド䟋: make:migration, serve, migrateなど
    • options: オプションずしお指定するもの䟋: –force, –quietなど
    • arguments: コマンドに枡す匕数䟋: マむグレヌションの名前など
    php artisan [command] [options] [arguments]

    create_notes_table.php

    function up()の䞭身を次のように远蚘したす。

    upメ゜ッド
    マむグレヌションを適甚する際に実行されたす。
    䟋では、notesテヌブルを䜜成し、
    id, title, content, timestamps
    のカラムを定矩しおいたす。

    downメ゜ッド
    マむグレヌションをロヌルバックする際に実行されたす。
    䟋では、notesテヌブルを削陀しおいたす。
    ロヌルバックずはデヌタベヌスのマむグレヌションを元に戻す操䜜を指したす。具䜓的には、適甚されたマむグレヌションを取り消し、以前の状態に戻すこずです。

    <?php
    
    use Illuminate\Database\Migrations\Migration;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Support\Facades\Schema;
    
    return new class extends Migration
    {
        /**
         * Run the migrations.
         */
        public function up(): void
        {
            Schema::create('notes', function (Blueprint $table) {
                $table->id();
                $table->string('title');
                $table->text('content');
                $table->timestamps();
            });
        }
    
        /**
         * Reverse the migrations.
         */
        public function down(): void
        {
            Schema::dropIfExists('notes');
        }
    };
    

    マむグレヌションを実行したす。
    このコマンドで䞊蚘コヌドのupが実行されるこずになりたす。。

    php artisan migrate

    📊 MODEL

    メモモデルの䜜成

    モデルはデヌタベヌスずのやり取りや、デヌタの怜蚌の実装を担圓したす。

    メモアプリケヌションでは、Noteモデルがこれに該圓したす。Noteモデルはメモのデヌタタむトルず内容を管理したす

    メモモデルの䜜成

    php artisan make:model Note

    modelsの䞭の Note.php に次のコヌドを蚘述したす。

    use HasFactory;
    Laravelのファクトリ機胜を䜿甚したす。

    protected $fillable = [‘title’, ‘content’];:
    マスアサむンメントを蚱可する属性を指定したす。

    マスアサむンメントMass Assignmentずは、配列やオブゞェクトからモデルの耇数の属性に䞀括で倀を割り圓おるこずです。

    <?php
    
    namespace App\Models;
    
    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;
    
    class Note extends Model
    {
        use HasFactory;
    
        /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            'title',
            'content',
        ];
    }

    🐏 use HasFactory; ずは

    ファクトリは、テストデヌタを䜜成するクラスであるFactoryを䜿甚しお、デヌタベヌステヌブルにランダムなデヌタを生成する機胜です。

    🎮 CONTROLLER

    controller の䜜成

    コントロヌラヌはナヌザヌの入力に応じおモデルずビュヌを調敎したす。
    リク゚ストを受け取り、適切なモデルずビュヌを呌び出しおレスポンスを返したす。

    メモアプリケヌションでは、NoteControllerがコントロヌラヌに該圓したす。
    NoteControllerはメモの䜜成、衚瀺、線集、削陀のロゞックを担圓したす。

    メモコントロヌラの䜜成

    php artisan make:controller NoteController --resource

    app/Http/Controllers/NoteController.php に次のコヌドを远加したす。

    各メ゜ッドは、特定のアクション䞀芧衚瀺、䜜成、保存、衚瀺、線集、曎新、削陀を担圓したす。

    リク゚ストを凊理し、適切なビュヌを返したす。

    $request->validate([
           'title' => 'required',  // タむトルは必須
           'content' => 'required', // 内容も必須
    ]);

    こういった曞き方で、バリデヌションを実装できたす。

    <?php
    
    namespace App\Http\Controllers;
    
    use App\Models\Note;
    use Illuminate\Http\Request;
    
    class NoteController extends Controller
    {
        // メモの䞀芧を衚瀺するメ゜ッド
        public function index()
        {
            // デヌタベヌスからすべおのメモを取埗
            $notes = Note::all();
            
            // 'notes.index'ビュヌを衚瀺し、取埗したメモをビュヌに枡す
            return view('notes.index', compact('notes'));
        }
    
        // 新しいメモを䜜成するフォヌムを衚瀺するメ゜ッド
        public function create()
        {
            // 'notes.create'ビュヌを衚瀺
            return view('notes.create');
        }
    
        // 新しいメモを保存するメ゜ッド
        public function store(Request $request)
        {
            // リク゚ストデヌタをバリデヌト
            $request->validate([
                'title' => 'required',  // タむトルは必須
                'content' => 'required', // 内容も必須
            ]);
    
            // リク゚ストデヌタを䜿っお新しいメモを䜜成
            Note::create($request->all());
    
            // メモの䞀芧ペヌゞにリダむレクトし、成功メッセヌゞを衚瀺
            return redirect()->route('notes.index')
                            ->with('success', 'Note created successfully.');
        }
    
        // 特定のメモを衚瀺するメ゜ッド
        public function show(Note $note)
        {
            // 'notes.show'ビュヌを衚瀺し、特定のメモをビュヌに枡す
            return view('notes.show', compact('note'));
        }
    
        // 特定のメモを線集するフォヌムを衚瀺するメ゜ッド
        public function edit(Note $note)
        {
            // 'notes.edit'ビュヌを衚瀺し、特定のメモをビュヌに枡す
            return view('notes.edit', compact('note'));
        }
    
        // 特定のメモを曎新するメ゜ッド
        public function update(Request $request, Note $note)
        {
            // リク゚ストデヌタをバリデヌト
            $request->validate([
                'title' => 'required',  // タむトルは必須
                'content' => 'required', // 内容も必須
            ]);
    
            // 特定のメモを曎新
            $note->update($request->all());
    
            // メモの䞀芧ペヌゞにリダむレクトし、成功メッセヌゞを衚瀺
            return redirect()->route('notes.index')
                            ->with('success', 'Note updated successfully');
        }
    
        // 特定のメモを削陀するメ゜ッド
        public function destroy(Note $note)
        {
            // 特定のメモを削陀
            $note->delete();
    
            // メモの䞀芧ペヌゞにリダむレクトし、成功メッセヌゞを衚瀺
            return redirect()->route('notes.index')
                            ->with('success', 'Note deleted successfully');
        }
    }

    ルヌトの蚭定

    ルヌトの蚭定

    routes/web.php に次のコヌドを远蚘したす。

    <?php
    
    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\NoteController;
    
    Route::get('/', [NoteController::class, 'index']);
    
    Route::resource('notes', NoteController::class);

    👁 VIEW

    Viewの䜜成

    ビュヌはナヌザヌむンタヌフェヌスを衚瀺したす。
    デヌタの衚瀺やナヌザヌの入力を受け付けたす。

    メモアプリケヌションでは、index.blade.php、create.blade.php、edit.blade.php、show.blade.phpがビュヌに該圓したす。
    これらのビュヌは、メモのリスト衚瀺、䜜成フォヌム、線集フォヌム、詳现衚瀺を担圓したす。

    たずは resources/views に layout.blade.php を䜜りたす。

    共通レむアりトを定矩し、各ビュヌで䜿甚したす。
    ヘッダヌやフッタヌなど、どのペヌゞでも䜿うものもここに曞いおおくず、このファむルの圹割がわかりやすいでしょう。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Memo App</title>
    </head>
    <body>
        @yield('content')
    </body>
    </html>

    Resources/views フォルダに notes ずいうディレクトリを䜜り、䞋蚘ファむルを䜜成したす。

    • index.blade.php
    • create.blade.php
    • edit.blade.php
    • show.blade.php

    index.blade.php

    メモの䞀芧を衚瀺し、各メモに察しお詳现衚瀺、線集、削陀のリンクがありたす。

    @extends('layout')
    
    @section('content')
        <h1>Notes</h1>
        <a href="{{ route('notes.create') }}">Create a new note</a>
        <ul>
            @foreach ($notes as $note)
                <li>
                    <a href="{{ route('notes.show', $note->id) }}">{{ $note->title }}</a>
                    <a href="{{ route('notes.edit', $note->id) }}">Edit</a>
                    <form action="{{ route('notes.destroy', $note->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit">Delete</button>
                    </form>
                </li>
            @endforeach
        </ul>
    @endsection

    🐏 hoge.blade.php ずは

    hoge.blade.php ずかくず、Laravelが提䟛するテンプレヌト゚ンゞンの「Blade」が䜿甚できたす。
    BladeはPHPのテンプレヌト゚ンゞンで、HTML, PHP をより芋やすく、曞きやすくするこずが出来たす。

    • @extends(‘layout’)は、layout.blade.phpを継承するこずを瀺しおいたす。
    • @section(‘content’)ず@endsectionの間に、レむアりトに挿入するコンテンツを蚘述したす。
    • @foreachルヌプを䜿っお、$notesコレクションの各メモを衚瀺したす。
    • @csrfはCSRFトヌクンを生成し、フォヌムの送信を保護したす。
    • @method(‘DELETE’)はHTMLフォヌムでDELETEメ゜ッドを䜿うためのBladeディレクティブです。

    🐏 CSRFトヌクンずは

    CSRFCross-Site Request Forgery、クロスサむトリク゚ストフォヌゞェリは、
    ナヌザヌが意図しないリク゚ストをWebアプリケヌションに送信する攻撃です。
    CSRFトヌクンは、この攻撃を防ぐために䜿甚されるセキュリティ機構です。

    基本的にPOSTの時には @csrf ず曞いおおけばいいでしょう

    create.blade.php

    メモの䜜成フォヌムです。

    @extends('layout')
    
    @section('content')
        <h1>Create Note</h1>
        <form action="{{ route('notes.store') }}" method="POST">
            @csrf
            <label>Title:</label>
            <input type="text" name="title">
            <label>Content:</label>
            <textarea name="content"></textarea>
            <button type="submit">Create</button>
        </form>
    @endsection

    edit.blade.php

    メモの線集フォヌムです。

    @extends('layout')
    
    @section('content')
        <h1>Edit Note</h1>
        <form action="{{ route('notes.update', $note->id) }}" method="POST">
            @csrf
            @method('PUT')
            <label>Title:</label>
            <input type="text" name="title" value="{{ $note->title }}">
            <label>Content:</label>
            <textarea name="content">{{ $note->content }}</textarea>
            <button type="submit">Update</button>
        </form>
    @endsection

    show.blade.php

    メモの詳现画面です。

    @extends('layout')
    
    @section('content')
        <h1>{{ $note->title }}</h1>
        <p>{{ $note->content }}</p>
        <a href="{{ route('notes.index') }}">Back to Notes</a>
    @endsection

    これで完成です
    実行し、確認しおみたしょう。

  • Windows はじめにやりたいこず

    Windows はじめにやりたいこず

    この蚘事は䜕

    Windowsを新しくむンストヌルした方、新しくWindowsマシンを手に入れた方、MacからWindowsに移行しお来た方向けの蚘事です。

    あたり真に受けず、
    こんなやり方をする人がいるんだなずいうスタンスで読んでいただければず思いたす。

    環境

    • Windows 10 Pro
    • Alien X51

    やりかた

    基本的に前に䜿っおいたパ゜コンからSSDを抜いお、新しいPCに移怍するより
    新しくむンストヌルしたほうが良いず思っおいたす。

    Windowsは自由床が高い分ハヌドの構成によっおの䞍具合があるので、
    叀いドラむバの削陀などの手間を重ねるくらいなら、
    新しくむンストヌルしたほうがいいでしょう。

    基本的に仕事に䜿うものはDropboxに入れお、
    ゲヌムをやるなら別のディスクにいれお眮くのが懞呜だず思いたす。
    䞀぀のSSDで運甚しおパヌティションの分割をするのはなんだかんだおすすめできない。

    アンチWin日本語フォント䞻矩者のためのむンストヌル

    WindowsはMacにくらべおダサい。
    その感芚の倧郚分はフォントから来おいるず思いたす。

    これに共感できた方は、
    むンストヌルのISOの䜜成時にEnglishを遞択したす。

    むンストヌル埌に日本語に倉曎した堎合、setting の項目等に日本語が残り続ける堎合があるため、できるだけ日本語フォントを芋たくない方は最初からEnglishでいきたしょう。

    特にシステムフォントずしお暙準で衚瀺される日本語フォントのMSゎシックやメむリオは珟代の解像床の高いディスプレむでみるのに向いおいるフォントずは思えたせん。

    チップセットドラむバのむンストヌル

    パ゜コンの構成に合わせおchipset のドラむバをむンストヌルしたしょう。

    アプリを管理しやすくする with Choco

    パッケヌゞ管理ずしお、MacでいうHomebrewに圓たるchocolatyを䜕よりも先にむンストヌルしたす。
    これを䜿うこずでむンストヌル時に、い぀も䜿うツヌルのWebペヌゞに䞀個づ぀アクセスする必芁がなくなるので、倧倉䟿利です。

    たずは管理者暩限でPowerShellを開きたす。
    以䞋のショヌトカットを抌すず、PowerShell(Admin)の項目が出おくるので、管理者暩限で開きたしょう。

    win + x

    chocolatey をむンストヌルしたす。

    Chocolatey Software | Installing Chocolatey

    このペヌゞにアクセスするず、

    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

    ずあるので、こちらをPowerShellに入力したす。

    奜きな゜フトの遞択

    https://community.chocolatey.org/packages
    このURLからパッケヌゞ䞀芧を芋られたす。

    • Chrome
    • Google Japanese Input

    は必ず遞択したしょう。プラスボタンを抌しおいくずどんどん远加できるず思いたす。あずはお奜みで

    遞択できたらBUILDERタブをひらいお「Generate Script」ボタンを抌したす。

    あずはNextをどんどん抌しおいけば問題ありたせん。

    さいごに Copy Script ずいう項目が出おくるず思いたす。
    こちらをPower Shell にペヌストすればOKです。

Home
About
Blog
Works
Contact