はてなブックマーク

君が犯人だったか〜 何がきっかけなのか解りませんが、最近急にGoogle ChromeやSafariで真っ白なページが表示されるようになりました。 少し調べてみて原因の特定ができたので、メモしておきます。 起きている環境 iMac late 2014 macOS mojave ESET ver6.6.300.2 Google Chrome v 70.0.3538.110 FireFox v64.0 Safari v12.0.2 起きている現象 Google Chrome・Safari・Firefoxの3種類のブラウザで真っ白なページが表示される「場合」がある。確実に真っ白になるわけではないが、リロードし続けると「何故か」表示される事がある。 キャッシュを全クリアしても解決しない。 OSを再起動しても解決しない。 Adblock Plusアドオンを入れている。 シークレットモードで表示しても

皆さん煽ってますか? CI等でガンガンビルドエラーを出す人等がいてイライラしている方、彼らを煽ってみませんか? 今回紹介する煽りコマンドは「echo-sd」と「cowsay」の2つです。 echo-sd 通常の煽り 垂直に煽る ヘッダー・フッター付きで煽る ストレスモードで煽る 短冊で煽る パディングして煽る cowsay beavis.zen で煽る bong で煽る bud-frogs で煽る bunny で煽る cheese で煽る cower で煽る daemon で煽る dragon で煽る 雑感 echo-sd >突然の死<ジェネレーター - 拡張 POSIX シェルスクリプト Advent Calendar 2013 - ダメ出し Blog echo-sdは「突然の死ジェネレータ」のコマンド(シェルスクリプト)です。 インストールの仕方は↑のオフィシャルサイトをご覧下さい。

例のシャッチョさんの第二弾的な記事が賑わっていたので、見てみました〜 axia.co.jp こちらの記事になります。 雑な概要 多かった主張 Aさんは必敗する環境に悩む Aさんの環境 周りの人の環境 誤解を生んでいる部分について 理想 業務時間内にどんどん勉強しよう 業務時間外に勉強するという事 現実 業務時間内に勉強する事への抵抗勢力 業務時間外に勉強する事 会社の利益に繋がらない勉強 エンジニアに向いている・向いていない 勉強は超辛く継続する事が超難しい 給料が上がると勉強できる? 雑感 雑な概要 シャッチョさんの会社には昔、プライベートでは勉強しないAさんというエンジニアがいて、周りや後輩にどんどんスキル負けする事に悩んでいました。 その会社ではプライベートの勉強は強制しておらず、自分の人生なんだからプライベートの時間を家族との時間に費やすのも自由だぜ、と主張しています。 シャッチョ

appengineに待望のNode.js standard environmentが正式リリースされたので、早速計測してみました〜 前回のあらすじ 計測の仕方 環境 計測に使用したソースコード スピンアップしてフレームワークを初期化してテキストが返るまでの速度 計測1回目 計測2回目 計測3回目 計測4回目 計測5回目 結果と平均値まとめ 雑感 前回のあらすじ www.bunkei-programmer.net GAE/Javaは8になってもやはり初動が遅かったのだ。というかGAE/Java1.7とほとんど違いは無かったのだ。 www.bunkei-programmer.net GAE/Goは(javaと比較すると)くっそ速かったのだ。 そしてGAE/Node.jsが出たので計測してみたのだ。 計測の仕方 前回のGAE/Java8の時と同様に、インスタンスを削除して、必ずスピンアップが発生

もう使わない設定がネット上に散見されていたり、両者で微妙な違いがあったりする罠があるので、少しだけまとめてみます。 最近のjsではprettierの設定が一般的になってきているので、create-react-appと組み合わせる方法について、少しだけまとめてみます。 ※(注記) 本記事はmacを前提としているので、windowsの方は適宜読み替えて下さい。 BabelかTypescriptか Babel版:eslint + prettierの設定 create-react-appをグローバルにインストール babelでプロジェクトを生成 エディタ設定 eslintとprettierのモジュールをインストール eslint設定ファイル追加 eslintの除外設定ファイル追加 prettier設定ファイル追加 package.jsonにscript追加 lint実行コマンドを追加 ESLintとPre

以外としょうもない理由で表示されないんですよね〜 最近PWAが徐々に浸透してきましたね。 PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ?」となります。 ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。 しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。 今回はその原因を少しだけまとめてみようと思います。 manifest.jsonがhtmlソース内に定義されていない ServiceWorkerが登録されていない サイトがTLSに対応していない サイト訪問回数が2回ではない サイトの訪問間隔が5分以上ではない manifest.json内のアイコン画像が404である ブラウザやcurlコマンド等でアイコン画像のURLを

実際私が開発している2サイトの実例出しますよ〜 WEBサイトの開発者に取って常に気になるこの話題について、今回は私が開発している2サイトを実例として、結果をお伝えしようと思います。 ※(注記) 最後の「雑感」の後に、Angular製サイトをGolang化してみた結果を追記しました! 概要 GooglebotはどれくらいのJavaScript処理能力があるか 前提 React製サイト: tree-maps サイトの開設日 PCデバイスでの認識 モバイルデバイスでの認識 サイトマップxmlとインデックスの登録数 Angular製サイト: StringUtility サイトの開設日 PCデバイスでの認識 モバイルデバイスでの認識 本来レンダリングされる筈の画面 サイトマップxmlとインデックスの登録数 botはServiceWorkerのhtmlを取得しているのかどうか サイト上で確認できるServic

ちょっと微妙かもしれない・・・ 最近画像変換周りを触っています。 実は既にImageMagickで並列画像変換するDockerイメージを用意してたりするのですが、ImageMagickをそろそろ卒業しようと思いまして、今回PythonのPillow-SIMDで全部書き直す事にしました。 Simple fast image converter いいからリポジトリ見せろよ 何ができるの? 技術要素 どんな時に使うの? ログ Pillowとの速度比較 Pillow Pillow-SIMD TIPS OSError: [Errno 24] No file descriptors available 気づいた事 雑感 Simple fast image converter いいからリポジトリ見せろよ github.com https://hub.docker.com/r/treetips/simpl

しょうもないメモ書きみたいな記事です〜 私は業務で結構長く続く負債満載プロジェクトを担当していたのですが、ようやくAWS移行する事になり、絶賛デスマ中なのです。 ※(注記) 私はインフラエンジニアではなく、片手間でインフラもやるサーバサイド・フロントエンド?エンジニアです。 AWS LambdaとPillowで画像変換する 要件 環境整備 labmdaにアップロードするzipを生成する setup.cfg Pillowをローカルに展開する サムネイル生成ファイル フォルダ構造 成果物をzip化する lambdaの設定 TIPS 出力先フォルダは作成しておかなくてもよい ソース画像パスを維持したまま別バケットに出力したい lambdaのメモリ割り当て量 おまけ1:私と画像変換の変遷 javaのawtによる直列画像変換。 ImageMagickによる並列画像変換。 問題点 そしてAWS環境による画像変

目的が違うのに強引過ぎるだろ〜 オンプレからAWSに移行(しかもオートスケール構成にしにくい負債プロジェクトとか・・・)する際に、dockerではなくec2を使う場合、ローカルはどうするか。できればdockerにしたいですよね。 amazonlinuxのdocker imageはamazonが公式に提供しているので、これを使いたいですね。 https://hub.docker.com/_/amazonlinux/ amazonlinuxでないと、yum.repoでインストールできるバージョンが全然違いますし、apache2.4なんかは実はamazonエディションだったりするので、ec2とdockerで合わせたいものです。 最終的に、オンプレに優しいansibleをdockerと組み合わせると、↓こんな感じでしょうか。オンプレもdockerも両方イケるぜ〜、な構成です。 環境 サーバ種別 O

exampleなのです〜 初のangular記事です。 完全なサーバサイド人間だった私が、去年の冬頃にせっせとreact, react-router, reduxを勉強し、それら技術を使ってtree-mapsというSPAサイトを作りました。 www.tree-maps.com reactは最近ライセンスの問題で揺れていたり、Microsoftのtypescriptが世界的にシェアを集めている事から、ちょっとangularやってみるか!という事で、最近angularをやっています。 http://qiita.com/exli3141/items/a36b9bc88d818efb3331qiita.com 実はreact + typescriptも試したのですが、元々typescriptベースに作られているわけではないので、非常に難しく、挫折するには十分な初見殺しがありました。 www.bun

いきなりSearch Consoleからメールが来てビックリしましたよ〜 さあついにこの時がやってきてしまいましたね・・・ はてなブログさん・・・ お尻に火が付きましたよ! はい。はてなブログのちょっとマズイ状況になりそうです。 どういう事か、順を追って説明します。 何が起きたのか はてなブログとhttps 雑感 何が起きたのか 本日GoogleのSearch Console(旧ウェブマスターツール)から、以下のメールが送信されました。 要約すると、 chromeのバージョン62利用者は、そのページがhttpの場合、フォームのテキスト(textbox)を入力すると警告を表示するよ という事のようです。警告が表示される箇所はアドレスバーで、警告マークの右に「保護されていません」等と表示されるそうです。(英語版の場合はNot Secureの模様) 現在のchromeのバージョンはv60系なので

自然とググってコピペするだけになってしまうのです〜 ここ数ヶ月ほどずっと新人教育をしていて気づいた事がありました。 課題が出される。 googleで検索する。 コピペしてちょっと直す。 提出する。 私と私以外の第三者から新卒に課題を出していたのですが、どうも新卒(仮にA君とします)はどんな課題が出されても上記行動パターンを取っていた事が解ったのです。ググってコピペして完了〜、という具合です。 A君に一体何が起きていたのでしょうか? A君に起きた事 ググってコピペして終了 自分でビジネスロジックを書く事ができない 課題を自分の都合のいいように解釈する事があった 他人の言葉に強いバイアスがかかってしまう スケジュールに間に合わない 課題の内容と共に課題の目的も明示する 課題は目的ごとに出題する スケジュールに間に合わせる課題 自分で考える事 文章を正しく解釈する事 自分が他人にAPIを提供する

もうご存知だと思いますが、とうとうapache2.2系がEOL(End Of Life)を迎え、2017年12月が最後のセキュリティアップデートとなります。 [ANNOUNCE] Apache HTTP Server 2.4.25 Released 世の中のオンプレ案件や個人サイトではapache2.2を使っているケースが多いと思うので、2.4との違いやアップグレード時のエラー対応について、少しだけ手順をまとめてみようと思います。 概要 2.2から2.4へ 2.4をインストール ディレクトリ構成等の違い 2.4のデフォルトServer MPMについて 2.2のServer MPMの変更方法 2.4のServer MPMの変更方法 エラー集 Ignoring deprecated use of DefaultType Either all Options must start with +

最強かと言われると全然最強ではないのですけどね〜 ブラウザ界ではchrome一強と言ってもいい状態が長らく続いていましたが、最近Firefoxが盛り返してきたり、chrome以外のブラウザも徐々に息を吹き返してきているようです。 そんな中、vivaldiが実はいい感じに仕上がってきている事が解ったので、今はchromeをやめ、vivaldiに移行してみました。 vivaldiとは vivaldiのメリット マウスジェスチャーが標準搭載 キーボードショートカットが標準搭載 chromeのアドオンがそのまま使える タブを閉じた時の挙動のカスタマイズ機能が標準搭載 固定したタブの挙動 chromeの開発者ツールと全く同じものが利用可能 サイトによってツールバー部分の色が変わるのが面白い vivaldiのデメリット スクロールがスムーズでない アカウントの同期機能が(まだ)無い 開発力の差 小さな

色々嵌ってかなりきつかったです。 会社ではJDK1.6まみれですが、個人開発ではjsにどっぷりになりつつあるtreeです。 tree-mapsでは、babel(ES2017), react, redux, react-router(v3) の組み合わせだったので、今回はちょっと変えて、Typescript(v2.3), react, redux, react-router(v4) の組み合わせを勉強中です。 最初は「Babelと比較してTypescriptの環境構築目茶苦茶楽だわ〜〜」なんて考えてたのですが、Typescriptの書き方が全然解らないし、問題児react-router(v4)のおかがで、動作させるまでに恐ろしく手間がかかったので、色々メモしておこうと思います。 ※(注記) 今回はメモ書きレベルなので、精度は低いと思われます。 使用モジュール react-router-reduxが対

やってやった もしかしたら知っている方もいるかもしれないSchemaSpyですが、↓長らく更新が停止しており、皆静かに離れていきました。 SchemaSpy この状況をに絶望した?人達が集まり、有志による開発がGithubで始まっていました。 github.com 以前は非常に簡素なデザインのDB定義書で、「ちょっとかっこ悪い」「(見た目が)イケてない」と思われたと思いますが、新たにデザインも刷新され、twitter bootstrapによって生まれ変わりました。 Chinook Database 折角なのでSchemaSpyを再び使ってみようとしましたが、Dockerに慣れてきた私達には、graphviz, javaをインストールしたり、JDBCドライバをダウンロードする事すら億劫です。 SchemaSpyによって生成したDB設計書をローカルに保存したくないので、サーバに定義書を配置して

大分乗り遅れた感が強いですが、東京リージョンに変更しました。 GAE/Jのサイトでもかなり速くなりましたよ〜 私は個人でGoogle App Engineを使って以下のサイトを運営しています。GAE/Java+素のServletで作っています。 www.tree-maps.com 今回リージョン変更の作業を行ったので、ざっくりとしたリージョン変更手順や効果等を書いてみます。 昔のGAE 今のGAE us-centralからasia-northeast1への変更手順 目標 前知識 リージョンが選択できない場合は新規にgoogleアカウントを作成する 新規GCPプロジェクトを作成する EclipseのGoogleログインのユーザを変更する デプロイ先のプロジェクトIDの切り替え デプロイする 旧アカウントのGAEプロジェクトのカスタムドメインを削除する 新アカウントで再びカスタムドメインを登録

Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか? 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト(ブラウザテスト)の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh

密接な関係です。 いきなりですが、 プログラマに低スペックな環境を与えてはいけない と私は考えています。 逆に、もしプログラマを苦しめたいなら、低スペックPCや貧弱なネット回線を与えると、簡単に苦しめる事ができます。 低スペック環境がもたらすこと 低スペック環境の定義 SSDでないことによる弊害 メモリが16G以下であることの弊害 モニタが24インチ以下であることの弊害 ネットワークの回線が貧弱であることの弊害 無線LANがプツプツ途切れることの弊害 机にパーティションが無いことの弊害 どうやって低スペックを見分けるか 雑感 低スペック環境がもたらすこと 低スペック環境の定義 厳密な低スペックの定義など無いのですが、今回は仮に以下を低スペックと定義します。 ストレージがSSDではない。 メモリが16G以下である。 モニタが24インチ以下である。 ネットワークの回線が貧弱である。 無線LAN

長い道のりでした・・・ 今回の記事は長文になります。 ありがとうSeasar。そしてさようなら。 次のフレームワークは Spring bootを使ってみて 良かった点 Spring STSが便利 application.ymlが便利 セッションレプリケーションが楽 ロガー周りが楽 Controllerが使いやすい actuatorのhealthcheckが便利 gzip圧縮転送が楽 Fully ececutable jarが楽 swaggerとの連携が楽 設定ファイルと定数クラスの紐付けが楽 静的リソースのバージョニングが便利 悪かった点 application.ymlで警告が出てしまうプロパティが有る Spring Batchが難しい 例外ハンドリング周りに注意 ログ設定まわりの混乱 domaとの連携に一手間必要 mime-typeにjsonpが無い jsonpに謎のコメントが混入する

ついにGAになったdocker for macとdocker for windows。これでVirtualboxやVMWareを別途インストールする事なくdockerが利用可能になりましたね! docs.docker.com docker for macですが、既にdocker toolboxでdocker一式をインストールしている状態でも、特に何かをアンインストールする事なくdocker for macをインストールすれば、途中でマイグレーションする?と聞かれてそのままdocker-machineからdocker for macに移行できます。 という事で早速試してみたのですが、MySQLのコンテナにリモートで接続しようとして、ちょっと困った事が起きました。 MYSQLコンテナにつながらない!? MySQLコンテナを起動する 何故localhostではダメなのか my.cnfを指定したm

こういうくだらない事もたまにはいいものですよ〜 ログイン時に情報表示しよう! figlet Amazon linux EC2の特殊なmotd事情 サンプル task 99-banner.sh 出力結果 最終的なmotd表示 雑感 ログイン時に情報表示しよう! AWSでec2のサーバにsshログイン時に以下のような表示をよく見ますね。 __| __|_ ) _| ( / Amazon Linux AMI ___|\___|___| https://aws.amazon.com/amazon-linux-ami/2013.03-release-notes/ [ec2-user ~]$これは、motd(message of the day)という機能で、このメッセージはカスタマイズする事ができます。 今回は、ここにちょっとイカしたメッセージを表示したいと思います。 figlet github.c

無料なのにリッチですよ〜 探す条件 gentelella スクリーンショット live demo 特徴 blur-admin スクリーンショット live demo 特徴 Root Admin スクリーンショット live demo 特徴 AdminLTE スクリーンショット live demo 特徴 ace スクリーンショット live demo 特徴 一覧で比較 テンプレートを探す際に注意したい点 雑感 探す条件 無料である事。 UIが綺麗である事。 レスポンシブである事。 Live demoがある事。 (できれば)ソースがgithubで公開されている事。 これら条件を満たしている管理画面テンプレートを探してみました。 gentelella github.com スクリーンショット 通常表示だとこんな感じです。 スクリーンを狭めてメニューを展開するとこんな感じです。 live demo

GAE/Gに手を出し始めましたよ〜 最近tree-mapsのフレームワークを、playから素のservletに変えました。では素のservletとgoを比較したらどうだろう?更にgoのginに興味があるので、それ使って比較しみようか、という事で試してみる事にしました。 www.bunkei-programmer.net 最初に断っておきたいのですが、 この記事は正確なベンチマークを取るような精密なものではありません。ゆる〜く適当になんとなく計測するものです。 従って、「こんな比較に意味はない!」「この計測コードはこう書いた方がいい!」のような、精密性を求めるものではありません。もし精密なベンチマークを求めている方は、ご自分で計測環境を構築して計測コードを書いて計測するようお願いします。(そうしないと納得のいく結果にならないかと思います) GAEとスピンアップ GAEとは? GAE/Jのスピ

久しぶりにansibleをやっているわけですが、.bash_profileに書いたPATHが反映されないなあ、と思って色々調べてみました。 どういう事が起きたか ansibleのドキュメントを見てみる 2通りの解決策 shellモジュールを使う時は必ずログインシェルとして実行する メリット デメリット ansible.cfgにexecutableを追加してしまう メリット デメリット 雑感 どういう事が起きたか 今回rbenvのplaybookを書いていて気づきました。 大まかにrbenvのインストールは以下の流れになります。 rbenvをgit cloneする。 ruby-buildをgit cloneする。 ~/.bash_profileにrbenvのバイナリへのパスとrbenvの初期化コマンドを追記する。 rbenv install 2.2.2する。 rbenv global 2.2

yum install mysql-xxx時のコンフリクト、yum install MySQL-python時のコンフリクトにも対応してますよ〜 環境 MySQL-serverのプロビジョニングのつらみ 問題1、yum install mysql が面倒 問題2、yum install MySQL-pythonでconflict 問題3、インストールしたMySQL-pythonが見つからない? 問題4、rootパスワードを変更したいが・・・ 全作業をplaybook化 雑感 ※(注記) 本記事で行う作業全てを自動化するplaybookも用意しています(記事末尾で紹介)。 環境 OS RHE v5系 ansible v2系 MySQL 5.5系 最新ではない環境とします。オンプレ案件で実際ありそうな環境を意識しています。 MySQL-serverのプロビジョニングのつらみ 1)MySQLのrpm(c

Spring boot、Spring batch、Flyway、Jooq code generator、Jooq DSLの組み合わせですよ〜 Jooqとは Jooqのサンプル 環境 プロジェクト構成 このサンプルで行われる事 Flaywayの場合 Jooq DSL の場合 Jooqを触ってみて 良かった点 集約関数 DDL sysout 悪かった点 複雑なSQL Jooq code generatorの設定 未知数な点 おまけ MySQLとjavaの型のマッピング一覧 bigint型とLong型 雑感 Jooqとは www.jooq.org 詳細は公式サイトを見た方が早いのですが、簡単に言うとJavaでタイプセーフにSQL発行できるライブラリです。 言葉で説明しても伝わりにくいので、実際のjavaのコードを見るとイメージできると思います。 List<PrefectureRecord> re