Dart Drag and Drop | code.makery.ch
gremlins.js - Webアプリケーションでもモンキーテストを実現 MOONGIFT
未知なるエラーが発見できるかも知れませんよ！ モンキーテストという言葉があります。例えばテストにおいて、ユーザ登録フローをやって欲しいと言われれば誰でもユーザ名を入力したり、パスワードを入れたりします。まったく関係ないところを100回クリックして問題がないか確認するなんてことはしない訳です。 それを全く意に介せず行うのがモンキーテストです。意外なメモリーリークを探したり、普通やらないだろうといったバグを発見できる可能性があります。それをWebアプリケーションで実現するのがgremlins.jsです。 モンキーテスト中。赤い枠でクリック処理を行った場所が赤くなります。 gremlins.jsの使い方 使い方としてはスクリプトの読み込みの他に、下記のような実行内容を記述する必要があるようです。とにかく色々なことをするといった感じになっていますが、さらにキーボードの入力も行います。 gremli
[AngularJS 1]ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
前回のAngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめでAngularJSについて下調べしたわけですが、本格的に勉強するために{{ “4844336681” | amazon_product:‘AngularJSリファレンス’ }}のKindle版をぽちりました。説明も丁寧で私でも十分に読み込めそうです。 良い参考資料を手にしたところで、後はコードを書く環境です。 Middlemanやスクラッチで書いても良いのですが、もっと簡単に試すためにCodePenを使って見ることにしました。 チュートリアルを試すにはCodePenが便利 CodePenはHTML, CSS, JavaScriptのコードが書け、保存・プレビューができるサービスです。ただ保存できるだけではなくサンプルを作るためにとても便利な機能が用意されています。 HTMLの他にHaml, Mar
![[AngularJS 1]ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
十二章第五回 File API — JavaScript初級者から中級者になろう — uhyohyo.net
十二章第五回 File APIこのページの最終更新日：2017年10月31日 次に、Web近代史(?)中で重要な役割を果たすFile APIについて紹介します。 これはその名の通りJavaScriptからファイルを扱うためのものです。今回は特に、ローカルのファイル、すなわちページを開いた利用者のパソコン（など）の中のファイルを扱う方法について紹介します。 ただし、自由にファイルを見られてはセキュリティも何もあったものではないので、ユーザーが認めたファイルのみ見ることができるという安全仕様です。 具体的には、JavaScriptでどのファイルを読み込めるのかをユーザーに選択してもらう必要があります。実は、HTMLにはこういうのがありましたね。 <input type="file"> これはinput要素で、アップロードするファイルを選択できるコントロールです。実は、このコントロールによって選
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Understand front end developer
The document discusses front end development and the skills required. It begins by addressing misunderstandings about front end work, noting the complexity involved. It outlines the steps taken in front end projects, including communication, layout analysis, component identification, and integration. The document discusses reasons one may or may not want to pursue front end development, noting it
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
REST API および jQuery を使用してファイルをアップロードする
この記事のコード例では、REST インターフェイスと jQuery AJAX 要求を使用して、ローカル ファイルをドキュメント ライブラリに追加してから、アップロードしたファイルを表すリスト アイテムのプロパティを変更します。 この処理は次の大まかな手順で行われます。 FileReader API (HTML5 のサポートが必要) を使用して、ローカル ファイルを配列バッファーに変換します。 jQuery(document).ready 関数により、ブラウザーで FileReader API がサポートされているかどうかを確認します。 フォルダーのファイル コレクションに Add メソッドを使用し、ファイルを 共有ドキュメント フォルダーに追加します。 配列バッファーは POST 要求の本文で渡されます。 これらの例ではファイル コレクションに到達するために getfolderbyserv
めちゃくちゃ覚えやすいJavaScript学習サイト『JavaScript』 | 100SHIKI
いや、ドメインがね笑。 というわけでJavaScript.comはJavaScriptの学習サイトだ。 最近はやりのインタラクティブなスタイルでひとつずつ命令を覚えていくことができる。 内容はまぁ、いままでの学習サイトとさほど変わらないが、わかりやすすぎるドメインなのでいいのではなかろうか。 そろそろJSがんばろうかな、という方はチャレンジしてみてもいいですな。
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状… とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで
ロクナナワークショップ
ご依頼に応じて研修プログラムをカスタマイズ ロクナナワークショップはさまざまな研修プログラムを受託、運営しています。 予算や規模に合わせて最適な講座をご提案いたしますので、企業研修にお役立てください。 お問い合わせ・ご相談 Web業界の第一線で活躍するデザイナーやエンジニアから実践的なスキルを学べる講座、Adobe Photoshop・IllustratorやFigmaなどデザインツールを使用した実践講座、Adobe Premiere ProやAfter Effectsの使い方の基本から動画編集、動画広告の制作方法などを学べる講座、HTMLやSwiftなどプログラミングに特化した講座など、初心者向けから上級者向けまでさまざまなプログラムを、ご依頼に応じて自由にカスタマイズしていただけます。 受講人数が多い場合や「会社や学校に来て授業を開いてほしい」という方には出張開講、「知らない人と一緒に
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか？ 使いにくいところは？ などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 ふだんなかなか聞けない、AngularJSを現場で使っている人たちの本音が詰まっていたセッションの内容をダイジェストで紹介しましょう。 AngularJSのFAQ 川田氏 今日は、AngularJSを使って開発している方、AngularJSの本を執筆している方々に、Angu
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Underscore and Lodash Discuss Merging
JavaScript Promiseの本
