はじめに ブラウザの自動操作といえばSeleniumとか、UWSCとかが有名です。 ですがSeleniumは環境構築がだるかったり、既存起動ブラウザにアタッチできなかったり、面倒ごとが多いです。 UWSCは操作がアナログすぎてしんどいです。 結局は、javascriptを直接実行するのが環境構築なしでできて動かすのも気軽で一番楽だったりします。 やる目的 最近、JCBプレモカードを買うと10%得するキャンペーンがあったので、JCBプレモカードを買いました。 それにともない、アマゾンギフト券注文して、カード番号を入力する作業をやらなきゃいけません。 今回はそれを自動化します。 キャンペーン詳細: JCBプレモカードのキャッシュバックキャンペーンで19.1%還元！Amazonギフト券がオススメ 自動化すること アマゾンギフト券を自動で購入する Gmailに届いたメールの支払いページURLを抽出

MithrilでウェブのUIを作る時に、標準のHTMLフォームの要素を使う時の備忘録 <select> サンプル <select> タグが選択されたときのイベントは selectedIndex に対して onchange イベントを追跡するようにすればOKです。m.propで作ったプロパティを指定すれば選択された要素のインデックスが格納されます。もちろん、イベントハンドラの関数を作って、好きな処理を行わせることができます。 <option> タグの方は選択された要素を selected: true にしておく必要があります。画面更新時に毎回先頭の要素が表示されてしまいます。 こんな感じの仮想DOMが最終的にできるようにします。 m('select', {onchange: イベントハンドラ}, [ m('option', '選択肢1'), m('option', '選択肢2'), m('o

Sequelizeとは SequelizeはMYSQL,MariaDB,SQLite,Postgresに簡単にアクセスするためのNode.jsのライブラリである。 以下の機能を有している。 オブジェクトとDBの関連を取り持ってくれる。これは１テーブルだけの関係ではなく、複数のテーブルの関連を定義することができる。 入力されたデータが適切かどうかのバリデーションチェックを行う。 トランザクションのサポートしている。 マイグレーションの機能をサポートしている。これにより、データベースのスキーマの更新が容易になる。 ロックの機能をサポートしている。 導入方法 SQLiteを操作する場合 その他DBについては下記を参照 https://sequelize.org/master/manual/getting-started.html 下記のDBを操作するためのサンプルが乗っている。 Postgres

2015/10/27 inputタグ、textareaタグ、selectタグ フォームの基本について解説しています。 フォームとは・・・ここで言うフォームとは、お問い合わせページなどで入力したり選択したりを行う（または行わせる）ページでそのページ内の<form>タグから</form>タグまでのことを指します。 ※実際には<form>タグから</form>タグまでが「フォーム」としての機能を持つためです。 またフォームは主にプログラム側にデータを渡すために使用されます。 フォーム側（入力側）はHTMLファイルでOKですが、渡す側（送信先）はPHPなどのプログラムになるわけです。 要するに必ずPHPなどのプログラムとセットになるということですね。 HTML単体では残念ながらフォームデータを取り扱うことができないのです。 これがフォーム関連のタグが難しいと感じる理由の1つかもしれません。 ここで

完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

どうもイマグマです。 タイトルみたいな状況、よくありますよね？ 今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」とマークダウン記法の文書の表示時の変換ライブラリ「Marked」をご紹介します。 SimpleMDEとは JavaScript製のマークダウンエディタです。 SimpleMDE is a simple, embeddable, and beautiful JS markdown editor SimpleMDE 使用感はDemoページでお試しください。 特徴 書きながら何となくスタイルが分かる シンプルでそれでいて編集中の文字のスタイリングもそこそこ美しいのです。 ツールバーが付いている ツールバーも標準で付いているので、記法を忘れたときにも優しいですね。 フルスクリーン表示とリアルタイムプレビュー 行数や単語数が標準でフッターに

Markdown Text EditorはWebベースのMarkdownエディタです。textareaをMarkdownサポートのWYSIWYGにする、というJavaScriptライブラリで、Simple Text Editor Libraryをベースにしているとの事。ライセンスはMITです。 Markdown Text EditorExample

https://github.com/maxogden/wzrd はアクセスする度に変更を吐き出すのだが、watchify は差分を管理してくれる。 reactとか無駄に巨大なんで、require('react') しただけで1.2秒ぐらい待たないといけなくなって辛かった。そういう問題を解決できる。 簡単な使い方 npm install -g watchify これだけ。-v で verboseみないと動いてるのかよくわからなかったので付けたほうがよさそう。 某アプリのビルドが3.8秒から0.3秒になって最高 自分の使い方 一旦すべてをjsにして吐き出す。 gulpで src/**/* -> lib/**/*.js lib/index.js を基準にbrowserify する gulp-watchify を使った。 arda-starter-project では毎度のビルドの遅さが問題にな

Mithril は名前を聞いたことがある程度で、特に触ってみる予定はなかったのですが、Shibu's Diary: 世界最速でMithril本をリリースした話 を見て俄然興味が湧いたので、早速、黒ムツ本 を購入して読みました。 コンパクトで大変読みやすかったです。オススメ。コードもMITライセンスで公開 されていて嬉しい。 あえてRailsで 本を読んでなんとなく理解できたところで、次は実際に触ってみるフェーズ。 今後いろいろといじっていくにあたり、サーバサイドは使い慣れているRailsでやりたい。 ということで、まずはTodoのサンプルをRails化してみました。 全コードはこちらにあります。 https://github.com/tnantoka/my-mithril やったこと Mithrilを入れる mrsweaters/mithril-rails は古かった1し、今回はMSX を

ギークハウス Advent Calendar 2016の12月２２日の記事です。 他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。 なぜVue.js？？ 普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん？？ Webpack? JSX?? Flux?? Redux?? 「落ち着け！とりあえず日本語でOK」状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ

Mithril 0.2が本日リリースされました。ちょっとURLが変わったり( http://mithril.js.org/ )、API名が一部(m.moduleがm.mount)変わっていたり、コンポーネント機能がコーディング規約レベルから、専用のサポートAPIが追加されたりしていますが、0.1系と大した差はなさそうです。 某node.js会長とはいろいろ社内で話をしたりしたのですが、各種ベンチマークでもトップクラス、平均的には最速のクライアントサイドMVCフレームワークという称号を持ちながら、国内ではまだまだ知られていないMithril。レンダリング速度は仮想DOMの代名詞となったReact.jsの5倍以上(ベンチマークによります)です。 ↓ホームページから転載 ちなみにこちらのベンチマークで計測すると、MithrilはReact.jsの10倍以上速い結果になるのですが、これはちょっと計

 どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト

業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ 業務アプリケーションの開発でWebとモバイルへの対応を進めようとするとき、大きな課題の1つとなるのが、Webやモバイルに合わせた優れたユーザーインターフェイスをどう構築するのか、でしょう。 デスクトップアプリケーションとして作り込まれてきた業務アプリケーションのユーザーインターフェイスを、Webブラウザ対応にし、しかもモバイルデバイスの小さな画面とタッチ対応へ再構築することは容易な作業ではありません。 HTML5/JavaScriptのユーザーインターフェイスコントロールである「Wijmo」（ウィジモ）は、こうした課題を解決できる機能を提供します。 Wijmoは、業務アプリケーションでよく使われるExcelライクなグリッドコントロール、オートコン

こんにちは、ほそ道です。 今回はDOMネタです。 イベントのキャプチャとバブリングについて覚書をまとめて参ります。 また今回はv8での検証であり、レガシーなIEは対象外です。 レガシーなIEはイベント設定メソッド自体が違いますのでご注意くださいませ。 目次はこちら 入れ子なDOMのイベント発生順序制御 DOMが入れ子構造になっていてそれぞれにイベント(例えばClickイベント)が設定されていた場合 「このように動いてほしい」という期待はケースバイケースであると思います。 期待通りの処理になるようカッチリ制御しちゃいましょう。 addEventListenerの第三引数「useCapture」 例えば下記の様なHTMLがあったとします。 body内にdivが入れ子になっておりそれぞれにClickイベントが登録されています。 <html> <head lang="en"> <meta char

はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

はじめに 前回Canvasアニメーションの要点という記事を投稿しました。 今回はCanvasでのイベント操作について調べたものをまとめます。 Canvasアニメーションの要点 http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1 今回のイベント範囲 ここで取り上げるイベントの種類は以下です。 （ひとまずtouchイベントは置いておきます...） click double click mouse over / out mouse down / up mouse move mouse wheel key up / down なおそれぞれのコードについては個人的にポイントと思う箇所のみを記述します。実際の動き（全てのコード）は↓ページで確認ができます http://nekoneko-wanwan.github.io/demo/ca

はじめまして。 2015年新卒の萬成（まんなり）です。数少ないフロントエンドエンジニアとして頑張ってます。 皆さんは Google Chrome のイースターエッグをご存知ですか？ 心当たりの無い方はネット回線をOFFにして Google Chrome で適当なページを開き、スペースキーを押してみてください。ティラノサウルスのゲームが始まりましたね？ これが Google Chrome のイースターエッグです。僕もネット回線が弱い場所や会議中によくプレイします。ある日、いつものようにこのゲームをプレイしていた時、「自動でプレイしたら面白いんじゃね？」と思い、そんなブックマークレットを作ることにしました。 本稿では、Google Chrome のイースターエッグ（以下、T-Rex Runner）を改造する方法と、自動プレイのブックマークレットについて説明します。ちなみにブックマークレットを実

前回の記事の続き。前回は、正規表現が使えない時はパーサコンビネータを使ってみると良いということを書いた。 パーサコンビネータのためのライブラリは、以下のように各言語ごとにいくつかある。 JavaScript - Parsimmon Ruby - rparsec treetop Python - parsy PHP - PHPPEG 各言語でいくつかあるのだが、正規表現と違ってパーサコンビネータには統一的な書き方があるわけではないし、ライブラリによって使い方も様々である。なので、今まで正規表現だけ使ってきた開発者がちょっと使ってみようと思っても、使い方がよくわからずに面食らってしまうことがある。 パーサコンビネータはテキストをパースするための非常に強力な仕組みだが、その背後にある考え方を理解しなければこれらのパーサコンビネータのライブラリを使う際の障害になるだろう。逆に言うと、それさえ理解で