node.jsのいろいろなモジュール27 – pithy.jsでHTMLを生成 | DevelopersIO
HTMLを生成するためのモジュール pithy.jsとは、JavascriptでHTMLを生成するための機能を持つモジュールです。 とても手軽にHTMLを生成することができます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.0 npm : 1.2.14 npmを使用してpithy.jsをインストールします。 % mkdir pithy % cd pithy % npm install pithy これでrequire('pithy')とすれば使えるはずなのですが、私の環境ではモジュールが見つからないとのエラーがでてしまいました。 モジュールの構成がおかしいのかなんなのか・・・・ とりあえず今回は、node_modules/pithy/lib/pithy.jsをカレントディレクトリにコピーして使います。 使っ
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
Apache DoS攻撃にそなえる | DevelopersIO
mod_evasiveをインストールする ApacheのDoS攻撃対策で有名なところとしてmod_evasiveやmod_dosdetectorが有名どころですね。 今回はmod_evasiveをインストール＆セットアップしてみます。 セットアップ環境はお決まりのAWS Amazon Linuxです。早速ソースをダウンロードしてきて、セットアップします。 事前にApacheモジュール(mod_so.c）が有効かを確認します。 # /usr/local/apache2/bin/apachectl -l Compiled in modules: core.c ・ ・ 多いので省略（そもそも多いのも改善の余地はありますがｗ） ・ mod_env.c mod_setenvif.c mod_version.c prefork.c http_core.c mod_alias.c mod_
Backbone.jsでつくるModel-View-PresenterなUIパターンいろいろ | DevelopersIO
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。 今日の目次 Backbone.jsの紹介 タブの実装を紹介 今日の目標 Backbone.jsで開発したことのない人の始める取っ掛かりになってもらえれば Backbone.jsつかってますか？ Backbone.jsってなんですか？ クライアントサイドJavaScriptアプリケーションの構造を支えるMVPフレームワーク シングルページアプリケーションとかで威力を発揮 Underscore.js もしくは Lo-Dash に強く依存。 json2.js、jQueryもしくはZeptoにも依存 Backbone.jsってなんですか？ Backbone.jsってなにがいいの？（特徴） クラスベースのJavaScript(プロトタイプ継承) => テスト書きやすい、コードの見通しがいい Backbo
node.jsのいろいろなモジュール6 – NodObjCでObjective-Cを呼び出す | DevelopersIO
node.jsでObjective-Cを呼び出す 今回ご紹介するモジュールは、node.jsからObjective-Cを呼び出すためのモジュール、NodObjC ※1です。 このモジュールは動的にObjective-CのフレームワークからAPIを生成するためにBridgeSupportファイルを使用します。 この仕組はJsCocoaやRubyCocoaなど、他の一般的なObjetive-CのScripting Bridge ※2とよく似ています。 Scripting BridgeはMacOSX10.5から導入されたもので Objective-Cの文法を使いアプリケーションを操作できる仕組みです。 NodObjCは内部で、Objective-Cのランタイムとやり取りするために、node-ffi ※3というモジュールを使用しています。 このモジュールはJavaScriptで動的ライブラリをロー
[Node.js]node.jsからゆっくりボイスをしゃべらせる[ネタ] | DevelopersIO
node.jsからゆっくりボイスをしゃべらせる ゆっくりボイスといえば、ニコニコとかでよく聞くあれです。 Windowsの場合、softalkを使えば再生したりファイルに保存したりできます。 Macでゆっくりボイスを使いたい場合、Yukkuroidというアプリがあります。 これはMacでゆっくりボイスをしゃべらせるためのアプリなのですが、外部からアクセスするためのAPIも公開しています。 今回はこのアプリのAPIに、以前紹介したNodObjCを使用して、 アクセスしてみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.1 Yukkuroid : v0.4.1 適当なディレクトリを作成し、そこでnpmを使用してNodObjCをインストールします。 % mkdir yukkuri % cd yukkuri
![[Node.js]node.jsからゆっくりボイスをしゃべらせる[ネタ] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f248a6dfbba2d32e53e4a5abf0a863d5315240d/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F03%2Fyukkuri.001.png)
node.jsのいろいろなモジュール22 – mochaでテストを書こう | DevelopersIO
mochaとは mocha(モカ)は、javascriptの単体テストでよく使用されているテストフレームワークです。 node.jsやブラウザから実行ですることもできます。また、非同期のテストも可能になってます。 なお、mocha自体はアサーション機能は持っていません。なので、値の検証は標準のassertとかchaiとかshouldを使用します。 TDDやBDDスタイルでテストを記述でき、テスト結果もいろいろな形式で出力できます。 今回はmochaの基本的な使用方法について紹介します。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 適当なディレクトリを作成し、そこでnpmを使用してmochaをインストールします。 mochaコマンドを使用するので、gオプションつきでインストールし
Backbone.jsでつくるMVPなUIパターン【リスト】 | DevelopersIO
今回はBackbone.jsを使ってフォームから追加し、削除できるリストを作ってみたいと思います。デザインは前回同様Twitter Bootstrapで作成しました。 htmlはこちら！ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeholder="Please type something" /> <input type="submit" class="btn" value="Add" /> </div> </form> </div> <div class="list-items"> <ul> <li class="list-item" data-cid="c1"> <a href="#" class="close">×</a
Backbone.jsでつくるMVPなUIパターン【タブ】 | DevelopersIO
今回はBackbone.jsを使ってタブUIを作ってみたいと思います。デザインはTwitter Bootstrapをつかって以下のようにしました。 世界的に名高い企業の名前が並んでいますね。 デザインはhtmlを仮組みしてBootstrapで既にできていることにします。（本題と離れてしまうので…すみません＞＜） ボタンの部分に active というクラスをつけると選択中のデザインに変わり、 内容の部分におなじく active というクラスをつけると display: block; となり表示される仕組みです。 すべてactiveな状態 すべて非activeな状態 htmlはこちらです <div id='ui-tab'> <ul class='nav nav-tabs'> <li class="active"> <a href="#apple">Apple</a> </li> <li> <a
node.jsのいろいろなモジュール19 – compoundjsで楽々CRUD | DevelopersIO
CompoundJSとは 以前はrailwayJSという名前で、この記事でも紹介したことがあります。 最近、バージョンアップして名前が「CompoundJS」となりました。 このフレームワークはexpressをベースとしたMVCフレームワークで、ruby on railsのような感じで使えます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 適当なディレクトリを作成し、そこでnpmを使用してCompoundJSをインストールします。 % mkdir comp % cd comp % npm install compound -g 1分でとりあえずの動作確認 CompundJSのインストールができたら、CRUD画面を１つ作って動作確認してみましょう。 # blogアプリの初期化 %
RequireJS＋Backbone.jsでモジュール管理されたWebアプリ開発 | DevelopersIO
Todoアプリもどきを作る 今回はRequireJSの理解を深めるため、Backbone.jsと組み合わせてTodoを追加するだけの簡素なデモを作ってみました。 Backbone.jsについても触れているため、記事が少し長いです。 お急ぎの方はページ下部にデモとサンプルコードがあるので、そちらをさくっとご確認ください。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html Backbone.js： http://backbonejs.org/ なにができるの？ Webアプリを制作する際に、RequireJSを使ってBackbone.jsで構成されるModelやViewをモジュール化することで、開発時の管理コスト削減を目指します。 なお、モジュール化するとファイル数が増えて読み込み
Backbone.jsにおけるModel-View-Presenterアーキテクチャパターン | DevelopersIO
クライアントサイドJavaScriptのフレームワークとして人気のBackbone.jsが採用している Model–View–Presenter (MVP) というアーキテクチャパターン(以下MPVパターン)について考察してみます。 Model-View-Controllerなら聞いたことあるけど？ 僕もそうでした。初めて知ったのはRuby on Railsを触った時です。 Modelはデータと手続きを担当し、ViewはUIを、Controllerは入力イベントを受付けてModelとView操作する…とまぁざっくり言うとこんな感じですよね。 MVPパターンも凄く似ていて、どうもMVCパターンから派生したものみたいです。以下が各パターンの図です。 Model-View-Controller PresenterがModelとViewを操作しているところがControllerに似ています。 決定
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
node.jsのいろいろなモジュール17 – asyncで非同期処理のフロー制御 | DevelopersIO
node.jsはnon-blocking処理を行うため、関数によってはプログラマの意図しない順番で処理が実行されることがあります。 次の例をみてください。プログラムの開始をconsole.logで出力後、ファイルを読み込んで内容を出力、 最後にプログラム終了をconsoke.logで出力しています。 //app.js var fs = require('fs'); console.log("start"); //ファイル読み込み fs.readFile("hello.txt","utf-8",function(err,data) { console.log(data); }); console.log("finish"); 上記プログラムを自分の環境で実行した結果は次のようになってます。 startとfinishが表示され、ファイル内容は最後に表示されています。環境によってはfinishよ
Node.jsアプリ開発で参考になる記事 まとめ | DevelopersIO
最近は弊社のブログにもNode.js関連の記事が増えてきました。私も勉強中なのですが、社内ブログを参考にさせてもらうことがよくあります。 毎回探すのもちょっと面倒なのでClassmethid.dev()内のNode.js関連の記事をジャンルごとにまとめてみました。 1年以上前の記事もあり、情報が古い可能性があるので注意して下さい。今後も新しい記事が追加されたら更新していこうと思います。 メール送信 node.jsのいろいろなモジュール3 - Nodemailer node.js上から簡単にメールの送信ができるモジュールの記事です。 ファイル関連 node.jsのいろいろなモジュール1 - node-gzip node.js上で簡単にgzip圧縮ができるモジュールの記事です。 node.jsのいろいろなモジュール4 - Node Basic FFmpeg ffmpegという動画と音声を変換す
技術から業務の利用シーンを考えてみる part1 | DevelopersIO
こんにちは！おおはしりきたけです。クラスメソッド開発ブログは、技術に特化して書かれていることが多いです。技術はもちろん大切です。しかし、技術はユーザーに届いてこそ価値が発揮されます。早弾きがうまいギタリストや、リフティングがうまいサッカー選手がNo1であるとは限りません。今回は弊社の技術記事が実際どのような業務の利用シーンで使えるのかを考えてみたいと思います。 Notification（Android) まずは、こちらの記事をチョイスしてみました。 記事タイトル：Android Tips #23 Android4.1 で追加された Notification のスタイルを使いこなす 投稿者：諏訪 悠紀 利用技術 この記事は、Android4.1から、Notificationに色々なカスタマイズが行えるようになったという記事です。今までのNotificationは通知メッセージのみでしたが、ス
Androidアプリ開発で例外の発生した場所を特定する | DevelopersIO
以前、「iOSアプリ開発で例外の発生した場所を特定する」というブログを書きましたが、 Androidでも同じような機能があるようです。(むしろ、Javaですが。。。) Thread クラスの setDefaultUncaughtExceptionHandler メソッドというものを使いますが、 ここでオリジナルのクラスをセットすることにより、キャッチしてない例外発生によってアプリが強制終了したときの 「問題が発生したため、xxx(アプリ名)を終了します。」という、みなさんおなじみ？ のダイアログが表示される前に、任意の処理を差し込むことができます。 今回はそれを利用して、例外発生時のスタックトレースを SharedPreferences に保存して、メール送信するサンプルを作ってみます。 開発時などは、アプリをデバッグ起動していればEclipseのLogCatで例外発生時のスタックトレース
node.jsのいろいろなモジュール16 – socket.io-clientで同時接続のテストとか | DevelopersIO
socket.io-client socket.ioはWebsocketやHTTPポーリング等、適切な接続を自動的に切り替えて双方向通信を実現してくれるライブラリです。 そしてsocket.io-clientはsocket.ioでサーバへ接続するためのクライアント用ライブラリです。 これを使用すればコンソールから複数のsocket.io接続をテストすることができます。 今回はこのsocket.io-clientを使って、コンソールからsocket.io接続を行なってみましょう。 環境構築 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 適当なディレクトリを作成し、そこでnpmを使用してsocket.ioとsocket.io-clientをインストールしましょう。 % mkdir client %
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
TypeScript – Declarationファイルを入手してJSライブラリを静的型付けする | DevelopersIO
TypeScriptのDeclarationファイルを公開しているGitHubリポジトリ 先日、REST APIのリファレンスを生成するフレームワークの記事を書いた際に、REST APIを叩くサンプルクライアントをTypeScriptで書いてみました。このサンプルではライブラリとしてjQueryとKnockoutを使ったのですが、JavaScriptで利用するときと同じように書くと、$などのキーワードが宣言されていないのでTypeScriptのコンパイルが通りません。jQueryの場合は$を、Knockoutの場合はkoをany型でアンビエント宣言してしまえばあとはいつも通りに書くだけでOKなのですが、せっかくなのでなるべく型付けして書くことにしました。 TypeScriptの場合、JavaScriptのライブラリを型付けして利用するには、Declarationファイルというインターフェー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
