読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

JavaScript

もくもく会でFluxを学んだ with Babel + webpack

仲間内でGWもくもく会やるか!という話になったので、僕のテーマはFluxの考え方を学んで実装できるようにしようということで久しぶりにJS書きました。 やったこと 資料は Flux でぐぐると一番上に出てくる @azu_re さんのこちらのスライドを理解しながら写経…

雑兵MeetUp #1で「REVEAL.jsとMilkcocoaで双方向LTする」というLTをしてきました

Twitterのタイムライン上でイベントをみかけて、あまり見ないコンセプトの勉強会で面白いなーと思ったので盛り上げる側で参加してきました。主催の @yodatomato さん、会場を貸してくれた 21cafeさんありがとうございました。ほかの参加者の方々もお疲れさま…

GulpのタスクでBabelで書かれたJSをES5形式に変換してみた

先日、こちらの勉強会に行って初めてBabelに触りました。ここ1年Androidばっかやってたからフロント界隈の進化に置いて行かれている感が。。。NodeSchool International Day in Tokyo (2015/05/23 13:30〜)nodejs.connpass.com実際に今の開発で使うならどう…

SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 に参加してきました

以下のイベントに行ってきました。SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 http://scripty.connpass.com/event/8340/紳士かどうかはわからんですが、Yahooで使われているフロントエンドまわりの技術についての勉強会です。以下、セッション毎…

AngularJSとFirebaseでリアルタイムチャットアプリ作ってみたよ

先月、社内の有志で各々好きなテーマを決めて1日もくもく勉強するという催しを開催したのですが、僕はクライアントサイドフレームワークを触ってみようーということでAngularJSを初めて触ってみました。以下の内容は1日でふんわり勉強しながら書いた内容な…

Node.jsで超簡単にスクレイピングを実装してみる

スクレイピングとは Webスクレイピングとは、WebサイトからWebページのHTMLデータを収集して、特定のデータを抽出、整形し直すことである。 http://www.sophia-it.com/content/Webスクレイピングよそ様のサイトのHTMLから情報を取得・解析して必要なデータを…

jQueryで作ったスライドショーを背景に設定してみる

内容 ちょっとココナラの依頼で苦戦したので備忘録的に書いときます。CSS苦手。。。依頼の内容はbodyの背景画像に設定していた画像にエフェクトをかけたいという話でスライドショーいれてみますかねーという流れ。 css3で解決してもよかったのですが、ちょっ…

jQueryで自動スクロールするプラグインを作ってみた

ブログのアクセスログを眺めていたら「jquery 自動スクロール」とか「jquery スクロール 自動」とかでアクセスする人がそれなりにいるので、簡単なプラグインを作ってみました。 コード https://github.com/rei-m/autoScroller ※ソースコードはgithubから落…

「脱 jQueryプラグイン ~プロのJavaScriptコードを書くために~」感想

脱 jQueryプラグイン ~プロのJavaScriptコードを書くために~ http://www.zusaar.com/event/3547008■内容 本セミナーでは一般的に使われるユーザーインターフェースをjQueryプラグインを使わずに実装する過程をご紹介し、Web制作の現場で制作者に求められる…

Node.jsでIT勉強会まとめサイト作りました

くしくも同じ内容が書いている日のフィードに流れてくるという奇跡。。。IT勉強会まとめサイトを作りました http://blog.clock-up.jp/entry/2014/01/02/221254 ※先日遊びに行ったCo-Edoで帰り際に少し話した方のサイトかな?記事のタイトルも捻りようがなか…

Node.js + Expressでロギングしてみる

最低、月1でなんか書こうという目標をすっかり忘れていました。今回はNode.js + ExpressでWebアプリを作っているので、ログ周りの実装について書いてみます。参考にしたのはこちら。 http://www.yoheim.net/blog.php?q=20130903といっても調べようと思った…

jQueryだけでコンテンツを自動スクロール表示してみる

ココナラの案件でクチコミを自動で流れるように表示したい!という依頼があったので何となく作ってみました。必要なライブラリはjQueryだけです。※いまいち最適解がわからんです。。。修行が足りないっす。⇒追記 自動スクロールするプラグイン作ってみた。 h…

続・Titanium Mobileで個人アプリをリリースしてみた結果 + iOS7対応でやったこととか

前回の記事が結構アクセスあるので続きの数値とTitanium MobileでiOS7対応した時の話なぞ。※前回の記事はこちら。アプリの内容や開発環境などは前回の記事を参照してください。 Titanium Mobileで個人アプリをリリースしてみた結果 http://rei19.hatenablog.…

JavaScriptで配列をソートする

最近ネタがないのでJavaScriptの小ネタでも。配列を並び替えるメソッドで[sort]が用意されています。 var ARY = ['ichi','ni','san','shi','go']; ARY = ARY.sort(); console.log(ARY); このようなコードを実行すると以下のように出力されます。 > ["go", "i…

TypeScriptを試してみた 3

前回に引き続きTypeScriptの話1回目 http://rei19.hatenablog.com/entry/2013/07/14/1833112回目 http://rei19.hatenablog.com/entry/2013/07/23/023008今回は関数についてです。 関数定義の基本 変数に型を付けられるようになったことで、関数の引数と返…

TypeScriptを試してみた 2

前回に引き続きTypeScriptの話前回はこちら http://rei19.hatenablog.com/entry/2013/07/14/183311今回は変数について書きます。 使える変数の型 プリミティブな型はJavaScriptと同じものが使えるみたいです。 module TSTest{ export class TypeTest{ // 型…

TypeScriptを試してみた 1

3連休を全部だらだらするのはもったいないので、かねてから気になっていたTypeScriptを触ってみました。 TypeScriptとは! マイクロソフトが開発したJavaScript系の新言語で「JavaScriptのスーパーセット(=上位拡張仕様)」で、ECMAScriptの次期標準である…

APエンジニアはコード書いてなんぼだと思う(ひどく個人的な意見です)

と思ってます。単にコード書くのが好きなだけなのですが、上に行けば行くほどコード書かなくなる仕事とかつまらんと思うのですね。泳ぎとかと一緒で書いていないと書く感覚を忘れてしまうし、人のソースのレビューも自信持って出来ないと思います。というわ…

jQueryでプレースホルダーを実装してみる

HTML5ではplaceholder属性が登場して、いとも簡単に実装できてしまうのですが、日本はまだまだIE8以下の勢力が強いので自前で実装する機会が多いと思います。すでにいろいろな方がライブラリを作って公開しているのですが、せっかくなので自分で実装してみま…

jQueryの話 attrとpropの違い

多分、知っている人にはいまさら何言ってんのとお叱りを受けそうな話ですが、知らんかったので備忘録的にメモ。仕事で作っているサイトはjQueryのバージョン1.3.2を使っているのですが、いい加減新しいの使おうよということで、こつこつ1.9系に書き直してい…

enchant.jsをTitanium Mobileで動かしてみる その1

そろそろ2個目のアプリを作ってみるかということで、Titanium Mobileでenchant.jsを動かしてゲーム的な何かを作ってみようと思います。 enchant.jsとは! http://enchantjs.com/ja/ユビキタスエンターテインメントが開発・運営しているフレームワークで、HTM…

Titanium Mobileで個人アプリをリリースしてみた結果

2月にリリースしたアプリについてダウンロード数とか利益とか振り返ってみました。 個人で作っている・作ろうとしている人の参考になれば。 こんなん作った ◎アプリ名 新刊カレンダー(iOSのみ) 2013/2/12リリース 現在 ver 2.0.1 https://itunes.apple.com…

プロトタイプベースのjavascript設計 (2)

前回はこちらプロトタイプベースのjavascript設計 (1) http://rei19.hatenablog.com/entry/2013/05/21/005713コンストラクタを作ってnewを使うとprototypeを引き継いだオブジェクトを作るよ!というところまで書きました。今回はjavascriptにおける継承の概…

プロトタイプベースのjavascript設計 (1)

一ヶ月に最低一本なんか書こうという目標のこのはてぶ。いきなり4月すっぽかしましたけど。 さて、人に説明出来る程度には理解してないとねということで、JavaScriptでオブジェクト指向的な設計をする場合について適当につらつら。 長そうなので何回かに分…

1画面内でバージョンの異なるjQueryを共存させるには

あんまり同じような問題に直面している人は少ないとは思いますが。。。まず、普通にjQueryを2個呼んでみます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> このようにした場合、jQueryのグローバル…