Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 作ったもの 成果物は Alcatraz を便利に検索する Alcatraz Search という web アプリを開発しました を参照ください。 ソースコードは starhoshi/AlcatrazSearch にあり、 GitHub Pages で公開 されています。 今回作るためにした勉強や開発の感想、 React と Angular の比較などをつらつら書いていきます。 多少なりともフロントの心得がある人向けで、あまり説明的ではない内容です。 フロントエンド開発経験 2015年7月くらいから業務で Angular, TypeScr
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
昨日やった↓ですが ショートカットキーでmacに単語を発音させる - うんたらかんたら日記 clipboardへの転送がうまくいかず、使い物になりませんでした。 あと、キーボードショートカットより、マウス操作で完結する方が楽だと思ったので、 違うやり方を調べてみました。 どうやらautomatorで実現できるらしいと分かったので、早速実行。 automatorとは applescriptやらプログラミングやら不要で GUIで各種操作を自動化できる、デフォルトで入っているアプリです。 snow leopardからコンテキストメニューへの追加ができなくなっていますが どうやら、automatorのサービスが代替機能なようです。 今回初めて使ってみましたが、簡単でいいです。 表示順も変更できれば、嬉しいなぁ。 一応、shortcuts、OMCを使えば、コンテキストメニューへの追加は可能ですが、
Recently I was having a little bit of fun and decided to go about writing a pure JavaScript HTML parser. Some might remember my one project, env.js, which ported the native browser JavaScript features to the server-side (powered by Rhino). One thing that was lacking from that project was an HTML parser (it parsed strict XML only). I’ve been toying with the ability to port env.js to other platforms
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画 ＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。 本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争
Mac OS Xの自働化用の言語としてAppleScriptがありますが、Mac OS X10.10(Yosemite)から「OS標準で」JavaScriptでも制御ができるようになりました。 これを、JavaScript for Automation (以後 JXA)と言います。 詳細はJavaScript for Automation Release Notesを見てもらうとして、ここでは、ごく基本的な情報をまとめます。 とりあえずJavaScript動かしてみる JXAの記述には"アプリケーション/ユーティリティ"フォルダのスクリプトエディタを使う。 スクリプトエディタ スクリプトエディタの[環境設定]-[一般]で、[デフォルトの言語]をJavaScript(1.0)に。 Mathクラス(注1)を使ってみる。上記のように書いて、メニューの[スクリプト]-[実行]か、[▶]︎ボタンをク
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
/* --- RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. IE 6+ .......... compatible ✔ Firefox 2+ ..... compatible ✔ Safari 3.2+ .... compatible ✔ Chrome 3+ ...... compatible ✔ Opera 10+ ...... co
Objective-C や Swift のネイティブコードから JavaScript をランタイムで実行するための JavaScriptCore.framework のお話です。基本的な機能の説明と、注意点を整理して紹介しています。Read less
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。 単純に<video>タグや<audio>タグの使い方を知りたい方は、 以下のページなどをご確認ください。 <video>タグで動画を埋め込む <video> …… 動画を再生する <audio> …… 音声を再生する ■video要素、audio要素をJavaScriptから操作 HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。 これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。 <video>タグのcontrols属性を指定すると、
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
概要 簡単に使える Pure JavaScript の形態素解析器 kuromoji.js を書きました。今回は、簡単に kuromoji.js を紹介したあと、セットアップ方法を解説します。ついでにロードマップ的なものも晒してみます。みんなでブラウザ NLP しよう！ kuromoji.js とは 言わずと知れた Java の形態素解析器 Kuromoji を JavaScript に移植したものです。 kuromoji.js の GitHub リポジトリ と言っても、機械的に Java から JavaScript に置き換えたものではないため、API も違いますし、メソッド名やその内部も大幅に異なります。そもそも自分が形態素解析について勉強するために書き始めたため機械的なトランスレートに興味がなかったこと、また言語ごとに使いやすい API は異なると考えていることが理由です。 Node
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
webサイトをスクレイピングする際はmechanizeを使用しているが、ログイン処理等にjavascriptを使用してゴニョゴニョしているサイトの場合は、行き詰ってしまう事が多い。 今までその様なサイトは諦めていたが、どうにかスクレイピングする方法が無いかと調べた結果、以下の２つで実現出来る事がわかった。 ① seleniumを使用する ② Phantom JSを使用する どちらの方法も擬似的なブラウザオブジェクトを使用してjavascriptの処理を行う事が可能である。今回は操作が簡単なseleniumを使用した方法について説明する。 １.seleniumとは Webアプリケーション用テストツール。ブラウザの操作をシミュレートして、Webアプリケーションの画面周り操作を行う事が可能である。 要は、人が手でWebブラウザを操作する代わりにSeleniumがWebブラウザを操作して、作業の自
目的 Mechanize を使ってウェブアクセスを自動化する際に障壁となるのが JavaScript です。 Mechanize は JavaScript を認識してくれません。 例えば以下の処理が入っただけで Mechanize は期待通りの動きをしてくれません。 onClick イベントを使った操作 jQuery などの JavaScript ライブラリが発達し、ページを動的に生成するということが自然と行われるようになった昨今、 Mechanize は無力なのでしょうか？ そんなことはありません。ほんの一工夫で目的を達成する方法をまとめていきます。 前提 本ページが想定するのは「特定ページに対する操作の自動化」です。 不特定多数のページにアクセスする自動巡回情報収集などの自動化は含みません。 不特定ページを扱おうとした場合、JavaScript 部分に関して足掛かりとなる前提が全くなく
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationメタプログラミングJavaScript モジュール中級編Advanced JavaScript objectsA
今回はJSのTipsになります。 結構使う頻度が多いものなので備忘録がてらに残しておきます。誰かの参考になりますように。。。 カンマ付の価格を数値に変換する方法 strPrice = '12,345'; //splitで全てのカンマ(,)を取り除いて空文字で連結して前後の空白を削除しparseIntする numPrice = parseInt(strPrice.split(',').join('').trim()); 数値をカンマ付の文字列価格に変換する方法 intPrice = '12345'; strPrice = addFigure(intPrice); // カンマ区切りに変換する関数 function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.repl
３桁カンマ 挿入/削除 関数 この関数はjs-mlで紹介または作成されたものです。(Subject: [js-ml:05272] Re: 数字のカンマ表示)。 * サンプルでは、下記それぞれのフィールドへカーソルを入れたあと、カーソルが外に出たとき(onBlur時)に実行されます。 * 省略されている機能は自分で実装してご利用ください。 * Win NN4,NN6,IE5 / Mac NN4,NN6,IE4.5,IE5 で確認済み 注意: 正規表現が使われている部分はNN3以下では動作しません(split/joinは動きます)。 ECMAScriptで正規表現が規定されていることを考えれば、 これでも良いかな?とは思いますし、今後の実用上も大丈夫かなとも 思いますが...、ただ、やはり、この手のものは JavaScript1.1ベースで仕上げておきたいという気もします。 参考:三桁カンマ挿
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く