約束の地

キャロ組

Web

画像を WebP に変換する方法(Ubnutu 16.04 LTS)

Web

結論 1. webp のパッケージをインストールする。 インストールします。 $ sudo apt-get install webp 2. cwebp コマンドで変換する もっとも単純なコマンドだと以下のようになります。 $ cwebp INPUT_FILENAME.jpg -o OUTPUT_FILENAME.webp

pre タグを使いたくない場合は white-space を当ててやる

Web

pre タグ 例えばデータベースから \n 込みのテキストを持ってきてそれを Webページ に展開したい場合、preタグ を使うとサクサクと改行を反映できます。が、フォントが強制されるのがつらいです。 white-space プロパティ その場合は white-space のスタイル…

MaterializeCSS の Cards の高さを揃える方法

Web

MaterializeCSS とは CSS のフレームワークです。 Cards Components Materialize にはいわゆる「カード型」のコンポーネントを生成できる API*1 があります。 カードを並べると高さが揃わないことがある このカードをそのまま並べていくと、以下のように高さ…

HTML を埋め込むだけで(サーバーサイド不要で)フォームでメールを送れる Formspree

Web

やりたいこと Webページ にメールフォームを設置したい でもサーバサイドのコード書く(環境作る)のはめんどい XSS とか CSRF とかもめんどい 静的ページだけで完結させたい GitHub Pages とか Netlify とか そんな方へ Formspree を使うのはいかがでしょう…

Google Analytics において、HTTP のサイトでも Twitter からの参照元が取得できる理由

Web

前提知識 ツイートに埋め込まれた外部リンクは https://t.co/1234567890 のような 短縮URL に変換される その t.co のリンクをクリックしたとき、ユーザは以下のリンクの遷移をたどる ツイートのページ → t.co → リンク先のページ*1 つまり t.co はリダイレ…

Chrome デベロッパーツール で Vue のタブが出ないときの対処方法

Web

結論 vue.js を読み込みましょう。 <script src="vue.js"></script> だめだったこと CDN(もちろんだめ) vue.min.js を読み込んで Vue.config.devtools = true; を書き加えた この場合、拡張機能のアイコンをクリックした際に「Vue のタブをさっそく見てみましょう」的なメッセージ(以下…

SlideShare へのファイルのアップロードが失敗した場合はファイル名を疑う

Web

概要 Oops, something went wrong. Upload failed というメッセージが出て何回アップロードを繰り返しても失敗する場合の対処としては、「ファイル名を変更してみる*1」とよいということです。 補足 何らかの条件の上で日本語が入っているとダメっぽい気がし…

Google の Song Maker を使って幻水IIの「回想」を作ってみた

Song Maker これです。 幻水IIの「回想」を作ってみた 「Cubase 使えばよくね?」となりイントロで断念したのであとはお願いします。

h5ai で設定したほうがよいオプション

h5ai 以前紹介しましたこれです。 オプション設定 private/conf/options.json でオプションを設定できるのですが、以下の2つはデフォルトから変えておいたほうがよいかなと思いました*1。 *1:もちろん場合によります

ヘッドレス Chrome でスクリーンショット(画像やPDF)を取得する

ヘッドレス Chrome Chrome 59 から Headless Chrome が搭載されました。PhantomJS の現状を考えると、早めにこちらに移行するのがいいかと思います。詳しくは以下の公式ページなどを。 スクリーンショットを取得する 上記の公式ページに書かれていますが、動…

Ubuntu 16.04 LTS にて Lighthouse をコマンドライン(CLI)で実行する

Lighthouse これです。

Babel で JSX をトランスパイルする(最小限操作)

目標 最小限。

JavaScript 開発のまとめ(用語、ツール……)

前提 2018/02/18 現在でかき集めた内容です リポジトリ等へのリンクを付け加えたい

Chrome Developer Tools の Network の結果を保存(HARファイル)して開く方法

Web

結論 Developer Tools の Network タブを開いて HARファイル をウィンドウの中にドラッグ・アンド・ドロップすればよい。 補足 HARファイル を保存するためには、Network タブのウィンドウ内の適当なところで右クリックをし、出てくるメニューから「SAVE as …

webpack-dev-server に localhost 以外からアクセスできるようにする場合は disableHostCheck: true を config に書く

追記 現在では disableHostCheck は不要です*1。この記事を書いたときにバージョンの差異があったようです。 結論 単に webpack-dev-server の実行オプションに --host 0.0.0.0 と指定するだけだではだめ*2。webpack.config.js に devServer を追加し、その…

CSV をさっさと HTML で可視化したい場合は CSVtoTable が便利

状況 CSV ファイルを手っ取り早く Webブラウザ で可視化したい場合には CSVtoTable を使ってササッと変換すると楽です。

Yarn での小さなハマり

Yarn ご存知 Yarn です。プチハマりしたところを書いておきます。

Elasticsearch は root で実行できない

現象 Elasticsearch で Permission のことを言われたらおそらく標題のことが原因の可能性があります*1。具体的には以下のようなエラーメッセージが出ます。 Could not register mbeans java.security.AccessControlException: access denied ("javax.managem…

S3 のクローンである OSS の minio を使う

minio これです。golang です。

Node.js のバージョン管理に ndenv を使う(nvm ではなく)

nvm ではなく ndenv を使う理由 nvm でのバージョン管理は、ユーザ単位ですべての場所(ディレクトリ)での実行バージョンが統一されます。rbenv のように、ディレクトリごとにバージョンを使い分けたいので ndenv を使います。

2018年の現在、どの Wiki を選ぶか

Wiki なんだかんだで情報共有の手段として Wiki を用いるのは有用です。いや、もちろん Scrapbox 大好きですが。 今現在、Wiki を新たに選ぶならどれがいいかなと思っていろいろ触ってみました。 結論 crowi-plus がよいと思います。

unicorn を最小限で起動するだけの方法

結論 1. rack と unicorn の gem を入れる $ gem insatll rack $ gem install unicorn 2. Rack の設定ファイル(config.ru)を書く run Rack::Directory.new '.' 3. unicorn を実行する $ unicorn 4. 8080 ポートにアクセスして、実行ディレクトリ一覧が表示…

「ricollab 郵便番号検索」のサービスが2018年2月28日で終了

「ricollab 郵便番号検索」のサービスが終了 「ricollab blog」「郵便番号検索サービス」の各サービスが2018年2月28日で終了とのことです。 ricollab Web Tech Blog » Blog Archive » 【重要】ricollabサービス終了のお知らせ 「Webを支える技術」で紹介され…

h5ai をサブディレクトリで用いる方法

結論 ルートにある.htaccessの_h5aiディレクトリの指定場所を変更する。

Ruboty 用 の ChatWork Adapter に任意のルームで発言できる機能を追加しました

Ruboty 用 の ChatWork Adapter こちらになります。 任意のルームでの発言をしたい 現在の上記 Adapter の機能では、「発言を監視するルーム」と「発言を行うルーム」が同一となっています*1。そこで、新たに、「任意のルームで発言をする」機能を追加しまし…

HTTPメソッド と RESTful(RESTful設計、RESTful Webサービス)と Rails 5 におけるアクション

Web

今さらなまとめです。

Heroku に Rails をデプロイしたら Application error (crashed) が出続ける場合

前置き 2018/01/20 現在のお話です。 結論 gem 'pg', '0.20.0' とバージョンを指定していますか。

Middleman で独自の Ruby ロジック(変数)を組み込む方法(ヘルパー導入)

公式ドキュメント まずここから見ましょう。 Middleman: ヘルパーメソッド やり方 いくつかやり方が書いてありますが、今から新しくやるならば helpers ディレクトリを作ってその中に放り込むのが一番ラクです。

Middleman で Slim を使う方法(2018-01-20)

バージョン middleman (4.2.1) 結論 Gemfile に slim を追加して bundle install すれば(するだけで)いい。 補足 config だとかをあれこれ編集する必要はありません。

Middleman を インストールする方法(グローバルな middleman gem を使わない)

Middleman これです。 Middleman: 作業を効率化するフロントエンド開発ツール Middleman を選んだ背景としては、既存の Ruby の資産を使いたかったことと、Jekyll では別のロジック(ヘルパー)から変数を渡すことが困難だったことです。

Powered by はてなブログ