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
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
(著者:サイボウズ kintone開発チーム 天野 祐介) kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring JSDoc with a configuration file How to configure JSDoc using a configuration file. Configuring JSDoc's default template How to configure the output fr
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介JavaScriptNode.jsBackbone.jsExpress.jsRendr はじめてQiitaで記事を書いています。先日「Node.js + Express.js + Backbone.js」でサーバとクライアントの両方のシステムを構築する"Rendr"というウェブフレームワークを試しました。Rendrは、アメリカで人気のサービス"AirBnb"のチームが開発し、オープンソースとして公開したものです。クライアント側での採用事例は増えているBackbone.jsですが、サーバでの利用は珍しいのでは無いでしょうか。Rendr自体もまだ日本語での紹介例が無い事もあり、システムを紹介しつつ、使用感やメリット、そしてデメリットをメモしておこうと思います。 ※2回目を書
Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. It is being developed as part of OpenBrain’s BayesHive project. Instead of writing JavaScript plotting code yourself, you use custom HTML elements to represent plots. For instance, the HTML code on the left produces the plot on the right: <plot height=200 aspect=2 stroke-width=2 x="[[seq(0,4*PI,101)]]"
レーダーチャートを表示したいんだけど、 これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。 最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリを使うことにした。 チャートライブラリでは有名どころの『Chart.js』がレーダーチャートに対応していたので、 こいつを試してみよう。 Chart.js | HTML5 Charts for your website. レーダーチャートを描画するサンプルを描いてみた。 パイチャートや棒チャートなどにも対応してるけど、今回は使う予定ないんで省略。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ChartSample</tit
i18next is an internationalization-framework written in and for JavaScript. But it's much more than that! i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
JavaScriptのthisの覚え方 や JavaScriptの「this」は「4つ」だけ!の授業でやったから、this はみんなばっちりだよな。じゃあ今から抜き打ちテストするぞー。まだ読んでないひとは先に上の記事を読んどくといいと思うけど、腕に自信のある人はすぐに回答を始めても構わないぞ。赤点とった奴は、今日の放課後補習だからなー。 【注意】 問題 18 ~20 について、カンマ演算子 を知らないから解けなかった、という人が結構いるみたいです。本問はカンマ演算子の知識を問うものではなく、あくまで this の振る舞いについての理解を試すものなので、本来の題意を損なわないように当該の問題は改題しました。改題後も正答とその根拠は変わりません。 得点 評価
開発部 川野です。今週木曜日(7/25)、キャノン IT ソリューションズ様主催の Sencha セミナーでお話させて頂くことになり、デモンストレーション用に表題のアプリを作成しました。Node.js と Sencha Touch を組み合わせてアプリを作りたい方の参考になる気がしたので、ソースコードを公開します。 Photo Sharing App(ソースコード): https://github.com/kawanoshinobu/photo-sharing-app Photo Sharing App(デモ): http://photo-sharing.herokuapp.com Sencha セミナーでは、このアプリの作成方法を解説します。開催時間が平日昼間なのですが、もしご都合のつく方は、ぜひぜひお越し下さい!参加費は無料です ^^ お申し込みは以下のサイトから ↓ Senchaセミ
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは! 先週に引き続きまして、スマホ版Ameba担当の川口です。 前回予告した通り、後編ではPhantomJSを使ったさらに実践的なテスト手法を解説していきます。 PhantomJSを使ったスマホサイトテストの自動化(前編) 内容に関しては、前回お伝えしたとおり ・認証を前提としたページのテスト方法 ・Sinon.JSを利用したAjaxのレスポンスの改変 という構成になっています。 認証を前提としたページのテスト方法みなさんは認証が必要なサイトのテストをブラウザで行う場合、いつもどのようにテストされているでしょうか? ・アカウントとパス
Update: A lot of readers have commented or tweeted that I shouldn’t be unit testing private functions in the first place. Admittedly, this article is a little light on the why and mainly focuses on the how. To explain some of my rationale, I wrote a follow-up article: Why I Test Private Functions In JavaScript JavaScript’s closures provide an excellent way to make variables and functions private,
Spectacular is a BDD framework for CoffeeScript and JavaScript whose attempt to bring the power of RSpec to JavaScript. Spectacular tries to favor the best practices used for writing better RSpec tests in its design. These are the kind of tests you can write with Spectacular: describe Array, -> given 'item', -> foo: 'bar' it -> should exist itsInstance 'length', -> should equal 0 describe '::index
Yeti はYahoo.comがメインで開発してるNode製のTest Runner的なCLIです。 Yeti自体はテストの構文とかは持っていなくて、Test Frameworksに書かれているようにQUnitやJasmine、MochaやYUI Testなどで書かれたテストを動かすツールになっています。 雰囲気的にはTestemに似ていて、上のTest Frameworksで書いたhtmlページを用意して、 キャプチャー用のURLを作って、そこにテストしたいブラウザをキャプチャーして、テストを書いたhtmlを指定して実行させるという感じです。 (意味的にあんまり変わらないですが、先にテスト用htmlを指定して、ブラウザにアクセスさせるという逆の手順もできます) Yeti自体は数年前からあって、Bunyipとかでもインスパイアされてたりします。 動かしてみる QUnitやJasmine、M
The cross-platform JavaScript test framework jstest is a testing framework for JavaScript that’s designed to run on any platform with minimal effort. It provides a familiar RSpec-style API for organising tests that can run on the following platforms: Web browsers: Chrome, Firefox, Internet Explorer, Opera, Safari Headless browsers: PhantomJS, SlimerJS Server-side platforms: Node.js, Narwhal, Ringo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く