はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 令和トラベルでは、海外旅行におけるあたらしい体験を目指す海外ツアー・ホテル予約アプリ「NEWT（ニュート）」を提供しています。NEWTではWebアプリを提供しており、Webアプリのパフォーマンスにおいて、画像は非常に重要な要素です。特に、ページの読み込み速度はカスタマー体験に直結するため、画像の最適化は欠かせません。Next.jsのImageコンポーネントは、画像最適化を容易にし、Webパフォーマンスを向上させる強力なツールです。 この記事では、next/imageのコア機能を3つのセクションに分けて解説し、Next.jsで画像最適化を行う方法を具体的に説明します🗺️ ※ この記事はVercel Meeetup #1で共有した内容を記事にしたものです。 next/imageの主要機能 React
はじめに こんにちは、id:ahogappaです。 ここ最近ずっとRubyスクリプトのワンバイナリ化ついて模索しており、 zenn.dev zenn.dev 先日、ついにRubyKaigi 2024でこれまでの成果を発表してきました。 https://rubykaigi.org/2024/presentations/ahogappa0613.html#day2 speakerdeck.com 今回は、RubyKaigiで盛り込みきれず発表できなかった内容を、今後の備忘録としてもまとめてみようと思います。 RubyKaigiの発表について 簡単にRubyKaigiで発表内容について紹介しますと、 Rubyにおいてワンバイナリ化する用途・モチベーション 作ったGem(Kompo)の紹介 ワンバイナリ化する手法 今後やっていきたいこと について発表してきました。 今回私はワンバイナリ化ツールとし
備忘録として残します PHP : 8.1 WordPres: 4.6.3 Simply Static ： 3.1.6.2 プラグインの選定理由 WordPressの静的化プラグインを調べてみると、様々なプラグインが存在します。 その中で今回、Simply Staticを選んだ理由としては以下のような理由があります。 有効インストール数の多さ 更新頻度 (確認したときだと最終更新が5日前) 豊富な機能 UIの見やすさ 自分でデバックしてくれる 詳細について詳しく説明していきますが、有効インストールと更新頻度についていわずもがななので、省略！ 豊富な機能 機能面については、生成した静的ファイルをサーバーに格納や、Zip、CDNなどの方法で出力することが可能です。 また、静的ファイルの出力内容も、絶対パス、相対パス、ローカル環境など複数から選べるので、大体これを入れておけばどうにかなると思います
6.24.1 プログラムの終了 Gaucheは(mainから返る以外に)自分自身を終了させる方法をいくつか 提供しています。exit手続きが、正しいクリーンアップを行って 優雅に終了する方法です。一方、正しいクリーンアップが不可能な非常事態には sys-exitかsys-abortを使います。 Function: exit :optional (code 0) (fmtstr #f) args … ¶ [R7RS+ process-context] 現在のプロセスを終了し、codeを終了コードにします。 codeが#tなら成功を意味し、終了コードは0に、 codeが#fなら失敗を意味し、終了コードは1に、 そして正確な整数の場合はその下位8bitが終了コードとして使われます。 codeがそれ以外のオブジェクトの場合は、 終了コードは70 (EX_SOFTWARE)になります。 (R7RSで
先日、開発にdevcontainerを使用するという以下の記事を書きました。 yoh1496.hatenablog.com とても便利なんですが、作ってみたはいいものの、「devcontainer」という機能自体がVisual Studio Codeの1機能に過ぎないので、 複数人が様々な環境で開発するオープンソースプロジェクトでおいそれと導入するわけにはいかず、 このコンテナを定義したフォルダをどのように管理するか？ という悩みがありました。 そこで考えたのが 別リポジトリ化 です。 従来の考え方 この考え方は個人的な誤解によるものなんですが、「.devcontainerはソースコードと同じフォルダになければならない。」と考えていました。 ソースコードAを開発する際に開くコンテナはコレ、と指定するのが.devcontainerフォルダの役割だと思っていたため、ぐぬぬ、となっていました。
こめきちdiary
はじめに 今日、LINE Pay終了のお知らせが、私のLINEメッセージに届いた。来年2025年4月末をもって完全にサービスを終了するとのことである。 今年から税金の支払いのために使い始めたばかりなのであるが、わずか1回の利用で終了してしまうとは誠に残念である。 背景にはどのような事情があるのだろうか。 目次 はじめに サービス停止の理由とは 過去にも同様のことがあった 今後のサービス停止までの流れ 最後に サービス停止の理由とは どうやらPayPayとの競合を嫌ったようである。ご存知のとおり、LINE PayもPayPayも同じソフトバンクグループ傘下の会社である。 経営側としては、同じグループ内に複数の決済サービスを持つことは、企業のリソース分散、利用者の分散を招いてマイナスだと判断したのだろう。 LINE Payの残額はPayPayに移行できることがアナウンスされている。よって実質的
はじめに Windowsバッチでもデータベースの値を取得することができます。 今回、WindowsバッチでSQLiteのデータベースの値を取得する方法を解説します。 ただし、今回解説する方法はWindows上に存在するDBの値を取得する方法に限りますので、 別サーバー上のDBの値を取得する方法ではないのでご注意ください。 1. サンプルコマンド まずサンプルとして、以下の情報のときsample_tableのvalueを取得する例をあげます。 SQLite起動exeファイル：sqlite3.exe DBファイル：sampleDb.sqlite 取得したいテーブル：sample_table 取得したいカラム：value set SQLCMD=sqlite3.exe "sampleDb.sqlite" "select value from sample_table;" setlocal enab
はじめにSwift(SwiftUI) で iPhone, iPad から BOM 付 UTF-8 のカンマ区切り CSV ファイルを保存できるアプリを作成しました。 アプリと言っても、ボタンが一つだけ有り、ダミーデータから CSV ファイルを出力するという最低限のものです。 今回、実装内容と速攻で実装して動作確認する手順を書きます。 【検証環境】 macOS Monterey 12.6 Xcode 13.4.1 Swift 5.7 (SwiftUI) 本記事の内容により何らかの不都合が生じても当方は一切責任を負いません。 動作内容達成すべきことは、 ・iPhone のテキストビューワー（ファイルアプリでタップして表示されるもの）で表示できる ・Windows のエクセル（バージョン 2209）で表示できる ・macOS のエクセルで表示できる のみとします。 時刻名前数値 を 10 行生成
【Unity】UnityEditor上でプロジェクト直下やPackagesやUserSettingsやLogsといったパスをPath.Combineで取得する(System.Environment.CurrentDirectoryを使ってはダメ) - はなちるのマイノート
はじめに 今回はUnity Editor上でプロジェクト直下・Packages・UserSettings・Logsといったパスの取得方法を紹介したいと思います。 利用している様子 はじめに やり方 Application.dataPathについて やり方 以下はUnity Editor上での取得方法です。 // コメントはMac上での出力例になっています。 // Assets直下 : /Users/[UserName]/[ProjectName]/Assets Debug.Log(Application.dataPath); Debug.Log(Path.GetFullPath(Application.dataPath)); // Project直下 : /Users/[UserName]/[ProjectName] Debug.Log(Path.Combine(Application.d
はじめに こんにちは、@nano_sudoです! 皆さんは、普段何も考えずにos.pathを使っていませんか？ タイトルにもある通り、pathlibが便利すぎるので、今日はpathlibをマスターして、os.path地獄から脱出しましょう！ pathlibとは pathlibは、ファイルパスを扱うためのライブラリです。 pathlibを使うと、ファイルパスを文字列で扱うのではなく、オブジェクトとして扱うことができます。 os.pathじゃだめなの？ pathlibは、os.pathと比べて、次のようなメリットがあります。 豊富なメソッド pathlibは、ファイルパスをオブジェクトとして扱うので、ファイルパスに対して様々な操作を行うことができます。 パスの区切り文字の違いを吸収してくれる pathlibは、OSによって異なるパスの区切り文字を吸収してくれます。 例えば、Windowsでは\
JavaScript人気バンドラーを徹底比較─Rollup、Webpack、Parcelの特徴と違い ウェブ開発の世界において、JavaScriptは動的かつインタラクティブなシングルページウェブアプリケーションを支える強力な存在です。ウェブアプリケーションが複雑化する中で、JavaScriptライブラリ、フレームワーク、依存関係の数も増えています。その結果、コードベースが肥大化して非効率になり、パフォーマンスやユーザーエクスペリエンスが損なわれてしまうことも。 この課題に取り組むため、JavaScriptバンドルツール（バンドラー）が導入されました。コードの質やパフォーマンスを高める効果が期待できます。JavaScriptバンドラー界の3つの重鎮として知っておきたいのが、Rollup、Webpack、Parcelです。 この記事では、これらのバンドラーの包括的な解説として、それぞれの長短
バックエンド開発入門 サーバーとデータベースの基礎 これから作成するページは動的なページです。 サーバーがリクエストを受け取り、処理を行った結果としてHTML、CSS、JavaScriptをレスポンスとして返します。そのレスポンスをブラウザが受け取り、内容を描画するという流れです。 このプロセスを理解することで、動的なWebアプリケーションを開発できるようになります。 目次： ターミナルの使用方法 基本コマンド まとめ ターミナルの使用方法 ターミナルは、テキストベースでPCとやり取りするツールです。 ターミナルを使うことで、GUIよりも効率的に開発が可能になります。 また、普段は見えない領域にアクセスしたり、サーバーの管理、動いているプロセスの停止、設定ファイルの操作など、さまざまな作業ができます。 多くの開発ツールはターミナルから操作する必要があるため、ターミナルの使用に慣れることは重
"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } Vite での設定 TypeScript での設定を Vite で使い回せる vite-tsconfig-paths というパッケージを使う。 で、 vite.config.ts で次のように設定する。
auditd のメモ - ngyukiの日記
とある事情でファイル改竄検知や root によるコマンド実行の検知のために auditd を使う必要があったのでそのメモ。 試した環境は次の通りです。 centos-release-7-9.2009.0.el7.centos.x86_64 audit-2.8.5-4.el7.x86_64 kernel-3.10.0-1160.83.1.el7.x86_64 参考 https://rheb.hatenablog.com/entry/audit https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/security_guide/chap-system_auditing https://github.com/alphagov/puppet-auditd/blob/main/examples/au
先日、Node.jsのExpressの静的ファイル提供機能であるexpress.staticの扱いが上手くいかずにつまづいたので、直面した問題と解決方法をメモ。 なお本記事の結論、というか話の軸は「expressの仕様をちゃんと把握しようね」なので、僕とあなたの開発環境や前提に相違点があっても、一度全文読んでみてほしい。 ややくどい記事になるので、結論を最初に述べる。 express.static関数に指定するパスは、nodeプロセスを起動するディレクトリに対して相対的です。別のディレクトリからExpressアプリケーションを実行する場合は、提供するディレクトリーの絶対パスを使用する方が安全です。 環境・前提 Windows11 WSL2 Ubuntu 20.04.4 LTS React Node.js 16.14.2 npm 8.5.0 フロントをReact、バックをNode.js（Ex
値は実行しているプラットフォームによって異なります。 Unity Editor: <path to project folder>/Assets Mac プレイヤー: <path to player app bundle>/Contents iOS プレイヤー: <path to player app bundle>/<AppName.app>/Data (このフォルダーは読み込み専用で Application.persistentDataPath を使用してデータを保存します。) Win/Linux player: <path to executablename_ Data folder> （ほとんどの Linux では大文字と小文字は区別されるので注意してください。） WebGL: 再生プレイヤーのデータが含まれているフォルダーの絶対パス (URL には実際のデータファイル名は含まれず
これは、もち山金魚さんのかわいい3Dアバター「まめひなた」に、スカジャンを着せ、GPT-4と魂のプロンプトを吹き込んだ、音声で会話を楽しんだり観光案内をしたりしてくれるAIアバターです。 これをはじめるいきさつは、一緒に担当した観光課のDropkixさんの記事をお読みください！ 微力ながら私もDropkixさんとともにこの試験運用を担当したのですが、かわいいアバターが目の前で喋っている光景があまりにも素敵すぎて、ほぼ24時間駆動できるAIなのに、試験期間中だいたい毎日1度は見守りに行っていました。庇護欲がやばかった…。 かわいい…未成年（14歳）の設定なのに、海鮮丼やマーロウのプリンだけでなく 横須賀ビールがお供えされてしまったそーだんいんさん出張先のVRC-JP初心者プラザでいつの間にか ペンラ持ってるみたいになっているそーだんいんさん…。 ハッ、写真を眺めていたら小一時間経ってしまった
wp_enqueue_block_style() 関数は、特定のブロックに対応するスタイルを読み込むための関数です。 目次 wp_enqueue_block_style() 関数とは 特定のブロックで使用する CSS ファイルを読み込むことができます。 $args['path'] にもファイルへの絶対パスを設定することで、CSS ファイルサイズが一定以下であればインラインで出力し、一定以上であれば $args['src'] で指定しているファイルを読み込みます。 パラメーター $block_name名前空間を含んだブロック名（ core/paragraph など）$args引数の配列 handle スタイルシートのハンドル名 src スタイルシートの URL deps このスタイルシートが依存するスタイルシートのハンドル名を配列で指定 ver スタイルシートのバージョン番号 media こ
統合開発環境 Eclipse の Windows 7/8.1 におけるセットアップ手順を自分のためにメモ。 Pleiades All in One の入手 Eclipse (「イクリプス」または「エクリプス」) は無償で公開されていますが、公式 Web サイト → Eclipse 公式サイト から入手できるのは英語版のみです。Eclipse を日本語化するには、英語版の Eclipse に Pleiades (プレアデス) という日本語化プラグインを導入する方法があります。 Pleiades All in One を利用するとセットアップの手間が省けます。Pleiades All in One は、Windows 向けに、Eclipse 本体と Pleiades をはじめとする様々なプラグインをひとまとめにしたものです。以下のサイトから入手できます。 → MergeDoc Project：
SharePointのライブラリのファイルのパスを取得してみた
SharePointでファイル管理している場合、「ここにファイル置きました」ってメール送ることがよくあります。日本企業であれば、フォルダ名は当然日本語のことが多く、そのままリンクを取得するとエンコードされて「/sites/portal/DocLib/01.%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9/…」 のように可読性が下がりますよね。 私が欲しいのは 「/sites/portal/DocLib/01.要件定義/01.業務フロー/…」 のようにパッと見た時にどの階層に配置されているのかがわかるように取得したいんです。 というわけで色んな方法でリンクを取得して最適解を求めてみましょう。 理想：https://<テナントURL>/sites/<サイトパス>/DocLib/01.要件定義/02.業務フロー/帳票登録/Excel.xlsx まずは、モダンUIの「リンク
ShellScriptまとめ - Qiita
はじめに シェルスクリプトで学んだことをまとめていきます． ほとんど自分用です． CURRENT=$(cd $(dirname $0) && pwd)の意味 これはどこでスクリプトを実行しても同じ結果になるためによく使うコマンドだそうです． スクリプトが置かれている場所の絶対パスをCURRENTに入れます． 実行するシェルがこちら
カスタムCSS - 汎用掲示板ビューアSikiまとめ Wiki*
タブのカスタマイズ タブのタイトルを複数行表示する タブの固定幅は変えずに、スレタイを1行表示から数行表示に変更 user.cssにて、この場合2行表示 .thread-tabs .title { white-space: initial; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-bottom: 0; } 「-webkit-line-clamp」で、最大行数指定 white-spaceのみ設定すると、タイトル全て表示 「.tab .title」指定だと、板タブ含む スレタブの各種数値表示を縦並びにする 上記の複数行表示を適用した上でこちらも設定することでスレタイ表示の幅を稼げる。 .thread-tabs .tab { flex-shrink: 0; display
こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。 FTPサーバーやS3、GitHubページなどに静的サイトをデプロイしたい時ってありますよね。 Next.jsやGatsbyなどと言ったフレームワークを用いてデプロイする際に、『CSSや画像が読み込まれない』ということがあるので、その忘備録を残します。 なぜCSSや画像が読み込まれないのか まず、なぜCSSや画像が読み込まれないのか、 画像は、CSSが当たっていないスクリーンショットです。 コンソールに表示されている通り、404エラーとなっているようです。 CSSファイルがアップされていないのかな？と思いきや、、、 実ファイルはちゃんとアップされているようでした。 ではなぜ、404エラーなのか。 答えはlinkタグにありました。 スクリーンショットを確認すると/next/static/から呼び出そうとしています。 この先頭の
「bulletproof-react」からReactのベストプラクティスを勉強していく。 セットアップ 以下のコマンドを実行するだけで、手元で動かして確認することができる。 git clone https://github.com/alan2207/bulletproof-react.git cd bulletproof-react cp .env.example .env yarn install 標準 コードを綺麗に保つツール ESLint Prettier TypeScript Husky Gitフック（コミットやプッシュ等を行う前後に自動的に実行されるスクリプト）を管理するツール 絶対パスによるimport 下記のように設定することでimport { XXX } from '@/components/ui'というようにsrc/からの絶対パスでimportできる。 ※ 設定しないとi
GoogleはリンクのSEO効果を年々弱めており、コンテンツの品質で検索順位を決定するようにしています。 しかし、リンクの効果が弱まっているというよりも、Googleがリンクの品質を精査しており、低品質なものを無効化、良質なものだけを評価しているので、リンクの効果が弱まっているように感じるだけです。 現在でも、良質なリンクであれば、高いSEO効果を発揮することができるので、SEOに取り組んでいるWebマスターはリンクについて学ばなくてはなりません。 当ページでは、リンクとは何かや、6つの種類、タグの記述法、SEO効果を高めるリンクの在り方、SEOで考えるべきリンク対策、リンクの精査や最適化に役立つ無料ツールを紹介します。 リンクとは、英語で書くとlinkになり、日本語に訳すと、動詞では「ふたつのものを繋ぐ」や「結合する」、名詞では「鎖の環」、「輪」、「絆」になります。 Web業界におけるリ
)
MEEP (公開) - PukiWiki
MEEPとは† 時間領域差分法（FDTD法）による電磁場のシミュレーションを行うプログラムです。 Simpetusによってオープンソースで開発されており、フリーで使えます。 商用ソフトではLumerical(FDTD)やCOMSOL(FEM)、富士通のPoytingがありますが、かなり高価です。 例えば、富士通のPoyntingは350〜万円するようです。 フリーのFDTDソフトとしてはMEEPがほぼ唯一の選択肢だと思います。 オープンソースであることやCUIベースであることから、使用者による機能の追加が簡単で自由度が高いのが特徴だと思います。 ↑ PyMeepのインストールと実行† Linux環境でPythonを用いてMEEPが使えるようになることを目標とします。 MEEPはLinuxとMacでしか動作しないため、Windowsを使用する場合はWSL(Windows Subsystem
ネイティブ メッセージング | Chrome Extensions | Chrome for Developers
拡張機能は、他のメッセージ受け渡し API と同様の API を使用して、ネイティブ アプリとメッセージを交換できます。この機能をサポートするネイティブ アプリは、拡張機能と通信できるネイティブ メッセージング ホストを登録する必要があります。Chrome はホストを別のプロセスで起動し、標準の入力ストリームと標準出力ストリームを使用してホストと通信します。 ネイティブ メッセージング ホスト ネイティブ メッセージング ホストを登録するには、ネイティブ メッセージング ホストの構成を定義するファイルをアプリケーションで保存する必要があります。 ファイルの例を次に示します。 { "name": "com.my_company.my_application", "description": "My Application", "path": "C:\\Program Files\\My Ap
OGPタグのまとめ - Qiita
OGPタグとは OGPタグとは「Open Graph Protcol」の略です。OGPタグは、FacebookやX（旧Twitter）、Slack、LinkedInなどのSNSでシェアした際に設定したWEBページのタイトルや画像、詳細情報などを共有することができます。 OGPタグを利用するメリット 正確な情報をユーザーに伝えることができるためです。 例えば、URLをシェアした際に、タイトルや画像が表示されないと、ユーザーがURLをクリックするかどうかを判断することが難しくなります。 そのため、OGPタグを利用することで、URLをシェアした際に、正確な情報をユーザーに伝えることができます。 OGPタグの設定方法 OGPタグは、HTMLのheadタグ内に記述します。 以下に、OGPタグの設定方法を示します。 head要素に、以下のようにOGPタグを記述します。 prefix="og: http
FedCM の更新: Continuation API バンドルのオリジン トライアルと Storage Access API の自動付与 | Privacy Sandbox | Google for Developers
フィードバックを送信 FedCM の更新: Continuation API バンドルのオリジン トライアルと Storage Access API の自動付与 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Chrome 126 以降では、デベロッパーは一部の認証ユースケースを可能にするデスクトップの Federated Credential Management API（FedCM）機能のバンドルのオリジン トライアルを実行できます。このバンドルは、Continuation API と Parameters API で構成されています。これにより、ID プロバイダ（IdP）が提供する権限ダイアログを含む、OAuth 認可フローに似たエクスペリエンスを実現できます。このバンドルには、Fields API、複数の configURL、カスタム アカウント
【python】Googleスプレッドシートを作成・操作する方法を解説 - morikomorou’s blog
Googleスプレッドシートをpythonで新規作成したり、操作したりする方法について紹介します。 はじめに pythonからスプレッドシートを操作する方法について勉強したのでまとめていきたいと思います。いろいろやり方があるようですが、私としては今回紹介する方法が一番簡単で使い勝手がいいと思いました。 はじめに 事前準備 スプレッドシートの操作テスト スプレッドシートの新規作成 注意点 スプレッドシートに書き込み 日付を日付として書き込む方法 スプレッドシートから読み込み 数字を数字として読み込む方法 日付を文字列として読み込む方法 pandasのDataFrame形式で読み込み おわりに 事前準備 事前準備としてスプレッドシートを外部アプリから操作するための各種設定が必要になります。今回はその事前準備が終わった前提で解説していきますので、事前準備がまだの場合は下記記事を参考に実施してくだ
jcmdコマンド
jcmdコマンド 名前 jcmd - 実行中のJava Virtual Machine (JVM)への診断コマンド・リクエストの送信 シノプシス jcmd [pid | main-class] command... | PerfCounter.print | -f filename jcmd [-l] jcmd -h pid jcmdユーティリティを使用すると、診断コマンド・リクエストがJavaプロセスのプロセスIDに送信されます。 main-class jcmdユーティリティを使用すると、メイン・クラスの指定された名前を持つすべてのJavaプロセスに診断コマンド・リクエストが送信されます。 command commandは、選択したJVMに対して有効なjcmdコマンドである必要があります。 jcmdで使用可能なコマンドのリストは、helpコマンド(jcmd pid help)を実行するこ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像最適化の舞台裏をのぞき見👀してnext/imageを使いこなす
RubyKaigi 2024で発表してきました & 発表できなかったこと - STORES Product Blog
【WordPress】静的化プラグインSimply Staticについて - Qiita
システムインタフェース (Gauche ユーザリファレンス)
devcontainerを別リポジトリで管理することにした - いしぐめも
WindowsバッチでSQLiteのデータベースの値を取得する方法 - Qiita
SwiftUI BOM付UTF-8のCSVファイルを出力して外部に保存
pathlibが便利すぎてもうos.pathは使えない件
JavaScript人気バンドラーを徹底比較─Rollup、Webpack、Parcelの特徴と違い
バックエンド開発入門「コマンド」 - Qiita
Vite + TypeScript で絶対パスでの import を解決する
Expressの静的ファイル提供（express.static）が通らなくて、つまづいた話
Application-dataPath - Unity スクリプトリファレンス
ローカルLLM（Llama-3,gemma-2）でAIアバター「えーあいそーだんいん」の観光案内セリフを作ってみた！｜自治体AI活用マガジン（運営：横須賀市）
wp_enqueue_block_style()で各ブロック用のスタイルを読み込む | オレインデザイン
よしいずの雑記帳 Eclipse 4.4 の Windows におけるセットアップ手順のメモ
Next.jsで静的ビルドしたソースコードをサブディレクトリパスにデプロイする方法
Reactのベストプラクティス集 bulletproof-react
リンクとは？6つの種類とSEO効果を高めるリンクの在り方｜大阪のホームページ制作会社セブンデザイン