こんにちは！面白プロデュース事業部のおばらです。 本記事はJS体操第3問「Zalgo Text の生成」の問題のヒントにもなるかもしれないシリーズ第2弾。 第1弾は 「Zalgo Text のできるまで」でした。 今回は「コードポイント」、そして「コードポイント」と似ているけれどちょっと違う概念の「コードユニット」についてざっくりおさらいしてみます。 techblog.kayac.com hubspot.kayac.com 目次 「Unicode」とは 「コードポイント」とは 「文字」を「コードポイント」に変換する 「コードポイント」を「文字」に変換する 「コードユニット」とは 「UTF-8」「UTF-16」「UTF-32」 「コードユニット」とは 「文字」を「コードユニット」に変換する 「コードユニット」を「文字」に変換する 「コードポイント」と「コードユニット」の違い 文字数とは？ ま
こんにちは！面白プロデュース事業部のおばらです。 今回は、先日スタートしたJS体操第3問のテーマでもある「Zalgo Text（ザルゴ・テキスト）」の作り方を JavaScript のサンプルコードと併せて簡単にご紹介します。 hubspot.kayac.com 目次 Zalgo とは Zalgo Text とは Zalgo Text を作ってみる 「結合文字」 「ダイアクリティカルマーク」 「Unicode エスケープシーケンス」と「コードポイント」 「A」という文字に「ダイアクリティカルマーク」を加えてみる 「ダイアクリティカルマーク」の数を増やしてみる 「基底文字」も増やしてみる まとめ Zalgo とは まず、Zalgo ってなんでしょう？ Zalgo（ザルゴ）とは、Flash アニメータ Dave Kally によって生み出された架空の生物。インターネット上の人々を狂気に陥れ破滅
追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以
こんにちは！ファイ部の ひめの です。 この記事はTech KAYAC Advent Calendar 2017の15日目の記事です。 さてさて、今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。 (2017/10/14) このリリースを受けて、「今までTypeScriptを触ったこと無いけど、元々興味はあったので、これを機にVueを使ってTypeSriptを触ってみるか〜」と思いたち、気がつくとタイトルのようなオレオレスターターキットを作っていました。 今回はその成果物の紹介と、調べながらスターターキットを作っていった過程での気づきや所感を記そうと思います。 開発リポジトリ 以下が動作まで確認できたリポジトリです。 nyawach/vue-ts-hmr-starter できること WebpackでHot
おはようございます！こんばんは！ Tech KAYAC Advent Calendar 2017の9日目の記事をお届けします。 受託事業部でWebフロントエンドエンジニアをしております、新卒２年目のゆみこふ @yumikokh です。 はじめに 今年9月に開催されたHTML5CONFERENCE2017で、弊社のブースを出展させていただくことになり 展示作品の１つとして「フロントエンドあるあるカルタ」というものを制作しました。 そのときに使ったのがFirebase！ ほぼサーバーサイドの経験が０に等しいフロントエンドエンジニア（私）が、 簡易ではあるけどもオンライン通信ゲームを作ることができる！すごい！ということで あるあるカルタの紹介とともにFirebaseの始め方について書こうと思います。 カンファレンスブースの様子 カルタの他にFinalFlash2020やシェアガチャも展示してわい
ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的
※元ネタは「PerlでWebAppの開発に必要なN個のこと」 あるプログラミング言語で実際にWebAppを開発できるようになるまで、何が必要だろうか。言語仕様の習得は終えているとしよう。おそらく、最低限以下のような知識が必要だと思われる。とりあえずChrome Appsについて知っていることを書いた。 これはChrome Apps上でWebAppを開発するための資料なので、通常のChrome Appsを開発するために参照することはおすすめできない。 パッケージマネージャChrome Appsは基本的にChrome上で動くため、bowerを使用するのがいいだろう。 ただ、ChromeはNode.jsと同じV8環境なため、Node.jsのAPIに依存しないコードならnpm経由でインストールしたライブラリも使えるかもしれない。 Node.js形式のコードをブラウザ上で実行できるように変換するno
うわっ…私のチーム、レベル低すぎ…？ mix3です。リードエンジニアとしてどうにかしろって話ですが、コミュ 障の自分には荷が重いです… PhantomJS: 最小限なheadlessのWebKitベースのJavaScriptツール だそうです。正直良くわかりませんが、nodeのようにサーバーサイドで書けるイメージ。 $ cat hello.js console.log('Hello, world!'); phantom.exit(); $ phantomjs hello.js Hello, world! とか $ cat google_capture.js var page = require('webpage').create(); page.open('http://www.google.com', function (status) { page.render('google_cap
この話題、まだ続きます。ごめんなさい。 この記事は少し前の記事をちょこちょこ読まないとわからない感じになっています。 ざっくり要旨を語りますと、「web audio APIのpannerNodeのsetPositionは恐らく様々な角度からの音のインパルス応答を対象音の音源に畳み込み演算して出力しているが、補間を行なっていないので測定データの無い角度からの音を完全に再現はできない」ということです。 あれ？ 大体説明し終えたぞ？ま、まぁ、ちゃんと書くか。 web audio APIってのは「ノード」と呼ばれる、各機能を持ったモジュールをつないで、色んな効果や音色を持った音を出力します。 その中に、Pan(パン。「定位」つまり音源の位置を定めること)に関するpannerNodeというものがあります。 Web Audio API ざっくり読むと、音源の位置変えたり、音源の方向、音源自体が向いてい
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね！してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
2013年03月11日18:15 カテゴリTipsLightweight Languages ついに顕在化しはじめたArrayリスク JavaScript: The Definitive Guide (Kindle ed.) David Flanagan [邦訳:JavaScript 第6版] 以下のようにした理由は、実はJavaScriptのArrayが配列ではないことに起因します。 404 Blog Not Found:Algorithm - Ruby 2.0 や Haskell の遅延リストを JavaScript で これに対して、List.Lazyではmapやfilterを関数合成で実現しています。JavaScriptのArrayが、(整数個のデータ構造が順序よくならんだ古典的な意味での)配列でないことは、以下のように確認できます。 JavaScript var ary = ne
2013年02月21日16:00 カテゴリTipsLightweight Languages javascript - httpstatus.js JavaScript徹底攻略 手慰みに移植しますた。 httpstatus コマンドで、HTTP のステータスコードをすばやくしらべる! - tokuhirom's blog. 僕は初心者なので、なかなか覚えきれていないので、HTTPのステータスコードをさがすのに便利なツールを用意しました。 404が何を意味するのかこれですぐに思い出せます。 Demo DHTML Source Enjoy! Dan the Man with Too Many Status Codes to Remember P.S. 「JavaScript徹底解説」、この場を借りて献本御礼。 http://api.dan.co.jp/js/httpstatus.js 「Tip
[追記 5/29] synchronizeというかfiberには以下の問題点があるのでそちらを参照の上、このエントリをご覧ください → node-fiberでライフチェンジングとか煽ったことを若干後悔してる - taiyoh's memorandum [追記 終わり] node.jsをお使いのみなみなさま、コールバック地獄の中をいかがお過ごしでしょうか。 最近になって僕はvmモジュールとsynchronizeモジュールを使い出しまして、これがちょっと尋常じゃないくらい自分の実装方法に影響を与えております。 百聞は一見にしかずということで、実際どんな感じで使っているか、最近作ったユーティリティファイルの一部を載せます。 // util.js var vm = require('vm') , fs = require("fs") , path = require("path") , sync
「node.jsを使って簡単にWebアプリが作れる！」みたいな記事で紹介されているサンプルコードは、だいたいそのまま使いものにならないことが多い。実際のアプリ開発では、いろいろなモジュールをNPMでインストールして、ソースコードツリーの階層なんかにも気を配ったりするものだ。DBへのアクセスも一元化して、O/Rマッパーも使えるようにしたい。国際化対応も考えなければならない。デバッガも必要だ。アプリを作りながら後付していくのもいいが、最初の段階である程度は固めておきたいと思う人も多いだろう。 すべてを一気に紹介すると相当長くなりそうなので、今回はREST APIを作る上で欠かせないexpressとexpress-resourceに焦点を当てる。node.jsとNPMをまだインストールしていなかったらnvmでインストールしておこう。 node.jsでMVCアーキテクチャのアプリを作ろうと思ったら
JavaScript MVCフレームワークとしてもっとも知名度が高いBackbone.jsのコメント付きソースコードの日本語訳が公開されています。havelogの記事「Backbone.js コメント付きソースコード日本語訳」で紹介されていました。 翻訳を行ったのは、githubをベースにオープンソースソフトウェアのドキュメントを翻訳している翻訳コミュニティのenja-oss。 同グループはすでにBackbone.jsのFAQの翻訳を公開済みで、それに続いてBackbone.jsソースコードのコメントについても翻訳を終えました。 全部で1411行の軽量フレームワーク Backbone.jsはJavaScript MVCフレームワークとしてもっとも知名度が高いものですが、とても軽量なフレームワークでもあります。 今回日本語訳が公開されたソースコードを見ても、全部で1411行、60.72kb。
Our core library. Includes all standard chart types and more.
移転しました http://please-sleep.cou929.nu/20121211.html
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
なぜ「テストを書く理由」が重要なのか テストもプログラムの一部 ただし、直接は機能を追加しない しかも、メンテナンスコストは高い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く