2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、「jQuery 3.3」が1月19日付けでリリースされました。 1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。 配列に対してまとめてクラスの追加や削除が可能に 新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',

deeplearn.js is an open-source library that brings performant machine learning building blocks to the web, allowing you to train neural networks in a browser or run pre-trained models in inference mode. We provide an API that closely mirrors the TensorFlow eager API. deeplearn.js was originally developed by the Google Brain PAIR team to build powerful interactive machine learning tools for the bro

はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl

Welcome to Babylon.js 8.0 Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world. Today, web graphics and rendering hit the accelerator with the release of Babylon.js 8.0. It represents a year of new features, optimizations, and performance improvements aimed at helping you create more compelling, interactive web experiences faster than eve

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

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

Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form

npmは優れたパッケージ管理システムですが、使っていると速度が遅くてストレスを感じることがあります。その挙げ句にエラーが出たら目も当てられません。それを解決するためにyarnも作られていますが、まだ機能的に十分でないこともあります。 そこで使ってみたいのがpnpmです。高速かつディスクスペースを低減してくれるnpmです。 pnpmの使い方 標準のnpmでインストールした場合。 pnpmを使った場合。3MBくらい小さくなっています。 pnpmでは複数のモジュールを平行してビルドする方式をとっており、高速化を実現しています。依存関係をフラット化することで余計なものをインストールせず、ディスク容量をセーブしています。 pnpm/pnpm: Fast, disk space efficient npm installs

新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub

Help us understand the problem. What is going on with this article?

つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー

JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能 JavaScriptのコードを実際のアプリケーションとしてデプロイする場合には、コード内のコメントやタブ、スペース、改行などの余計な要素を削除し、変数名を短くしたりコードの冗長性を排除するといった最適化を行うことで、ロード時間を短縮しコードを高速に実行できるようになります。また、コードの中身を簡単に読めないよう、難読化を行うことも多いでしょう。 こうしたJavaScriptコードの圧縮や最適化、そして難読化を行ってくれる代表的なツールの1つが、Googleがオープンソースで公開しているClosure Compilerです。 Closure Compilerはコードの単純な圧縮や最適化だけでなく、JavaScr

意外と良いかも！ スマートフォンなどでWebサイトを見ていて、画像が後から読み込まれるためにコンテンツの高さが変わって誤ったタップをしてしまうことがあります。多くの場合バナーなどで、とてもイライラします。 そんなサイトに導入して欲しいのがScrollbearです。画像が読み込まれても読んでいるコンテンツの高さが変わらないライブラリです。 Scrollbearの使い方 左がScrollbear導入済み、右は未導入です。画像が読み込まれる度にコンテンツががくがくと動きます。 Scrollbearを導入しておけばコンテンツが動くことはありません。ただし画像の高さを予め定めておけば良いわけで、ユーザがコンテンツを作るような画像の有無が分からないようなサイトに使うのが良さそうです。 ScrollbearはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Scroll

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する

さて、とうとう皆さん待望の Node.js v6.0 がリリースされました！次のLTS候補です。LTSになるのは2016年の10月からの予定です。v6 の LTS 期間は明示化されてないですが、ルールに照らし合わせれば、LTSになってから 2年半がサポート期間なので、おそらく 2019年4月まではサポートされます。 Node v6.0.0 (Current) | Node.js Node.js v6.0 の主な変更点 ES2015 support の改善 module load性能の改善 Buffer API の new Buffer() コンストラクタの廃止 (セキュリティ上の理由から) ES2015 support の改善 やっぱりこれが一番大きな変化ですね。 node.green を見てもらえればわかるかもしれませんが、 ES2015 のサポートがこれまでは 58% だったのが 96