Using regexes for extracting data from web pages? Check out ParseHub, a visual web scraping tool built by the team behind Debuggex.
2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016
正規表現チェックツールまとめ 個人的によく使う or 人に教える正規表現チェックツールをまとめました お役に立てますと幸いです 目次 Debuggex: Online visual regex tester Regexper Regular Expression Test Drive 正規表現チェックツール - Kaizen Platform RegexPlanet - Online Regular Expression (Regex) Testing and Cookbook Regex Tester Online regex tester and debugger Rubular: a Ruby regular expression editor and tester 1.Debuggex: Online visual regex tester 対応言語 JavaScript, Pyt
2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビューライブラリ/フレームワーク モジュールバンドラ タスクランナー パッケージマネージャ テスティング トランスパイラ 2016年に使った: Babel。各ブラウザの JavaScript エンジンで ES2015~ES2017 の実装が進んでいるので、関わっている案件のブラウザのシェア次第なところもありますが、ES2015~ES2017 の仕様だけトランスパイルしたいのであれば、再来年あたりから要らなくなるんじゃないかな、という気持ち。 来年使いそう: 静的型付けがメインで、ES20XX から ES5 へのトランパイルは副次的で
(訳注:2016/9/28、頂きましたフィードバックを元に記事を修正いたしました。) 何か新しいものが登場したと聞くと、人はそれに対する賛否を選ぶ傾向があります。TypeScriptが登場したときの私は、キーコンセプトのうち自分に合わないものをほんの幾つか取り上げて「否」の側を選んでしまいました。この記事では、私が当時どのように考えていたか、そして私がどのようにして「TypeScriptの背景には、大きな犠牲なしに利点を得る方法を知る人々による偉大な考えがあった」ことに気付いたかを説明しようと思います。 TypeScriptが登場したときの私の考え Anders Hejlsbergが何かに取り組んでいるときは、つい私はそちらに注意を完全に傾けてしまいます。彼はコンパイラの構築やプログラミング言語の設計を30年近く経験してきています。彼の様々なプログラミング言語に関する貢献については 彼のW
Googleスプレッドシートで作った単語帳から毎日LINEに英単語を送ろう Google Apps Scriptを使ってLINEでメッセージを送ろう(4) ここ4回にわたって、LINE Notify APIとGoogle Apps Scriptを組み合わせて使う方法を紹介しています。今回は、Googleスプレッドシートを参照して、毎日、覚えたい英単語をLINEに送るという仕組みを作ってみましょう。 2017.06.29 Googleカレンダーの予定を毎朝LINEに通知しよう Google Apps Scriptを使ってLINEからメッセージを送ろう(3) ここ3回にわたって、LINE Notify APIとGoogle Apps Scriptを組み合わせて使う方法を紹介しています。前回は、定期的に会議の参加者にリマインダーを送るプログラムを作りましたが、今回は、Googleカレンダーの予定
https://www.npmjs.com/package/what-do-i-depend-on github.com 先日のleft-pad騒動で、自分のプロジェクトのnode_modulesを慌ててチェックした。 普段依存の依存とかまったく意識してないけど、いざ見なおしてみるとその数の多さにビックリする。 全ての依存を把握するのは正直無理だけど、ざっと見てみるだけでも発見がある。 意外とscoped packageが使われてたり。めちゃくちゃミニマルなパッケージが人気だったり。 babel関係のパッケージが多すぎて目眩がしたり。 というわけで、自分のプロジェクトの依存パッケージを再帰的に調べて、依存度合いをチェックするツールを作った。 node_modules/ 内の package.json を再帰的に調べて、パッケージが登場した回数を表示する。 使い方 インストール npm i
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
どんなソフト? ExcelのシートをHtml+Css+Javascriptに変換するフリーソフトです。 数式も変換できるので、Excelで作ったツールをWebで公開する時などにご利用下さい。 サンプル1 サンプル2 DQ10『魔法使い火力シミュレータ』はフィオルさんが作成したExcelシートをExce2Jsで変換することで作成されています。 ダウンロード Excel2Js(本体)ダウンロード ヘルプ(マニュアル)のページはこちら 更新履歴 2016/01/03 ver.0.1.3 数式結果をコピーできるように改善 2016/01/03 ver.0.1.2 表示形式が適切に変換されないバグを修正 2016/01/03 ver.0.1.1 ROUND関数・CHAR関数の追加、テンプレ選択周りのUI改善、バグ修正 2016/01/03 ver.0.1.0 アルファ版公開 主な機能 基本機能 数式
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ?」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ???」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Authors Nishant Das Patnaik (nishant.dp@) Sarathi Sabyasachi Sahoo (sarathisahoo@) Introduction Today, more and more developers are switching to JavaScript as their first choice of language. The reason is simple JavaScript has now been started to be accepted as the mainstream programming for applications, be it on the web or on the mobile; be it on client-side, be it on the server side. JavaScript
下記は画像なので動きません。 「Leaflet.Zoomify」は、地図ライブラリのLeaflet.jsを使用して画像を地図のように表示するプラグインです。 下処理として、「ZoomifyExpress4」というアプリケーションを使って画像をタイル化します。(解凍したファイルの中から「Zoomify Converter.exe」を実行し、タイル化する画像を選択すれば後は自動で処理がおこなわれます) タイルに変換すると容量がかなり増えるので気を付けてください。 サンプル STARMEN.NETからダウンロードした「Full Map of MOTHER / EarthBound Zero」画像をZoomifyExpress4を使ってタイル化し、Leaflet.Zoomifyで地図として表示しました。 ※下記の地図は動きます。 leaflet.jsを読み込んだ後に、L.TileLayer.Zoo
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2014年度前半はこれらを押さえよう。 ← 前回 連載 INDEX 次回 → 今年の初めに「人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較]」という記事を公開したことで、JavaScriptライブラリの人気ランキング情報へのニーズは高いことが分かった。しかし、その記事でのランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」を用いた。このため、ライブラリ名が一般的な英単語(例えば「LESS」など)の場合、どうしてもライブラリとは無関係の検索も含まれてしまっていることが懸念された(※それでも「人気上昇中かどうか」を計測する面ではある程度有効な手段だと考えている)。 そこで今回、より正確な情報を読者に提供するために、実際にWeb制作者/
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは? Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単! Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く