なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
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"><
Wysihtml editor
THIS is the typewriter for the modern web.Go on, start typing here ... 1. get scriptsbower install wysihtml or download the latest release from Github. 2. include the scripts in your HTML<!-- wysihtml core javascript with default toolbar functions --> <script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script> <!-- rules defining tags, attributes and classes that are allowed --
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
JavaScriptフレームワークについて個人的な思い - 当時を振り返りながら - albatrosary's blog
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。１年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize 回転イベントorientationchange 画面が回転したときに何かさせたいときはorientationchangeで設定できます。 ※Androidは2.2から対応しました。2.1の端末では動きません。 $(window).on(“orientationchange”,function(){ alert("画面が回転しました"); // ここに実行したい処理を書く }); 回転したときだけ実行する場合は、これでいけますが ページ読み込み直後にも処理を実行したい場合だったら、 resizeもセットで設定します。 $(window).on(“orientationchange resize”,function(){ alert("この端末の横幅は"+wind
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
Farbtastic Color Picker — Acko.net
jQuery Plug-in Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected. Download Farbtastic 1.2 - January 8, 2007 (License: GPL). Demo Farbtastic uses layered transparent PNGs to render a saturation/luminance gradien
jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery AUTOCOMPLETE</title> <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" /> <script type="text/ja
iPhone対応Webサイト構築入門（前編）：SourceForge.JP Magazine
iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari（以下、PC版Safari）のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac
Flip! A jQuery plugin
Flip is a jQuery plugin to apply flip animation to any element.0.4.1 Fixed some regression in Chrome and Safari 0.4 Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds! 0.3 Added the content setting: now you can define the next content of your Flip!box. 0.2 Fixed jQuery chainability and buggy innerText rendering (Thanks xNephilimx for your tips!) 0.1 Kick off
FancyZoom meet jQuery // Ordered List // We Make The Web Beautifully Simple
A few days ago John posted a rewritten version of Cabel Sasser’s FancyZoom to work with Prototype and Scriptaculous. I took it upon myself to port it to jQuery, while making a few usability improvements. FIrst off, you can visit the demo to see the effect in action. It’s nearly identical in behavior to John’s original in Prototype. But the fancyZoom effect is added in a much more jQuery-like way.
JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料
HTML とは HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。 例えば、以下のようなものが HTML です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文<a href="hoge.html">ハイパーリンク</a>本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </p> </body> </html> サンプル イメージ湧きましたか？ では、何故 HTML という
Ruby・Python・JavaScript・PHPについてどう思いますか？：Tim Brayに聞いてみた - builder by ZDNet Japan
サステナビリティの今と未来 企業戦略としてのサスティナビリティ推進 世界の通信インフラを支えるコルトの取組み 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両立 ZOZOTOWNが選んだストレージ基盤を解説 MSセキュリティ担当者が紹介 マルチクラウド環境の保護を追求する Microsoft Defender for Cloud 勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ！ ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 新OSのWin11はどう進化したか ビジネス上の役割、開発の要因と Win11が目指した5つのポイントを紹介 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々:phpspot開発日誌
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々 2008年02月13日- Prototip - Tooltips for prototype While waiting for Prototype 1.6.0.1 I've put together a preview for the next release of Prototip. カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々。 まずは、最近公開されたprototip の紹介。 実現したい大体のツールチップは prototip で出来る、というぐらい多機能です。 通常のツールチップ タイトルを付けてみる ツールチップ表示位置を指定 HTMLを表示 リンクボックスを表示 その他 ツールチップのアニメーション表示 クリックでツールチップ表示
Deneme Bonusu Veren Bahis Siteleri - En iyi Bonus Veren Siteler Nelerdir?
Ücretsiz verilen bonusların free bet ve deneme bonusu adı altında sitelerde verildiği bilinmekte. Bu tür bonuslar küçük miktar olsa da, bazı oyuncular için önemli. Onlar risk almayı istemediklerinden bu bedava bonuslarla para kazanma şansı yakalıyorlar. Çoğu bahis sitesinde güncel deneme bonusları var. Fakat büyük sitelerde bu bonuslar daha büyük miktarlarda verilmekte. Deneme bonusu veren bahis s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Regexper
Flexigrid
YUI Library