You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
ブラウザでバイナリを扱うのが辛すぎて、何とかしたいと作りこんでいた冶具(HexDump.js) がだんだん極まってきたの図。 ただの Hex Dump 機能として作ってたハズが、気がついたらこんな感じに。 冶具: 作業の効率を改善するために自分でクリエイトする道具 HexDump(source, { style: { "packet_start_code_prefix(00 00 01)": { values: [0x00, 0x00, 0x01], css: "font-weight:bold;color:green" }, "stream_id(1 byte)": { begin: 3, end: 4, css: "font-weight:bold;color:blue" }, "PES_packet_length(2 byte)": { begin: 4, end: 6, css:
東京Node学園祭2015に参加したきたメモです。 また、技術文書をソフトウェア開発する話という内容でブログ以上技術書以下の文書を書く場合における開発方法について話してきました。 The State of JavaScript - @domenic スライド: The State of JavaScript (2015) 皆Babelを使い始めたらそれはスタンダードじゃない可能性があるので気をつけた方がいい Custom Element Service Worker ブラウザの中でプロキシサーバ的なことができる Custom Paint registerPaint 新しいCSSプロパティ 言語 TC39/ecma262 に新しい仕様が置いてある GitHubにある Living Standard的な感じになってる Spec番号 あんまり気にする必要はない 言語ではバージョン番号は必要ない
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました(少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど)。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
�フレームワークを利用した�シングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
僕が1日に1回ぐらいの頻度で見ているページの中の1つに GitHub の Trending repositories のページがあります.このページには言語ごとに日毎・週毎・月毎の単位で GitHub 上で人気のリポジトリがランキング形式で表示されます. 話題になっているライブラリやソフトウェアの一次ソースとして便利なのですが,微妙にアクセスが悪い位置にあり,言語ごとにしか見られません.また,ランキングには常に人気な「常連」リポジトリが多々いるので,新しく話題になっているリポジトリはその中に埋もれがちになってしまいます. そこで,今回はこれらの問題を解決すべく,GitHub のトレンドクライアント Trendy を Electron ベースでつくりました. Trendy - Menubar App to Keep You in the Trend Trendy は GitHub のトレンド
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
このまえ一瞬話題になった本読んだのでメモ。 www.packtpub.com 目次 総評 JavaScript成分あんまり無い 奴隷管理アプリケーション まとめ 総評 長さ: ☆☆★★★ 読みやすさ: ☆☆☆★★ 英語のムズさ: ☆★★★★ こんな人にオススメ DDD本読みたくないけど雰囲気だけ知りたいWebマン DDDはわかるけどJavaScriptよくわからないWebマン 本書では、ケーススタディを通じてDDDの諸概念を解説し、これを用いたWebアプリの開発方法を紹介する。 わりとフンワリした感じ。 「JavaScript」という名前を冠しているが、ExpressとMochaを使ってるくらいの話だった。 Expressに特化した知見や、SPAに特有の問題に対する解決策などは提案されていない。 また、DDD特有の諸概念についても大まかな解説にとどまり、前触れ無く「Service」という言
Safe JavaScript Templating Automatic Contextual XSS Escaping made robust, easy, and fast Is XSS defense too hard? Cross Site Scripting (XSS) has topped the list of OWASP Top 10 Web Application Security Risks over a decade. We all know its consequence is terrible, allowing attackers to compromise a website and exfiltrate sensitive user information. But what makes it so hard to be eliminated from we
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する(破綻するのではなく)ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
#nikkeidenshiban_Sansan の勉強会での発表資料です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く