はてなブックマークで便利なWebサービスが話題になっていました。 https://anond.hatelabo.jp/20200525021541 anond.hatelabo.jp 記事のトラックバックやブックマークのコメントが参考になりました。 https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200525021541 b.hatena.ne.jp 知らないツールやWebサービスもあったので、良さそうなのをメモ。 情報収集 ウェブ魚拓 RSSリーダー hckr news ノイズレスサーチ 情報整理 start.me 検索デスク Myfaves IFTTT RAINDROP.io Zotero tagtory 情報交換 IRCCloud Trickle Discord タスク管理 Zenkit Habitify 作業の自動化 Zapie

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。 調べたらいくつか候補がありました。 PlantUML　https://plantuml.com/ja/ Mermaid.js　https://mermaidjs.github.io/ Typora　https://typora.io/ 今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。 Mermaid.jsとは？ Visual Studio CodeでMermaid.jsを使う方法 Markdown Preview Enhancedの使い方 図の出力 見た目のカスタマイズ 参考 Mermaid.jsとは？ Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。 （英語の「mermaid」は、日本語で「人魚」という意味） （公式サイト） https:

「Yarn」は「npm」を改良したツールです。 yarnpkg.com 前提 Yarnのインストール Yarnとnpmの違い まとめ 前提 WindowsにYarnをインストールする場合、事前に Node.js npm がインストールされている必要があります。 Node.jsとnpmまだ入ってない場合は、先にインストールしておきます。 （参考） jsstudy.hatenablog.com Yarnのインストール Windowsでコマンドプロンプトを開き、以下のようにコマンドを入力します。 npm install -g yarn Yarnがインストールされたら、以下のコマンドでYarnのバージョンを確認してみます。 yarn -v 「1.19.1」などとバージョンが表示されたらOKです。 Yarnとnpmの違い npmの代わりにYarnを使うメリットは何でしょうか？ （参考） www.go

nodistの新しいバージョンが出ていたのでアップデートしました。 アップデートのやり方を検索したら、新しいインストーラーをそのまま実行すれば良いみたいでした。 nodist 0.8.8 → 0.9.1へ更新 （参考） ksby.hatenablog.com https://github.com/nullivex/nodist/releases から NodistSetup-v0.9.1.exe をダウンロードし、実行します。 「Welcome to Nodist Setup」画面が表示されます。「Next >」ボタンをクリックします。 「License Agreement」画面が表示されます。「I Agree」ボタンをクリックします。 「Choose Install Location」画面が表示されます。「Destination Folder」に 0.8.8 をインストールした時の D:

Reactの勉強メモ。 Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。 「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。 jsstudy.hatenablog.com CodeSandboxとは？ (p.31) 「CodeSandbox」は、オンライン上で直接Reactなどのコードを記述できるエディターアプリケーションです。 ブラウザーでページを開くだけで、Reactを記述する環境が一式揃っており、雛形から書き始めることができます。 codesandbox.io https://codesandbox.io/ ブラウザーでこのURLにアクセスすると、以下のようなWebページが表示されます。 「OPEN REACT」ボタンをクリックすると、エディター画面が表示されます。 これ

Windows7のパソコンをWindows10にアップデートする際、Windows Security Essentialsが入っていたら、アップデートの前にアンインストールしておいた方が良いです。 Windows10にアップデートした後、Windows Security Essentialsをアンインストールしようとしたら、普通の方法ではアンインストールできなくて、専用ソフトを使って除去するはめになりました。 Revo Uninstaller Windowsのソフトをアンインストールするツールが、いろいろありました。 その中で「Revo Uninstaller」というソフトを使ってみました。 （参考） answers.microsoft.com fanblogs.jp IObit Uninstaller 6 でもうまくいかない場合でも、Revo Uninstaller で削除できたそうです

Visual Studio CodeでPHPのファイルを開いたら、HTMLが圧縮（minify）されてて非常に読みづらい状態になってました。→自分がやったことだけどｗ ちゃんとインデントされた状態に戻したいので、HTMLをフォーマットするプラグインを探してみました。 Visual Studio Codeのプラグインの検索欄で「HTML format」と入力したら、いろいろ候補が列挙されて、その中で良さ気なのを適当に入れてみました。 Format HTML in PHP 名前が「Format HTML in PHP」というそのものズバリのプラグインがありました。 marketplace.visualstudio.com とりあえず、これをインストールしてみます。 インストールした後に、PHPファイルを開いた画面で右クリックすると、コンテキストメニューの画面が出てきます。 そこに「Format

JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。 有向グラフとは？ グラフ理論 - Wikibooks グラフ理論におけるグラフ （Graph）とは、頂点(node)と辺(edge)により構成された図形のことである。 グラフは主に、有向グラフ （directed graph）と無向グラフ （undirected graph）の2つに分類される。 有向グラフとは、頂点と向きを持つ辺（矢印）により構成されたグラフであり、無向グラフとは、頂点と辺により構成されたグラフである。 統計的テキスト解析(6)～語のネットワーク分析～ マインドマップとは？ マインドマップ - Wikipedia マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。 描き方は、表現したい

Webサーバーにアクセス制限を設定して、外部からサーバーへの攻撃を防御しています。 利用しているGoogleのサービスからのアクセスは通さないといけないので、GoogleのIPアドレスを調べてみました。 Googleのサービスには、どんなIPアドレスが割り当てられているのでしょうか？ Google サービス IPアドレス - Google 検索 support.google.com DNSで調べる方法 GoogleのIPアドレス（CIDR表記） ip4: ip6: （参考） digコマンドの使い方 SPFとは？ まとめ DNSで調べる方法 dev.classmethod.jp Googleが使っている公開IPアドレスを取得したいと思います。以下のSPFを見ればOKなようです。 $ dig -t txt _netblocks.google.com 410gone.click Googleが利

Ubuntuのテストサーバーにnodebrewをインストールしてみます。 nodebrewは、Node.jsのバージョン管理ツールです。 github.com nodebrewのインストール方法 Ubuntuのバージョンは、18.04LTSです。 curlコマンドを使う場合 Ubuntuのコンソール画面で、次のコマンドを入力します。 $ curl -L git.io/nodebrew | perl - setup wgetを使う場合 これでうまくいかない場合は、別の方法で試してみます。 （いったん、Perlのスクリプトファイルをダウンロードする。その後Perlで実行する。） $ wget git.io/nodebrew $ perl nodebrew setup Windows10上にVagrantで入れたUbuntuの場合、仮想マシン内部から外部へのインターネットアクセスがおかしくなる場

Linuxサーバーを操作するとき、設定ファイルなどをviエディターで編集する機会が多いです。 vi - Wikipedia vi（ヴィーアイ）は、Emacsと共にUNIX環境で人気があるテキストエディタ。 名の由来はVIsual editorないしVisual Interfaceとされる。 後発のUnix系OSに搭載されているviは、上位互換のVimやnviであることが多い（viコマンドでvimやnviが起動する）。 viには、使い方を練習するための「vimtutor」という教材が用意されています。 （viがインストールされていれば「vimtutor」とコマンドを打つことで練習できます。） viは、「モードの切り替え」さえ覚えれば、あとは適当でもなんとか使えますが、せっかく便利な機能がたくさん用意されているので、使わないのはもったいないですねｗ vimtutorで、viの基本を再確認して、

WindowsパソコンからLinuxのWebサーバーにSSHでリモート接続するとき、RLogin等の端末ソフトを使っています。 普通は、１つのSSH接続に対して、１つの操作画面が表示されます。 しかし、同時にいろんなディレクトリーを見ながら作業する場合、画面が１つだとディレクトリーの切り替えが忙しくて不便です。 端末ソフトを複数立ち上げて、画面を増やしても良いのですが、「tmux」というソフトを使うと、１つの端末ソフトで複数の画面を表示させることができるようになります。 tmuxとは？ tmux - Wikipedia tmux is a terminal multiplexer for Unix-like operating systems. It allows multiple terminal sessions to be accessed simultaneously in a s

Windowsでコマンドプロンプトを起動すると、起動直後はカレントディレクトリ（現在位置）がデフォルトのまま（C:\Windows\System32 など）になっています。 別の作業フォルダに移動するには「cd」コマンドを入力して、移動先のフォルダを手動で指定しないといけません。 毎回同じフォルダに移動する場合は面倒なので、コマンドプロンプトのカレントディレクトリを指定して起動させる方法を調べてみました。 バッチファイルを作る バッチファイル - Wikipedia バッチファイル（Batch File）とは、MS-DOS、OS/2、Windowsでのコマンドプロンプト（シェル）に行わせたい命令列をテキストファイルに記述したもの。 バッチファイルを実行すると、シェルプログラム（一般に COMMAND.COMやcmd.exe）がそのファイルを読み、その中のコマンドを（通常）一行ずつ実行する。

Windows10上でLinuxを使うために、VirtualBox＋VagrantでUbuntu 18.04LTSをインストールしてみました。 jsstudy.hatenablog.com Ubuntuのフォルダやファイルのリモート操作には、「WinSCP」を使ってみます。 WinSCPを使うときに、秘密鍵をPuttyGenで変換する必要があったので、作業内容をメモ。（備忘録） WinSCPとは？ WinSCPは、Windows用のファイル転送ソフトです。 コンピューター間の通信内容を暗号化して、安全にデータをやりとりできます。 以下のページを参考にして、WinSCPを用意します。 jsstudy.hatenablog.com WinSCPの設定 前回の内容を参考にして、WinSCPでSSHの接続情報を入力します。 ＝VagrantでUbuntuを起動して、コマンドプロンプトで「vagra

「Webプログラミングが面白いほどわかる本」という本を参考にして、Windows10にUbuntu 18.04LTSをインストールしてみました。 Webプログラミングが面白いほどわかる本 環境構築からWebサービスの作成まで、はじめからていねいに (N高校のプログラミング教育) 作者: 吉村総一郎 出版社/メーカー: KADOKAWA 発売日: 2018/06/22 メディア: 単行本 この商品を含むブログを見る この本は、カラー図解で丁寧に操作手順が説明されており、とても分かりやすい本でした！ Ubuntuの利用方針 登場するツール VirtualBoxの用意 VirtualBoxとは？ VirtualBoxのインストーラーをダウンロード VirtualBoxをインストール Vagrantの用意 Vagrantとは？ Vagrantのインストーラーをダウンロード Vagrantをインスト

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ＝早い：Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ＝遅い：アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS（コンテンツ管理システム）の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」（Static Site Generator）と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか？いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった

Webサイトをどうやって作っているか？を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 （例）はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね！ Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-

MySQLのデータ件数が多くなってくると、だんだん検索が遅くなっていきます。 Elasticsearchという検索エンジンを併用すると、検索の高速化が図れるようです。 （参考） https://vitalify.jp/blog/2017/02/elasticsearch_matome.html 全文検索エンジン「Elasticsearch」を調べて使ってみた色々まとめ ElasticsearchはMySQLのDBを連携させ、データ検索もできます。 MySQLで検索速度を改善したい。そんな時は連動してElasticsearchを使うことでパフォーマンス向上ができます。 データをMySQL→Elasticsearchへ投入するスクリプトを実行します。 Elasticsearchは検索が速い。 MySQLのデータをElasticsearchに入れておく。（同期させる） 検索するときは、MySQL

今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。 jsstudy.hatenablog.com (p.36) 学習用のひな形ファイルを用意 CHAPTER 1 | 基礎から学ぶ Vue.js ↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以下のようなメッセージが表示されていました。 vue.js:8542 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools vue.js:8553 You are running Vue in development mode. Make sure to turn on production mode w