Web開発

ローカルの開発モックを ngrok で公開し、Backlog Wiki を自動更新するシェルスクリプト レビュー担当者にモックアプリを見せたいとき、毎回「URL 変わりました」と連絡するのが面倒になったので、ngrok 起動 → Backlog Wiki 自動更新を1コマンドで済ませるスクリプトを作りました。 背景 社内プロジェクトで React のモックアプリを開発しています。レビュー担当者（非エンジニア）にモック画面を確認してもらう際、以下のような手順を毎回踏んでいました： npm run dev でローカルサーバーを起動 ngrok http 3000 でトンネルを張る 発行された URL をコピー Backlog の Wiki ページを開いて URL を貼り替える レビュー担当者に連絡 ngrok の無料プランでは URL が起動ごとに変わるため、毎回 Wiki を手動更新する必要がありました。これを自動化します。 スクリプトの全体像 ./scripts/serve-public.sh [user:password] 1コマンドで以下が実行されます： Vite dev server 起動 ↓ ngrok トンネル開通（Basic認証付き） ↓ Backlog Wiki に URL を自動反映 ↓ Ctrl+C で全プロセス停止 実装のポイント 1. Vite の起動待ち Vite dev server はバックグラウンドで起動しますが、すぐには HTTP リクエストを受け付けません。ポーリングで起動完了を待ちます： 1 2 3 4 5 6 for i in $(seq 1 15); do if curl -s -o /dev/null http://localhost:$PORT 2>/dev/null; then break fi sleep 1 done 15秒以内に応答がなければエラーとして終了します。 ...

uv https://docs.astral.sh/uv/ nix: https://github.com/pyproject-nix/uv2nix インストール 1 % curl -LsSf https://astral.sh/uv/install.sh | sh 1 2 3 4 5 6 7 8 9 10 11 downloading uv 0.5.14 aarch64-apple-darwin no checksums to verify installing to /Users/hdknr/.local/bin uv uvx everything's installed! To add $HOME/.local/bin to your PATH, either restart your shell or run: source $HOME/.local/bin/env (sh, bash, zsh) source $HOME/.local/bin/env.fish (fish) 1 2 3 % source .local/bin/env % which uv /Users/hdknr/.local/bin/uv 1 2 % uv --version uv 0.5.14 (9f1ba2b96 2025-01-02) uvx (uv tool run) uvではdevelop環境で利用するtoolをuv tool(uvx)というコマンド別管理することが可能 ...

Python: HTTP 簡単なHTMLサーバー(http.server + SimpleHTTPRequestHandler) ディレクトリ一覧を返す 1 2 3 4 5 6 7 8 9 10 import http.server import socketserver PORT = 8000 Handler = http.server.SimpleHTTPRequestHandler with socketserver.TCPServer(("", PORT), Handler) as httpd: print("serving at port", PORT) httpd.serve_forever()

メール送信 Djangoでメールを送信する際に、都度サーバーを切り替える方法はいくつかあります。以下の手順で実装できます。 メールサーバーの設定を動的に変更する: DjangoのEmailMessageクラスを使用して、メール送信時にサーバー設定を動的に変更できます。例えば、以下のようにconnectionパラメータを使用して異なるサーバーを指定します。 1 2 3 4 5 6 7 8 9 10 11 12 13 from django.core.mail import EmailMessage, get_connection def send_email(subject, message, from_email, recipient_list, server_settings): connection = get_connection( host=server_settings['EMAIL_HOST'], port=server_settings['EMAIL_PORT'], username=server_settings['EMAIL_HOST_USER'], password=server_settings['EMAIL_HOST_PASSWORD'], use_tls=server_settings['EMAIL_USE_TLS'], use_ssl=server_settings['EMAIL_USE_SSL'], ) email = EmailMessage(subject, message, from_email, recipient_list, connection=connection) email.send() サーバー設定のリストを用意する: 複数のサーバー設定をリストで管理し、メール送信時にランダムまたは順番に選択する方法です。 ...

Javascript ページ内のアンカーの取得 ブラウザの「検証」でコンソールからプログラムを実行 1 2 3 4 5 6 // ページ内のすべてのアンカー要素を取得 const anchors = document.querySelectorAll('a'); // アンカーのhref属性を配列に格納 const urls = Array.from(anchors).map(anchor => anchor.href); // 結果をコンソールに表示 console.log(urls);

JAMStack 記事 【徹底比較】Jamstack vs WordPress｜これからのWebはJamstack！ Netlify vs Wix 【2024年版】おすすめのReactベース静的サイトジェネレーター6選 静的サイトジェネレータについて初心者向けに分かりやすく解説 【2024年】Webデザインのトレンド・参考サイトまとめ JamstackによりWebサイト構築のあり方が一変する可能性 2024年のWeb開発業界トレンドと最新技術 Jamstackで制作はどう変わる？ 「削減できるもの」と「必要になるもの」 Jamstack とは何なの？メリットとデメリットはあるの？ Jamstackとは何か？その意味と重要性について詳しく解説 JamStack簡単まとめ Jamstack入門：次世代ウェブ開発のための革新的なアーキテクチャとは何か？ 2024 年の Web 開発トレンド トップ 10 Jamstackとは？パフォーマンスの高いフロントエンド構築 Jamstackによるサイト構築について 新しい古典：Jamstack と MACH が従来の CMS の概念に向け進化する 今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流 セキュリティ: 【2024年】サイバーセキュリティの現状と今後の方向性 Wordpress Jamstack、ノーコード vs WordPress？　2024年のWeb制作トレンドを予想しよう【おすすめUdemy講座紹介 ブロックエディタ FSE Snow Monkey, SWell Wordpress + Snow Monkey, Wordpress + Astro データ主権 マーケットシェア Wordpressは 60% (40%など調査主体による) シェア 0.2% 高トラフィックサイトで利用されている。 Netlify対Wix:違いは何ですか？ はじめに: この記事では、NetlifyとWixの主な違いについて説明します。 これらのプラットフォームはさまざまな目的を果たし、Netlifyは人気のあるWeb開発およびホスティングプラットフォームですが、WixはWebサイトビルダーおよびホスティングプラットフォームです。 それらの違いを理解することは、個人や企業がWeb関連のニーズに合った適切なプラットフォームを選択するときに、情報に基づいた決定を行うのに役立ちます。 導入プロセス:Netlifyは、開発者がGitを使用してWebサイトを簡単に構築、テスト、および展開できるようにする、最新の合理化された展開プロセスを提供します。 継続的な展開、バージョン管理、ワンクリック展開を提供し、高速で効率的なワークフローを求める開発者に最適です。 一方、Wixは、Webサイトを作成するためのよりユーザーフレンドリーなドラッグアンドドロップインターフェイスを提供します。 これは、技術的な専門知識のない個人に対応する簡略化されたWebサイト構築エクスペリエンスを提供します。 ...

Flex flex は CSS の display プロパティの値です。 inline-flex と同じく、要素に適用するとフレックスコンテナーになり、その要素の子要素はそれぞれフレックスアイテムになります。 アイテムはフレックスレイアウトに参加し、CSS フレックスボックスレイアウトで定義されているすべてのプロパティが適用されます。 flex プロパティもあり、これはフレックスボックスの flex-grow、flex-shrink、flex-basis の各プロパティの一括指定です。 このプロパティはフレックスコンテナーにのみ適用されます。 Flexbox (フレックスボックス) フレックスボックスは、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである CSS flexible box layout module に対する一般的な通称です。 この仕様書では、フレックスボックスはユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。 フレックスボックスの重要な特徴が、フレックスレイアウト内のアイテムが伸縮することができることです。 余白はアイテム自体に割り当てることも、アイテムの間や周囲に配分することもできます。 また、フレックスボックスはでは主軸や交差軸上の配置を指定することもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。 Flex Container (フレックスコンテナー) フレックスボックスレイアウトは、flex または inline-flex を親要素の display プロパティの値に使用することで定義されます。 この要素はフレックスコンテナーとなり、その子要素それぞれはフレックスアイテムとなります。 値に flex を指定すると、この要素は ブロックレベルのフレックスコンテナー となり、inline-flex を指定すると、 インラインレベルのフレックスコンテナー となります。 これらの指定は、その要素に対するフレックス整形コンテキストを作成します。 これはブロック整形コンテキストと、不動要素がコンテナーの中に侵入せず、コンテナーのマージンがアイテムのマージンとの間で相殺されないという点で似ています。 Flex Item (フレックスアイテム) フレックスコンテナー（display: flex または display: inline-flex が設定された要素）の直下の子要素はフレックスアイテムとなります。 フレックスコンテナー内で直下に続くテキストもフレックスアイテムになります。 記事 【初心者・独学】ブロックレベル要素とインライン要素の配置(縦積み・横並び) (ブロック: 縦, インライン: 横) 【初心者・独学】フレックスボックスで、ブロックレベル要素を横並びにする。

Python: DOM lxml Recommended way to generate XHTML documents with lxml etree 1 2 3 4 5 6 7 8 9 10 11 12 13 14 from lxml import etree # ルート要素を作成 html = etree.Element("html") body = etree.SubElement(html, "body") h1 = etree.SubElement(body, "h1") h1.text = "タイトル" p = etree.SubElement(body, "p") p.text = "これは段落です。" # HTMLを文字列として取得 html_string = etree.tostring(html, pretty_print=True, encoding='unicode') print(html_string) cssutils cssutilsを使ってゼロからCSSを構成するのは比較的簡単です。以下の手順でCSSスタイルシートを作成し、ルールを追加することができます。 ...

Tailwind チートシート tailwind.config Get started with Tailwind CSS Play CDN: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { clifford: '#da373d', } } } } </script> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body> </html> 高さ: ...

Gastby レイアウト wrapper.js Gatsbyのwrapper.jsファイルは、ページ全体をラップするために使用されるファイルです。 このファイルを使用することで、特定のHTML要素やReactプロバイダーでページをラップすることができます。 これにより、ページ全体に共通のレイアウトや機能を簡単に適用できます。 例えば、以下のようにwrapper.jsファイルを作成し、ページを特定のコンポーネントでラップすることができます。 1 2 3 4 5 6 import React from 'react'; import Layout from './src/components/Layout'; export const wrapPageElement = ({ element, props }) => { return <Layout {...props}>{element}</Layout>; }; この例では、Layoutコンポーネントでページ全体をラップしています。これにより、すべてのページに共通のレイアウトが適用されます。 さらに詳しい情報や具体的な使用例については、Gatsbyの公式ドキュメントを参考にすると良いでしょう¹。 他に知りたいことがあれば教えてくださいね！ ソース: Copilot との会話、 2024/9/4 (1) gatsby-plugin-wrap-pages | Gatsby. https://www.gatsbyjs.com/plugins/gatsby-plugin-wrap-pages/. (2) Gatsby公式チュートリアルやったよ #JavaScript - Qiita. https://qiita.com/irico/items/cf87eb29ecaf7e135fcd. (3) Gatsby.js 入門 - Zenn. https://zenn.dev/dev8/articles/gatsby_tutorial. (5) en.wikipedia.org. https://en.wikipedia.org/wiki/Gatsby_(software). wrapper.js: 1 2 3 4 5 6 7 8 9 import React from "react"; import Layout from "./layout"; export const wrapPageElement = ({ element }) => { return ( <> <Layout>{element}</Layout> </> ); }; layout.js: ...