はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ###追記・修正 2020/1/28: ご指摘を受け、Firefoxの綴りを正式なものに修正しました（恥ずかしながら知りませんでした）。 また、旧Edgeという表記をしていますが、現時点ではEdge Legacyというのが正しい表現かもしれません。もっと正確にはEdgeHTMLエンジンのEdgeを指します。新Edge(Chromium)は体感的にChromeと同様の動きをします。 モチベーション Markdownエディタを作っていたが、Macの動作がWindowsやLinuxとは微妙に異なり、仕様変更が余儀なくされた。 一方で、Fire

モチベーション WebアプリやElectronアプリなど、クロスプラットフォーム環境のアプリではフォントの互換性も重要になります。Google Fontに代表されるWebフォントは一つの解ですが、日本語の場合はフォントファイルの容量自体が大きく、通信量の増加や遅延が気になる場合もあります。 別の解として、WindowsとMacの標準インストールされているフォントである游ゴシックと游明朝を使うというものがあります。しかし、WindowsとMacでは、インストールされているFontのweightが違ったり、OSのレンダリング方法が違ったりして、一般的にWindowsでは細く、Macでは太く表示されます。しかし、font-weigtの問題さえクリアできれば、クロスプラットフォームアプリにおいてはとても有用です。 二つ目の問題として、font-weightやfont-familyの指定がブラウザに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Chromeだけはcompositionendの後に最後のMutationOvserverが発火します。厄介な問題で、後述します。 また、やはり、MacのSafariだけはcompositionend後にbackspaceのkeydownが発火してしまいます。自前でDOM操作する場合はこのEnterは無視するように対応が必要です。 Firefoxは基本的にWindowsとMacで同じ挙動です。素晴らしい。 Safariの問題１：compositionend後のkeydown発火 Safari特有の問題ですが、compositionendの切っ掛けになるEnterキーやBackspaceキー(おそらくDeleteキーも)の入力に対して、compositionend後にkeydownが発火します。これはIME入力中以外のこれらのキー入力と区別しなければ、独自のDOM操作の邪魔になります。com

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

これは たまに、LINE API触ってるエンジニアと話していると、Firebase Authenticationと繋いでいる/繋ぎたいと思っている、 という話を聞く。 恐らく、現時点で LINE ログインをしたいようなシチュエーションだと、わりとライトなプロダクトが多くて、そういうプロダクトでは Firebase を使って開発していることが多いのかな。 例えば、LINE Messaging API の柔軟なメッセージの JSON の保存場所を Firestore にして Bot をつくる、とか。 そのときに、LINE ログインのことを考えると思うのだが、実はとにかくユースケースがややこしいし、情報あんまりなくて困るよね、という話。 まぁ都度ちゃんと考えるしかないよね〜くらいに思っていたけど、そういえばLINE API ExpertになったときにFirebaseが絡んだユースケースは俺に任せ

モチベーション ElectronではwebContents.print()関数やwebContents.printToPDT()関数を使って簡単に印刷やPDF作成ができます。この時、CSSで印刷サイズをmm等の実物長さで指定することで、実際の印刷時の各種要素の大きさを指定できるので便利です。が、注意しないと余分な余白が入ってしまいます。経験則からくる注意点を情報共有します。 ※2020/2/19：色々試行錯誤して、@pageとの関連、print()とprintToPDF()の違いなど大幅に改定しました。 最重要注意点 ChromeおよびChromium系ブラウザ、Electron(7.1.9～8.0.1で確認)において、@page内に記述したmargin, margin-left, margin-right,margin-top,margin-bottomについては、単位の変換におそらくb

はじめに Electronの情報って、検索すると沢山出てくるのに、ところどころみな違っていて見極めが難しいですよね。まだまだ私自身よくわかっていないですが、調べた情報を共有します。 現時点での結論として、セキュアなIPC通信にはcontextBridgeを使おう、ということらしいです。 とはいえ、Electronの状況はversionによってかなり変わるようなので、以下の際内容には注意してください。こちらで検証した時点でのElectronのversionは7.1.9です。 Electronにおけるセキュアな設計とは 前提として、Electronでは、メインプロセスと、webページ画面として動くレンダラープロセスが立ち上がります。最初にelectronコマンドの引数として指定したjsファイル(今回はmain.jsとします)がmainプロセス上で実行され、 その中でBrowserWindow.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 ブラウザ上で動くリッチテキストエディタを作りたい。 時にはtext以外の要素も使いたいので、独自のDOM操作をしたい。そうなると、入力領域はtextareaではなく、contentEditableを設定したdiv等にしたい。このとき、殆どのブラウザではexecCommandでundoとredoができる。しかし、一度でもJavascriptからDOM操作すると、execCommandによるundo/redoは上手く動かなくなる。結局は独自のUndo/Redo機構を作りたくなる。 この際の鬼門がIME入力の検知。ブラウザごとの数々のバ

これは？ Firebase Meetup #10 で 「Firestore導入前に検討したかったベスト５」 というテーマで発表したアーキテクチャ部分の話その3。 ①Firestoreを中心に据えた全体設計のコンセプト ②PubSubとCloud Functionsを使って、FirestoreのCollectionをマイクロサービスに見立てた話 ③パフォーマンスの劣化対策として、CacheのCollectionを作った話 ←今回 トライしたこと まず、どんなトライをしたのか説明していきます。 この中で、今回お話するのが、赤丸をした部分です。 背景 ぼくらは、重大な問題を抱えていました。 社内の人がユーザーであるアプリケーションなので甘えていた結果、パフォーマンスが劇的に悪くなっていたのです。。 (ぼくらというかぼくだけのせい...) 状況としては、 元々、運用をちゃんと明瞭にシンプルにしてい

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは？ Firebase Meetup #10 で 「Firestore導入前に検討したかったベスト５」 というテーマで発表したのですが、 まさかのメインの話の部分を図2枚で済ますという荒業をしてしまったので、ちゃんと書き納めます。 (反省のツイート...→ https://twitter.com/pitown/status/1093141514186706944 ) そしてなんか、書きたいこと多くない？と気付いたので、3回くらいに分けました。 ①Firestoreを中心に据えた全体設計のコンセプト ←今回 ②PubSubとCloud

ゼンチン！ゼンチン！ドネシア！ゼンチン！ こんばんは、突然ですが、Firestoreって、めっちゃ便利ですよね。 でも、ぼくおもったんです。 これはもっと便利につかえると。 ただし、 ここから先を読むにあたり、つぎのことに注意してください。 このやり方を、大きなプロダクトに突然「入れよう！」って言わない。正論の前に返り討ちに遭います 正論をお持ちの方。人間誰でも元は健気な赤ちゃんだったんです。健気な気持ちで読んで、くれぐれもお手持ちのマサカリは投げないように！ Googleの人のまえで、「Firestore便利っすよね！こんな使い方できますもんね！」って言わない ではいきましょう！ こんなひとたちに、ありがたみ！ 「管理画面をつくりたいけど、時間ないからまずは、DBオペでデータを入れちゃうか..」 「管理画面にするほどのデータじゃないからソースに定数として含めているけど、たまに**『あの文

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Ubuntu 14.04 LTSのVirtualBox用仮想ハードディスクイメージをUbuntu Japanese Teamのサイトからダウンロードして1年ぐらい使っている。最近、同バージョンのUbuntuをVMware vSphere 5.1の仮想マシンとして構築し、Windows上のVNCクライアントを経由してデスクトップを使用したいと考えたため、先行でVirtualBoxのUbuntuで色々とVNCを試した。その結果、以下のことからUbuntuとVNCは基本的に相性が悪いと結論付けた。 パッケージ化されているのはvnc4serverとtightvncserverの2つだが、いずれを使ってもUnityデスクトップをVNCでアクセスすることは困難。 GNOME3デスクトップを使うにはGNOME自体のインストールとGNOMEのパーツを個別に実行する必要があり、多くのディスク消費の

ふとしたコンパイルエラーから始まった いつもどおりC言語で簡単な計算をするプログラムを書いていました。 定数をよく使うんで関数外(つまりグローバルな定数変数として)にこんなふうに書いていたんです。 研究室ではMacを使っているのでAppleがカスタマイズしたclangでコンパイルしてました(gccコマンドでclangが走るようになってた)。 このプログラムがC言語の仕様を満たしているかは自分にはわかりません。 ただ自分の感覚ではコンパイルは通るだろうと思っていました。 まぁ1回目の代入ですし… その通りclangではコンパイルが通りました。もちろん-Wallをつけてもwarningすらもでませんでした。 ただ自宅でコンパイルするとエラーが出たのです！！！ エラーメッセージはこのように出ていました。 gccのバージョンはgcc 5.3.1でした。 そこで自宅でもclangを導入してみました。

f8で発表のあったFacebook Messenger PlatformでBotを作るエントリ。 0. これは何？なぜ今Botなのか？ Microsoft、lineに続き、1ヶ月で3社目のBot参入祭り。 なぜこんなにBotが多いのか？ それは、Botがアプリのように3rd Partyとして群雄割拠するプラットフォームになると各社が予見しているからでしょう。 Botはユーザーと直に会話し定性的な評価・リアクションを引き出せるし、それをデータとして貯められる。 アプリが増えすぎて下火な中、Botがアツい。 今年はBotの年、近い将来、アプリエンジニアの代わりにBotエンジニアが、最強のフロントエンドとして存在していることでしょう。 1. まず、Facebookにてページを作る webサイトかFacebookページをつくる必要ありと。 ここではサイトを作成→https://developers