タグ

javascriptに関するhotokuのブックマーク (30)

  • 環境構築なしでブラウザの自動操作を行う - Qiita

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

    環境構築なしでブラウザの自動操作を行う - Qiita
  • Mithril.js examples

  • Mithril.jsでHTMLの標準フォームを扱うイディオム - Qiita

    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

    Mithril.jsでHTMLの標準フォームを扱うイディオム - Qiita
  • Sequelizeを使用してデータベースを操作するための基本的な情報(2020.09更新) - Qiita

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

    Sequelizeを使用してデータベースを操作するための基本的な情報(2020.09更新) - Qiita
  • フォーム(input、select、textarea)の基礎知識|PHP工房

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

    フォーム(input、select、textarea)の基礎知識|PHP工房
  • JavaScript によるフォームの送信 - ウェブ開発を学ぶ | MDN

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

    JavaScript によるフォームの送信 - ウェブ開発を学ぶ | MDN
  • Webサイトにマークダウンエディタを組み込みたい。そうだ!「SimpleMDE」を使おう! | unitopi - ユニトピ -

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

    Webサイトにマークダウンエディタを組み込みたい。そうだ!「SimpleMDE」を使おう! | unitopi - ユニトピ -
  • textareaを使ったMarkdownエディタライブラリ・「Markdown Text Editor」

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

    textareaを使ったMarkdownエディタライブラリ・「Markdown Text Editor」
  • Watchifyでbrowserifyを差分ビルド - Qiita

    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 では毎度のビルドの遅さが問題にな

    Watchifyでbrowserifyを差分ビルド - Qiita
  • Mithril.jsをRailsで始める - Qiita

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

    Mithril.jsをRailsで始める - Qiita
  • React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita

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

    React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita
  • 最速MVCフレームワークMithril.jsの速度の秘密 - Qiita

    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倍以上速い結果になるのですが、これはちょっと計

    最速MVCフレームワークMithril.jsの速度の秘密 - Qiita
  • Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開! - paiza times

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

    Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開! - paiza times
  • 業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く[PR] - Publickey

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

    業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く[PR] - Publickey
  • DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita

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

    DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita
  • 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~ - Qiita

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

    旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~ - Qiita
  • Canvasイベント操作まとめ - Qiita

    はじめに 前回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

    Canvasイベント操作まとめ - Qiita
  • Google Chromeのイースターエッグを自動でプレイする | Recruit Tech Blog

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

    Google Chromeのイースターエッグを自動でプレイする | Recruit Tech Blog
  • JavaScriptでパーサコンビネータのコンセプトを理解する(「正規表現だけに頼ってはいけない」の続き) - id:anatooのブログ

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

    JavaScriptでパーサコンビネータのコンセプトを理解する(「正規表現だけに頼ってはいけない」の続き) - id:anatooのブログ
    hotoku
    hotoku 2015/04/28
    関数型プログラミング
  • JavaScript - Wikibooks

    Hello, World! 書は、JavaScriptの解説書です。JavaScriptは、ウェブページやウェブアプリケーションで広く使われているスクリプト言語であり、最も広く普及しているプログラミング言語の一つです。また、Node.jsなどのランタイム環境を使うことで、サーバーサイドでもJavaScriptを実行することができます。 書では、初めてプログラミングをする人から、他の言語で経験を積んだ人まで、広く対象としています。基的なJavaScriptの書き方を解説することで、読者がより深く理解できるように配慮しました。 JavaScriptは、初心者が学ぶのに最適なプログラミング言語であり、ブラウザだけで簡単にプログラムを作ることができます。言語のコア部分は、国際標準化団体であるEcmaインターナショナルによってECMAScriptとして標準化され、仕様が明確になっています。No