静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
findコマンドの使い方を簡単に理解するための7つのルール＋実践的な知識 - Qiita
はじめに find コマンドの使い方は、ざっくり調べただけではよくわからんとなりますが、見逃しがちなルールを知れば簡単に理解できます。find コマンドに限りませんが使い方を調べるのが面倒だからと曖昧な理解で使うと逆にもっと分からなくなって時間がかかります。急がば回れ、理解して正しく使ったほうがシンプルで楽で簡単です。この記事では find コマンドの使い方を理解するために必要なルールと使い方の実践的な知識をまとめました。 Q&A（？）: -type や -perm の説明はしないの？ ⇒ それらはドキュメントを読むか検索すればすぐにわかることで難しいポイントではありません。重要なのは基本のルールを理解することです。 関連記事 POSIX 準拠のシェルスクリプトでは find | xargs よりも find -exec {} + を使うべき！ 移植性の話はこちら ⇒ findコマンドのオ
AWSの主要サービスをローカルでエミュレート、「LocalStack」が1.0に到達
LocalStackを利用することで実際のAWSにアクセスすることなくローカルの環境で開発やテストを行えるようになるため、迅速な開発サイクルの実現やAWSの利用コスト削減などが期待できます。 LocalStackはオープンソースですが、無料で使える「Community」版では基本的なAPI群が利用可能、月額28ドルからの有償となる「Pro」版では全てのAPIが利用可能。さらに上位の「Team」版と「Enterprise」版も用意されています。 AWSの主要サービスをエミュレート LocalStackでエミュレートできるAWSのサービスは、Amazon S3、SQS、SNS、DynamoDB、Route53、AWS Lambdaなどをはじめとする80以上の主要なサービスです。 AWS Command Line Interface（AWS CLI）、AWS Cloud Development
Cloudflare R2もいいぞ！ - ゆーすけべー日記
CloudflareがSQLデータベースD1をアナウンスして衝撃を受けましたが、「R2もいいぞ！」というお話。 R2はS3みたいなストレージエンジンで、Sの前「R」、3の前の「2」ともじってて、AWS対抗といえます。で、ちょうどD1がアナウンスされた昨日にベータオープンしました。 A New Hope for Object Storage: R2 enters open beta 「ただのストレージだろ」とたかをくくってたんですが、使ってみてだいぶよいです。 先にまとめると以下の3つのことが言えます。 安い DX（Developer Experience）がよい Cloudflareの他の製品を組み合わせるとヤバい 詳しく紹介します。 作ったアプリ R2を評価するために、以前S3をバックエンドにして作ったアプリケーションをR2に置き換えるというのをやりました。そのアプリケーションについては
ngrokよりserveoがすごい。０秒で localhostを固定URLで公開 - Qiita
注意 serveoがサービス停止中です。 みんな大好きcloud functionには欠点があります。 それは、実際にコードをデプロイしないと、httpsで公開できないこと。 そのため、slackのコマンドを作ったり、ラズベリーパイとかを開発するのに不便だったりします。 以前私はngrokというcliアプリを使っていました。 とても使いやすく、ユーザー登録＋ngrokのインストール＋セットアップだけで使い始めることができます。 お金を払えば固定URLもゲットできます。 しかし、今回もっと良いものを見つけたので紹介します。 serveoです。 なんとこのserveoインストールもセットアップも不要です。 ターミナルで、以下のように ssh -R 80:localhost:3000 serveo.net と打つだけで自分のPCのlocalhost:3000を、固定URLでhttpsとして公開し
GAS のGoogle製CLIツール clasp - Qiita
Google Apps Scriptというと以前はWebのエディター上でしかコードを書けなかった。 手に馴染んだエディタが使えないし、バージョン管理はしにくかった。 Googleからclaspが登場し開発環境は大幅に改善された。 利用バージョン： clasp v1.1.5 インストール npm コマンドでインストールできる。 npm i clasp でインストールすると以前は別モノがインストールされたが、今は An alias for @google/claspと書かれており単にclasp のみでも良さそう。 ログイン Webエディタ側から取るにも、Webエディタ側にアップするにもユーザ認証が必要ということで、まずはログインする必要がある。 ログインする前には Google Apps Script API を有効にしておく必要もある。 https://script.google.com/h
【Ionic + Electron】Resemble.jsを使って画像比較を行うデスクトップアプリを作成 - Qiita
はじめに Resemble.jsなるものがとても手軽で便利そうだったので、使ってみました。 Node上で動作する画像比較Javascriptライブラリです。 E2Eテスト等で機械的に吐き出されるスクリーンキャプチャに対して前回分との比較&差分をイメージで出力とかやりたい時に便利そうです。 Resemble.jsの基本的な使い方 使い方はとてもシンプルでした。 // 比較したい画像のパスを指定 const image1 = fs.readFileSync(path1); const image2 = fs.readFileSync(path2); resemble(image1).compareTo(image2).onComplete(data => { // 不一致率で指定した値を上回る時のみ画像を出力することができる if (data.misMatchPercentage >= 0.0
JavaScriptとTypeScriptを共存させ、段階的に移行する方法
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい！ ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です！ → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
今日からはじめるDocker - コンテナー仮想化の必要性を理解して、まず開発環境に導入してみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
今日からはじめるDocker - コンテナー仮想化の必要性を理解して、まず開発環境に導入してみよう！ Dockerは、コンテナー仮想化ツールです。本稿では、サーバーサイドのアーキテクチャの歴史からDockerが生まれた流れや背景を説明し、PCの開発環境で実際にインストールしてDockerの動作を体験します。 エンジニアの方であれば、「コンテナー」や「Docker」といったキーワードを耳にしたことがあるかと思います。自分が関わっているシステムの開発や運用に活用できるかどうか検討している方もいるでしょう。 この記事の前半では、コンテナーやDockerとはそもそもどういったものかを概観していきます。後半では、PC（WindowsやMac）を使ってローカルでDockerを試していきます。 コンテナーとDockerを歴史から知る 仮想化前はすべて手作業だった サーバー仮想化技術の採用 パブリッククラ
textlintのElectronアプリを作った
textlint-app textlint-appという、インストールするだけで動くtextlintのElectronアプリを作成しました。 インストール方法 https://github.com/textlint/textlint-app/releases/latest からバイナリをダウンロード ダウンロードしたインストーラー（Windows）、app（Mac）を実行すれば動きます。（Node.jsの環境なども不要です） 実行する際に署名されてないバイナリなので警告がでるので、その辺は許可しないと動きません。 Windows: インストーラーで許可を選択する必要がある Mac: /Application/textlint.app をコンテキストメニューから”開く”をして許可する必要がある 特徴 一番の特徴はNode.jsなどの環境を作る必要なくインストールするだけで動く点です。 tex
今時のフロントエンド開発2017 (2. 構築編) - Qiita
はじめに 本編では今時のフロントエンド開発2017 (1. 愚痴編)に続き開発環境の構築をしていきます。 おしながき 今時のフロントエンド開発2017 (1. 愚痴編) 今時のフロントエンド開発2017 (2. 構築編) 今時のフロントエンド開発2017 (3. webpack編) 今時のフロントエンド開発2017 (4. TypeScript編) 今時のフロントエンド開発2017 (5. もっと効率よく編) 開発環境の構築 ナイスなエディタ コーディングをするにはエディタが必要になるわけですが，これは皆さんの信じるお好きなものを使ってください。 Atom Brackets Emacs Lime Text Sublime Text Vim Visual Studio Code なんでも良いです。 ちなみに私はVisual Studio Codeを使っています。 CLIの準備 準備と書きまし
ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート - Qiita
はじめに 個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。 今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。 あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
Big Sky :: golang でメモ専用コマンド「memo」作った。
« Ruby の a = a + 1 はなぜ undefined method '+' for nil:NilClass なのか | Main | Ruby の Array#<< は Array#push よりも速いか » 僕は日々 memolist.vim という Vim plugin を使い、仕事で思いついた疑問点や会話の一部をメモ取りする様にしています。相手と会話している最中に「あ、ここ大事だ」と思ったら vim を起動して :MemoNew してメモを編集していました。もちろん Vim ですから起動は抜群に速くてとてもご機嫌良く動くのですが、どうしてもこれをシェルから扱いたいという要求に負けてささっと作ってみました。 GitHub - mattn/memo: Memo Life For You README.md memo Memo Life For You Usage NAME:
私のCLI仕事術 - Qiita
はじめに CLIは最高です。 GUIよりも圧倒的に早く操作できますし、キーボードを叩けばいいだけなので慣れれば時々目を瞑りながらでも作業できるので目が疲れません。 たとえコマンドを覚えていなくても、一度叩いたコマンドなら履歴をたどればなんとかなりますし、 man コマンド叩けば雰囲気わかる事も多いです。 話は変わりますが、エンジニアでも例外なく、仕事をする上で下記のようなことをするかと思います。 メモ管理 タスク管理 時間管理 上記のような作業をCLIでするために僕が実践している事を紹介します。 メモ管理 Markdownで書き、ファイルをGitHubのプライベートレポジトリで管理しています。 一日毎にファイルを分けて格納しています。 以下のコマンドを叩けば今日分のメモが開くので、これを叩けばとりあえずメモが取れる状態になります。
JSONをインタラクティブに掘り下げるコマンド jid - Qiita
はじめに 私はCLIを利用することが多いのもあり、 jq は今やJSONを利用する上は欠かせないツールとなっています。 ただ ・ jqのクエリを書くことなれるまで少し時間がかかる ・ クエリを書くことに慣れたとしても、初見だったりして 構造を把握していないJSONに関しては非常に手間 でみたいな感じだなと思っていました。 インタラクティブに jq のクエリを書いていければいいのに、と思ってツールを探しました(CLI限定で)が、あまり良さそうなものが見つかりませんでした。 そこで、Golangで何か作ってみたいのもあったので、作ったのが jid というツールです。 リポジトリ Github : simeji/jid インストール 以下からバイナリダウンロードしてzip解凍するだけです。 https://github.com/simeji/jid/releases Macの場合はbrewで入れ
GolangでAPI Clientを実装する
特定のAPIを利用するコマンドラインツールやサービスを書く場合はClientパッケージ（SDKと呼ばれることも多いが本記事ではClientと呼ぶ）を使うことが多いと思う．広く使われているサービスのAPIであれば大抵はオフィシャルにClientパッケージが提供されている．例えば以下のようなものが挙げられる． https://github.com/aws/aws-sdk-go https://github.com/Azure/azure-sdk-for-go https://github.com/PagerDuty/go-pagerduty https://github.com/hashicorp/atlas-go 特別使いにくい場合を除けば再実装は避けオフィシャルに提供されているものを使ってしまえばよいと思う（まともなものなら互換性などをちゃんと考慮してくれるはずなので）．一方で小さなサービ
機械学習を使って作る対話システム - Qiita
このような対話を通じて、レストランの検索に必要な情報をユーザから取得し、レストラン検索を行います。 今回、レストラン検索にはHotPepperグルメサーチAPIを利用させていただきました。ありがとうございます。 システムアーキテクチャ 対話システムは複数のモジュールから構成されています。今回は、各モジュールは独立に動作させず、前段階のモジュールの処理が終わった段階で駆動されるようにしています。 最終的なシステムアーキテクチャは以下の図のようになりました。 今回のアーキテクチャに沿って処理の流れを説明すると以下のようになります。 ユーザがテキストを入力すると、入力したテキストは言語理解部に入力されます。 言語理解部では入力されたテキストを解析して、対話行為と呼ばれる抽象的な意味表現に変換します。 言語理解部から出力された対話行為は、対話管理部に入力されます。対話管理部では入力された対話行為を
Node.jsでスクレイピングするならば - プログラマでありたい
昔、Rubyでクローラー/Webスクレイピングの本を書きました。今でもちょくちょくとスクレイピングのコードを書いたりはするのですが、実行基盤についてはサーバの運用管理が面倒くさいのでAWS Lambdaを使うことが多いです。そうなると、Lambdaは基本的にはRubyが使えないので、言語はPythonかNode.jsを利用することになります。Pythonもいいけど、今後のことを考えるとNode.js力を高めておきたいと考えています。ということで、Node.js縛りでスクレイピングの仕方です。 スクレイピング対象のページの種類 私の中の勝手な定義ですが、スクレイピングには3種類あります。 1. 静的サイト／JavaScript不要なページに関するスクレイピング 2. 対話型サイト／JavaScript不要なページに関するスクレイピング 3. JavaScript前提のページに関するスクレイピ
Web APIをUNIXパイプで繋ぐツール IOpipe を試してみた | DevelopersIO
ども、大瀧です。 IOpipeというツールが面白そうだったので、試してみた様子をレポートします。 IOpipeとは IOpipeは、Web APIからのレスポンスを受け取りNode.jsでロジックを記述したフィルタ処理を適用、その結果をAPIへのリクエストとして送信するCLIツールです。標準入力および標準出力にも対応しているのでUNIXパイプによる他のコマンドとの組み合わせが可能です。また、NodeJS SDK版もありNode.jsアプリケーションに組み込めるようにもなっています。 以下のサイトでIOpipeのコンセプトが紹介されており、AWS LambdaやGoogle Cloud Functionsに対応する予定で、サーバーレスアーキテクチャのツールとしても機能する予定のようです(現在は未実装)。 Transforming the web with IOpipe – Transform
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
