はてなブックマーク

• あとで読む

  WSL を Microsoft Store アプリ版 に更新しました

  4 users

  laboradian.com

  1. はじめにWindows 10 に入ってる WSL を Microsoft Store アプリ版 WSL (Windows Subsystem for Linux) に更新しました。そのときのメモです。 ※ 今回は Microsoft Store にアクセスすることはありません。コマンドラインから更新します。 2. 現状確認2-1. OSWindows 10 Pro 22H2OS ビルド 19045.2251Windows Update から、KB5020030 を導入しておく必要があります。2-2. PowerShell で現状を確認するPS> wsl --status 既定の配布: Ubuntu 既定のバージョン: 2 Linux 用 Windows サブシステムの最終更新日: 2022/03/26 土 WSL の自動更新が有効になっています。 カーネル バージョン: 5.10.1

  • テクノロジー
  • 2023/02/06 16:16

  • linux
  • windows
• あとで読む

  Webページ中の特定の文字列をURLで指定する(Text Fragments)

  7 users

  laboradian.com

  Web Webページ中の特定の文字列をURLで指定する(Text Fragments)※当サイトにはプロモーションが含まれています。 1. URLにおける通常のフラグメント一般に「URL」は Webページの住所を表しますが、末尾にフラグメント (fragment, # に続けて指定する文字列) を追加することにより、Webページ上の特定の位置を含めた表現が可能です。 例えば、アクセスしたいWebページのHTML内に、以下のタグが記述されているとします。 <a href="foo">Bar</a> この場合、ブラウザのアドレスバーに「末尾に #foo を追加したURL」を指定してアクセスすると、ブラウザは上記のタグの位置がちょうど画面の上端にくる位置まで自動でスクロールしてくれます。 フラグメントの詳細については、URL Standard を参照してください。 2. Text Fragmen

  • テクノロジー
  • 2021/12/02 10:24

  • ブラウザ
  • Web
• あとで読む

  【Windows】起動・シャットダウンなどで発生するイベント

  3 users

  laboradian.com

  Windows Tips 【Windows】起動・シャットダウンなどで発生するイベント※当サイトにはプロモーションが含まれています。 1. はじめにWindows 10 において以下の動作が実行された際に、どんなイベントが発生するのか？について紹介します。 起動シャットダウン再起動高速スタートアップ有効時の起動高速スタートアップ有効時のシャットダウン高速スタートアップ有効時の再起動スリープ休止状態これが分かれば、いつ上記の動作が行われたのかを後から調べることができます。 公式な情報がほとんど見つからなかったため、独自に実験して調べました。ですので、間違っている部分があるかもしれません。 イベントビューアーここでの「イベント」とは、イベントビューアーに表示されるイベントを指しています。イベントビューアーについては、以下の記事を参考にしてください。

  • テクノロジー
  • 2021/11/12 10:11
• あとで読む

  CentOS 8 で Snap から certbot パッケージをインストールする

  3 users

  laboradian.com

  Linux CentOS 8 で Snap から certbot パッケージをインストールする※当サイトにはプロモーションが含まれています。 1. はじめにCentOS 8 でよく利用されている EPEL リポジトリには、certbot パッケージが用意されています（certbot というのは、コマンドラインから Let’s Encrypt を使うためのツールです）。 しかし、この certbot パッケージに含まれている certbot コマンドを実行すると、以下のエラーが発生する場合があります。 Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/pkg_resources/__init__.py", line 570, in _build_master ws.require(__requi

  • テクノロジー
  • 2021/10/02 12:56
• あとで読む

  CentOS 8 標準の Apache と PHP の関係について

  4 users

  laboradian.com

  Linux CentOS 8 標準の Apache と PHP の関係について※当サイトにはプロモーションが含まれています。 1. はじめにCentOS 8 に用意されたパッケージを使って、Apache と PHP を導入・連携して動作させる場合に、この2つのアプリケーションがどのように関係しているのかについて説明します。 2. CentOS 8 での変更点Apache には、「受け付けたリクエストをどのように処理するか」を決める MPM (Multi Processing Module) という設定項目があり、マルチスレッドで動作する “worker” や “event“、もしくはマルチプロセスで動作する “prefork” のどれかを指定しなければいけません。 Apache から PHP を連携させるために mod_php モジュールを利用する場合は、このモジュールが スレッドセーフな

  • テクノロジー
  • 2021/09/11 09:19

  • PHP
• あとで読む

  Alt + Tab キーでEdgeの個別タブを切り替え候補にしない設定手順（Windows 10 20H2）

  9 users

  laboradian.com

  Windows Tips Alt + Tab キーでEdgeの個別タブを切り替え候補にしない設定手順（Windows 10 20H2）※当サイトにはプロモーションが含まれています。 1. はじめにWindows 10 バージョン 20H2 から、Alt + Tab キーによるアプリ切り替え動作にちょっとした変更が加わりました。 2. 20H2 で Alt + Tab の何が変わったのか変更された挙動について簡単に説明します。 従来Alt キーを押しながら、Tab キーを1回だけ押す（ Alt キーは押したままにする）。開いているアプリケーション（ウィンドウ単位）のサムネイルが一覧表示される。このとき、1つ目のサムネイル（1つ前に使っていたアプリケーション）が選択された状態になっている。Alt キーは押したままで、Tab キーを1回押すと、次のサムネイルが選択された状態になる。この操作を繰り

  • テクノロジー
  • 2021/08/09 22:26

  • Windows
• あとで読む

  HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

  4 users

  laboradian.com

  1. はじめに以下の HTTP Response Headers に関するメモです。 COEP (Cross Origin Embedder Policy)COOP (Cross Origin Opener Policy)CORP (Cross Origin Resource Policy)CORS (Cross Origin Resource Sharing)どれもセキュリティに関連しています。 2. ポイント一覧表

  • テクノロジー
  • 2021/07/12 08:31

  • セキュリティ
  • あとで読む
• あとで読む

  閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

  3 users

  laboradian.com

  もう一つの見分け方 [Network]タブに表示されたデータ（行）のどれかをクリックすると、右側に詳細が表示されます。 [Headers]タブ – [Request Headers] のところに、:method: や :path: といったコロンで囲まれたヘッダがある場合は、HTTP/2 です。 HTTP/1.1 の場合は、以下のようにこれらのヘッダフィールドがありません。 Firefox(1) ウィンドウ右上にある [設定]アイコン – [ウェブ開発] – [ネットワーク] を選択します。 [ウェブ開発] – [ネットワーク] を選択します(2) 以下のように、列タイトルのあたりを右クリックして「プロトコル」にチェックを入れます。 「プロトコル」列が表示されます。 「プロトコル」列を追加します(3) 目的のウェブサイトにアクセスします。 (4) [ネットワーク]タブ内の [プロトコル]

  • テクノロジー
  • 2021/05/18 09:46

  • chrome
• あとで読む

  サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用）

  7 users

  laboradian.com

  プログラミング サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用）※当サイトにはプロモーションが含まれています。 1. はじめにウェブサーバーから任意のタイミングで、ブラウザにメッセージを送信（プッシュ通知）する方法について説明します。 これを実現するために Push API を使います。この API は、RFC 8030 – Generic Event Delivery Using HTTP Push という「 ウェブブラウザもしくはアプリケーションサーバーと、プッシュサービスとの間のやり取りを可能にする 」を可能にするプロトコル (HTTP Web Push) の使用を前提としてます。 2. 全体像以下の図が、この仕組の全体像を表しています。かなり単純化した図です。 +-------+ +--------------+ +-------------+ |

  • テクノロジー
  • 2021/03/26 22:40

  • PWA
  • push
  • ブラウザ
• あとで読む

  npm パッケージのセキュリティをチェックして必要なら対応する

  3 users

  laboradian.com

  JavaScript npm パッケージのセキュリティをチェックして必要なら対応する※当サイトにはプロモーションが含まれています。 1. npm パッケージのセキュリティ以下の 2つのコマンドを取り上げます。 npm audit コマンドあるプロジェクトのディレクトリ内で使用している npm パッケージのセキュリティをチェックするには、npm auditコマンドを使います。 npm auditコマンドを実行して問題のあるパッケージが見つかった場合、通常はパッケージを更新して対応することになります。 npm outdated コマンド脆弱性を持ったバージョンのパッケージの使用を避けるには、日頃からパッケージを更新することが大切です。更新可能なパッケージを表示するには、npm outdatedコマンドを使います。 2. 実際にこれらのコマンドを利用してみる実際に2つのコマンドを使った時の様子を

  • テクノロジー
  • 2021/03/17 18:12

  • JavaScript
• あとで読む

  【WSL 2】1つのディストロから複数のインスタンスを作成する方法

  6 users

  laboradian.com

  Tools 【WSL 2】1つのディストロから複数のインスタンスを作成する方法※当サイトにはプロモーションが含まれています。 1. はじめにWSL 2 では Linux ディストリビューション（以下 ディストロと表記します）を導入することができますが、通常ですと1種類のディストロを複数個（複数のインスタンス）導入することはできません。しかし、wsl.exe コマンドを使えば実現可能です。本記事では、この手順について説明します。 ※ 同様の手順で WSL 1 もうまくいくかもしれませんが、本記事は WSL 2 で試した結果を元に書いています。 2. 手順ここでは、Ubuntu を複数インスタンス導入する手順について説明します。 ※ WSL 2 の導入手順については省略します。 (1) 通常通りディストロをインストールする（インスタンスを作成する）Microsoft Store から Ubun

  • テクノロジー
  • 2020/09/26 14:13

  • web制作
  • Windows
• あとで読む

  WSL 2 で Docker を使うパターン

  5 users

  laboradian.com

  1. はじめにWindows 10 version 2004 では、WSL 2 が使えるようになりました。Linux コマンドをエミュレートしている WSL 1 と違い、WSL 2 では仮想マシンで Linux を動かします。その影響で、WSL 2 を取り巻く Docker 環境の導入方法にいろいろな変化があったのですが、このあたりが分かりにくかったので本ページで簡単にまとめます。 1-1. Docker についての基礎知識Docker はサーバーとクライアントに分かれて動作します。「docker イメージ」や「dockerコンテナ」はサーバー上に配置され、クライアント側から送られる docker コマンドによって操作されます。サーバーとクライアントは同じホスト上にあってもよいですし、別々のホストにあっても問題ありません。 1-2. 前提WSL 2 にインストールした Linux ディスト

  • テクノロジー
  • 2020/09/09 23:23

  • docker
  • ubuntu
  • windows
• あとで読む

  【JavaScript】無名関数とアロー関数とイベントリスナーのthis

  3 users

  laboradian.com

  JavaScript 【JavaScript】無名関数とアロー関数とイベントリスナーのthis※当サイトにはプロモーションが含まれています。 1. はじめにあるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリックイベントに対してイベントリスナーを登録するとします。 <button id="btn">ボタン</button>このとき、無名関数 function(){ ... } を使う場合と、アロー関数 () => { ... } を使う場合とで、this の扱いが違うので注意しましょうというお話です。 2. イベントリスナーの登録無名関数を使う場合 document.querySelector('#btn').addEventListener('click', function() { // this は button になります }); こちらの場合、無名関数の中に記

  • テクノロジー
  • 2020/08/04 11:09
• あとで読む

  Windows 10 のスリープと休止状態を利用する

  3 users

  laboradian.com

  Windows には「作業を中断するための機能」として、「スリープ (Sleep)」と「休止状態 (Hibernate)」という２つの操作が用意されています。 更に、スリープは「ハイブリッド スリープ」という機能が有効もしくは無効かによって２種類に分かれます。 2.「スリープ」と「ハイブリッドスリープ」と「休止状態」の比較それぞれの動作の違いを表にします。

  • テクノロジー
  • 2020/05/21 20:28

  • windows
• あとで読む

  デフォルトで用意されている日本語のフォルダ名を英語に戻す

  3 users

  laboradian.com

  1. 最初から用意されている日本語名のフォルダWindows 10 では、ユーザーアカウントフォルダ内(例：C:\Users\foo)に「ダウンロード」「デスクトップ」「ドキュメント」など、日本語名のついたフォルダが最初から作成されています（日本語で使っている場合）。

  • テクノロジー
  • 2020/04/17 12:45

  • windows
• あとで読む

  Windows 10 Home で「ローカル グループ ポリシー エディター」を使う方法

  7 users

  laboradian.com

  レジストリを直接触ることで Windows の設定を変更することもできますが、いろいろとハードルが高いため、このツールの存在はかなりありがたいものだと思っています。 しかし、このありがたいツールが Windows 10 Home では使えません。Windows 10 Pro や Windows 10 Enterprise でしか使えないのです。これはかなり残念です。 しかし、今回紹介する手順に従えば、Windows 10 Home でも ローカル グループ ポリシー エディター が使えるようになります。

  • テクノロジー
  • 2020/03/19 11:53

  • Windows10
  • windows
• あとで読む

  Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

  9 users

  laboradian.com

  Web Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える※当サイトにはプロモーションが含まれています。 1. Chrome のローカルオーバーライド機能とは？Chrome の ローカルオーバーライド (Local Overrides) 機能を使うと、Webサイトの一部のファイルをローカルのファイルに置き換えることができます。 これは、すでに公開しているWebサイトを修正する時にとても便利です。ローカルに同じWebサーバー環境を用意しなくても CSS ファイル（やその他のファイル）を調整することができるからです。 2. 使い方1. この機能で使用するローカル側のフォルダーを指定します(1) Chrome を起動した状態で、Ctrl + Shift + I キーを押し、開発者ツールを開きます。 (2) [Sources] タブ – [Ov

  • テクノロジー
  • 2020/03/18 18:36

  • chrome
  • あとで読む
• あとで読む

  【Windows 10 】タスクバー上の日付に「曜日」を表示する

  3 users

  laboradian.com

  1. 日付と時刻の表示についてひょっとしたら、タスクバー上の表示が以下のように「時刻のみ」になっているかもしれません。 「小さいタスクバーボタン」を使っている場合の表示この場合は、[設定] – [個人用設定] の [タスクバー]タブで、「小さいタスクバーボタンを使う」がオンになっている可能性があります。 「小さいタスクバーボタンを使う」設定項目今回説明する方法で、「曜日」を表示したい場合は、ここは「オフ」にしておいてください。 2. 「曜日」を追加する手順1. コントロールパネルを開きますスタートメニューを開き、”control” と入力すると「コントロールパネル」項目が現れますので、そこをクリックします。 コントロールパネルを開きます2. 日付の形式を変更するウィンドウを表示します「日付、時刻、または数値の形式の変更」をクリックして、日付の形式を変更するウィンドウを表示します。 「日付、

  • テクノロジー
  • 2020/03/16 12:14
• あとで読む

  window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

  7 users

  laboradian.com

  Web window.opener を使って元ウィンドウの情報が取得できるかどうかの実験※当サイトにはプロモーションが含まれています。 ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opener オブジェクト この window オブジェクトの opener というプロパティには、「自分を表すウィンドウを開いた元の window オブジェクト」がセットされます（いつでもセットされるわけではありません）。例えば、Aというページ上のリンクをクリックして、B というページを開いた場合、B から見ると A が opener ということになります。 window.opener のセキュリティ問題 もし opener が自由に使えるとなると、例えば「知らないう

  • テクノロジー
  • 2020/03/05 15:49

  • セキュリティ
  • ブラウザ
  • Web
  • あとで読む
• あとで読む

  Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

  6 users

  laboradian.com

  Web Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)※当サイトにはプロモーションが含まれています。 1. 一般データ保護規則 (GDPR) 2018年5月25日から EU 一般データ保護規則（GDPR） が適用され、EU向けに提供しているウェブサイトでクッキーを使用している場合、「クッキーの使用について利用者に同意を得る必要がある」ということになりました。 2. Cookie Consent by Osanoクッキー使用の同意を求めるポップアップを表示するには、いろいろなやり方があると思いますが、Osano という組織が提供している Cookie Consent というツールを使うと比較的簡単に実現可能です。 Cookie Consent (Open Source 版) の利用方法この Cookie Consent には「Osan

  • テクノロジー
  • 2020/02/22 14:45

  • Security
  • 仕事
• あとで読む

  【Ubuntu】pip install --upgrade pip コマンドを実行すると、その後、ImportError: cannot import name main というエラーが発生する場合の対応方法

  4 users

  laboradian.com

  「pip install --upgrade pip」コマンドを実行した後、pip コマンドを実行すると「ImportError: cannot import name main」というエラーが発生する場合の対応方法について説明します。 1. 現象環境WSL (Windows Subsystem for Linux) の Ubuntu 16.04.4 LTS (Microsoft Store からインストール)起きた現象元々この環境には、python がインストールされていましたが、pip は導入されていなかったため、python-pip を導入しました。 $ sudo apt install python-pip そして、pip のバージョンを上げました。 $ pip install --upgrade pip すると、pip コマンドを実行する際、下記のエラーが発生するようになりました

  • テクノロジー
  • 2020/01/16 17:23
• あとで読む

  ブラウザだけで完結するウェブアプリ作成環境 Glitch

  12 users

  laboradian.com

  Web ブラウザだけで完結するウェブアプリ作成環境 Glitch※当サイトにはプロモーションが含まれています。 1. Glitch とはGlitch とは、Node.js を使ったウェブアプリを作成・公開することができるサービスです。 以下のスクリーンショットから分かる通り、ブラウザ上でファイルを作成・編集し、そのまま公開することができます。 正式にサポートされているのは、 静的なウェブアプリExpress を使った Node アプリ（SQLiteも使えます）の2つですが、実際はその他のサーバー側言語を使うこともできます。 開発・運営元はサービスと同名の Glitch という企業で、以前は Fog Creek という名前でした。この企業は、プロジェクト管理ツールの Trello を開発したり、Stack Overflow の開発にも関わっていたようです。詳しくは、Fog Creek is

  • テクノロジー
  • 2019/12/22 11:40

  • node.js
  • 開発
• あとで読む

  HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

  8 users

  laboradian.com

  参考 6.4.7. 307 Temporary Redirect | RFC 7231 – HTTP/1.1: Semantics and Content2. HSTS の問題点このHSTS、以下のようなことが起きるとかなり面倒です。 ある期間、example.com というドメインのウェブサイトを運営しているウェブサーバーが Strict-Transport-Security というレスポンスヘッダを返すよう設定されていました。その期間中にそのウェブサーバーにアクセスしたブラウザは、ブラウザ内の「HSTS適用ドメイン」に example.com を追加します。しばらくして、このウェブサイトにおいて「 https でアクセスされると何らかの問題が起きる」ことが発覚したとします。サイト運営者は http でもアクセスできるように、example.com のウェブサーバーが、Strict-Tr

  • テクノロジー
  • 2019/12/13 14:43

  • hsts
  • ブラウザ
  • *webサービス
  • security
  • web
• あとで読む

  Node.js のバージョン管理ツール nvm の使い方

  6 users

  laboradian.com

  JavaScript Node.js のバージョン管理ツール nvm の使い方※当サイトにはプロモーションが含まれています。 1. nvm とは？nvm は、Node.js のバージョンを切り替えて使うことを可能にするツールです。 ここでの「Node.js」とは、簡単に書くと以下のコマンドをセットにしたものです。 node（JavaScript 実行エンジン）npm（Node.js のパッケージ管理ツール）npx（Node.js のコマンド実行を補助する）これらのコマンドをまとめてバージョン管理（インストール・切り替え）することができます。 以下のように、バージョンごとにディレクトリが作成され、コマンドがひとまとめにされています。 $ tree ~/.nvm/versions/node/v10.15.3/bin/ ├── node ├── npm └── npx 2. nvm の導入1.

  • テクノロジー
  • 2019/12/12 13:06
• あとで読む

  Chrome で SameSite=None に関する Cookieについての警告が表示される

  24 users

  laboradian.com

  例えば、以下のメッセージです。 A cookie associated with a cross-site resource at http://example.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/508814734603

  • テクノロジー
  • 2019/10/30 17:32

  • chrome
  • cookie
  • あとで読む
• あとで読む

  Firefox で複数のプロファイルを使い分ける方法

  4 users

  laboradian.com

  1. Firefox のプロファイルについてFirefox に登録したブックマークや、導入した拡張機能、各種設定などは「プロファイル」としてまとめて保存されています。 Firefox では、複数のプロファイルを作成して使い分けることができるので、1つのPC を複数人で使う場合や、目的によって使い方が異なる場合に便利です。 Firefox のプロファイルに関する公式な情報はいろいろあるのですが、その一部のリンクを貼っておきます。 プロファイル | Firefox ヘルプ設定情報のバックアップ | Firefox ヘルプMultiple Firefox profiles – Mozilla | MDN2. プロファイルによって管理できるものブックマーク拡張機能（アドオン）各種設定etc.※ プロファイル | Firefox ヘルプ に詳しく載っています。 3. プロファイルの場所プロファイルの

  • テクノロジー
  • 2019/10/26 09:17

  • Firefox
• あとで読む

  Windows 10 でスクリーンショットを撮る方法（キャプチャ機能）

  4 users

  laboradian.com

  Windows Tips Windows 10 でスクリーンショットを撮る方法（キャプチャ機能）※当サイトにはプロモーションが含まれています。

  • テクノロジー
  • 2019/10/26 04:10
• あとで読む

  openssl s_client コマンドでウェブサーバーの SSL/TLS 対応状況を診断する

  14 users

  laboradian.com

  1. OpenSSL についてOpenSSLは「暗号化に関する処理」を行うツールキットです。以下のように、幅広い処理をカバーしています。 SSL/TLS プロトコルを使った通信（ウェブサーバーの診断に使えます）秘密鍵（公開鍵）の生成証明書の生成鍵ファイルや証明書ファイルの内容の表示etc. 2. openssl s_client コマンドについてOpenSSL ツールキットは openssl + {サブコマンド} という形式のコマンドとして利用できます。処理の内容ごとにそれぞれ別のサブコマンドが用意されています。 本記事では、SSL/TLS 通信を行うために用意された s_client サブコマンドを使います。これを使うと、ウェブサーバーのSSL/TLS対応状況などを診断することが可能です。 ターミナルエミュレータで s_client に関するマニュアルを読む場合は、以下のコマンドを実行し

  • テクノロジー
  • 2019/10/05 14:48

  • openssl
  • linux
  • web制作

次のページ