Web Audio APIを使えばブラウザでも簡単に音楽プログラミングができる！と思いたいのですが、どうやらAPIがあるだけでは不十分で少しばかりは音楽プログラミングの知識が必要そうです。ということで、この記事では世界で最も有名な効果音「コインの音」を題材に楽譜のパラメータ化とWeb Audio APIでの実装をできるだけ丁寧に解説します。 楽譜 楽譜を手軽に探すには「coin sheet music」などで画像検索します。コインの音は商標出願されていますので、今回はそれを参考にします。（画像は商標プラットフォームのスクリーンショットです。） この楽譜からは次の点が読み取れます。 テンポが180 最初の音が十六分音符の「シ」で次の音は「ミ」 全体の長さは四分音符が3つぶん 楽譜がまったく読めないという場合は、音階（ドレミファソラシド）と音長（四分音符とか）が読める程度に覚えれば良いと思いま

Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas

はじめに ボケるRNNを学習したい (Chainer meetup 01)がすごく面白かったので，自分もChainerで実装をしました．それと，訓練したモデルをブラウザから直接確認できるアプリを作りました． はじめに断っておくと，僕のやったことは基本的には元スライドの二番煎じで，差分と言えば学習データを増やして実験してみたこと（うまく学習されなかった）と，Webアプリを作ったこと程度です． 作ったWebアプリはこんな感じ． 今回作ったものはGitHubで公開しています．ドキュメントはそのうち書くかもしれません． "ボケ"るためのモデル Convolutional Neural Network (CNN)を使って抽出した画像の特徴を，Recurrent Neural Network(RNN)への入力にすることで画像の説明文(キャプション)生成ができる，という研究があります．有名なところでは[

はじめに 11月末に何故かアドベントカレンダーの一日目が空いていたので急遽この記事を作成することになりました。急いで書いたので不備などありましたらすみません。 新しい職場に転職後、業務としては初めてGoでWebアプリケーションを作成しました。 スクラッチで書かせてもらえたので、試行錯誤しながら一通り組むことができました。 また経験豊富な同僚からもアドバイスいただいたこともあり、 かなりGoのWebアプリの組み方について知見がたまりました。 そこで、MVCアプリケーションを組む上でどのような構成にしたらよいかについて、 特にコントローラ層を中心に自分の考えを紹介したいと思います。 MVCの設計 元々Rails等を書いていたので所謂WebのMVC（Model2）をベースに考えます。 View 書いたWebアプリケーションはAPIサーバだったので、実はあまりここについて出せる知見はありません。

画像: N高等学校課外授業(N予備校)での生放送授業のブラウザ上での見た目、コメントが書ける 目次 はじめに 教えることになったきっかけ Web企業にエンジニアとして就職できるようになる、というミッション 既存のWeb教材に感じた問題意識 「各自進められるゲームブック形式の教材」と「徹底的にフォローする生放送授業」 コンセプトをもとに構成されたコースと内容 ゼロからプログラミングができるようになった人が生まれた日 永劫、プログラミングは一部の天才たちのためのものか？ プログラミング学習のモチベーションの課題と対応 まじめなオタクたちが社会をよくしようと頑張ること さいごに はじめに 自分はこの8ヶ月間、Web上で非対面のプログラミング教育、具体的にはHTML教材と生放送授業を中心としたプログラミング教育をN高等学校の生徒に行ってきました。 ここに書かれている内容は、これからプログラミング教

ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう！ JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu

プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト

TOPIC Redmineを3年間使い続けてお世話になったプラグインたち（全部、無償版） ＜書かないこと＞ Redmineの操作説明（インストール、操作方法など） プラグインの操作説明（インストール、操作方法など） ＜補足＞ 利用当時（2016年夏頃まで）の状況によるものとなりますので、最新の情報については要再確認となります。（当時はなかったものが今はあるかもしれないし、逆も然り） ※ 私が使っていたRedmineは、【Bitnami Redmine 3.1.1-1】となります。 （これまでのRedmine：2.3 → 2.6 → 3.1） ※以下、1つずつピックアップしていきます。 clipboard_image_paste（Attach image from clipboard） https://github.com/peclik/clipboard_image_paste 使用頻度：

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

はじめに エンジニアたるもの、よそで使われている技術は気になると思います。今回は、そんな時に役立つChrome Extensionの「Wappalyzer」をご紹介します。 概要 Wappalyzerは、ブラウザに現在閲覧しているWebサイト内で使われているテクノロジーを覗き見する機能を追加できる拡張スクリプトです。 Chrome Extensionとして配布されているほか、FirefoxのAdd-onとしても配布されているので、どちらでもお好みのブラウザで利用が可能です。 Chromeのかたはこちらのリンクより、Firefoxのかたはこちらのリンクよりダウンロードが可能です。 使ってみる 導入方法をご紹介しましたので、早速実際に使ってみましょう。 今回はWappalyzerを導入したGoogle Chromeにて、Qiitaの執筆画面を見てみます。 まずはじめに、対象とするページを開いた

Webアプリケーションのお話です。 イベントハンドラを登録する addEventListener メソッドの引数は以下の形で覚えている人が大半だと思う。 element.addEventListener('click', myClickHandler, useCapture); 参考記事 EventListenerOptions これまでの第3引数 useCapture は boolean 型をとり、イベントハンドラがキャプチャフェーズ or バブリングフェーズのどちらで処理されるかを制御するものだった。 この第3引数が Object 型も受け付けるようになり、現状、それぞれ boolean 型で once , passive , capture パラメータをとる。 once true でイベントハンドラが1度だけ処理される。 例えば Window の load イベントハンドラは通常1度

まずは上記の検索結果を見てくれ。これは ファイル名がversion.h 内容に"#define RUBY_VERSION" という検索クエリで、もちろん、そのようなコードはプログラミング言語Rubyの本体に由来することはいうまでもないわけだが、自分からは7,918件の検索結果が見える。これにはforkやリビジョン違いを含んでいない。 なぜこんなに多いのか? これは、Rubyがコピペを助長するような製品だからか? どうもそうでもないらしい。たとえば同様のことをCPythonでやると https://github.com/search?q=%22%23define+PY_VERSION+%22+filename%3Apatchlevel.h&type=Code 自分からは6,079件ヒットしているように見えるし、同様のことをPerlでやると https://github.com/search?

（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。

2022年7月2日追記 コメントをいただいて気づいたのですが、過去の「よくある質問集」にあった ホームページでの公開は、成果の発表にあたりますので、届出が必要です。 などの記述が消えて、 気象観測データをインターネット上のホームページ等で掲載する場合には、その観測データの特徴を踏まえた適切な利用につながるよう、観測データの特徴（例えば、観測の目的や観測場所等）を明示するよう努めていただきますようお願いします。 との記述が追加されていることを確認しました。 現実的な運用になり、嬉しく思います。 2022年7月3日追記 気象観測施設の届出と気象測器の検定 のページ内にある 解説資料「気象の観測を行う場合に」 ［PDF形式:218KB］ の6-7ページ（PDF上では7-8ページ）に、観測データの特徴の具体的な記載例が書かれています。 平成30年(西暦2018年)3月の文章です。 気づいてあげられ

運用の問い合わせチケットを10分の1に削減した話 の続きです。 気がつけば100ストックを超えていて、はてブコメントもたくさんついてありがとうございます。 前回の記事は、運用の起票ルールによった話をしてしまったので、開発チームで取り組んだ問い合わせ削減の話をします。 コメントに書いてもらっているとおり、チケットの数が減ることよりも本当に今やらなければいけないことに集中することが大事です。 減ったことはいいことなの？質で評価した方がよいのでは？ http://b.hatena.ne.jp/entry/305264434/comment/chess-news 優先順位を話し合い決定する 問い合わせが、毎日上がってくる中で全ての問い合わせに対応し通常業務を遂行することは、不可能です。 取捨選択しなければなりません。 実際に、割り込みが原因でリリースが伸びてしまったこともあります。 もっと俯瞰して

技術系の文章を書く際、「ここを気をつけているだけである程度読みやすい文章となる」といったポイントをいくつかご紹介したいと思います。 はじめてQiitaに投稿する人や、そうではないにしても、文章の品質を気にされるかたの助けになればと思います。 文章外のコンテンツ編 サンプルコードはできるだけ豊富に用意しましょう。 Qiita記事は、いわばドキュメントなので、文章が重要であることは当然です。 しかし、わかりやすさで言えば、エンジニアではコマンドやソースコードのほうがわかりやすい場合も多々あります。 不要であればどちらかを読み飛ばすことも可能な上、片方ではしっくりこない人は情報を補完しやすいので、できるだけサンプルコードは豊富に用意しましょう。 サンプルコードが肥大化してきた場合、GitHubにおいてやるのも一つの手かもしれません。 日付は正しく記しておきましょう。 コメントより。 Qiitaの

はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。 これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記）厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。 なぜ4msなのか 実はこの4msと

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

DevFest Tokyo! AndroidやGoogle関連の技術者のお祭り「DevFest Tokyo 2016」のセッションおよび公開されている資料の一覧です。 資料が公開されていない or 見つけられなかったものはタイトルのみ記載しています。見落としているものがありましたらコメント等でお知らせください。 概要 日時：2016年10月9日 13:00〜18:00 場所：東京電機大学 千住キャンパス 1号館 主催：GDG Tokyo, Shibuya.apk, DroidKaigi, 日本Androidの会, html5j, GTUG Girls, GCPUG, TensorFlow コミュニティ 協力：Abema TV, Google DevFest Tokyo 2016 - connpass Google Developers Japan: DevFest 2016 が日本各地で開

最近はドメインも安く取得できるようになりましたので、需要はあまり多くはないかも知れませんが、「無料」で気軽に取得できるという点で、コストコンシャスな方々に一定の需要があると信じて投稿します。 症状と効能 オリジナルドメインで手軽にブログを始めたい（タダで） ネームサーバのテスト用のドメインを一時的に取得したい（タダで） フリーランスの名刺にオリジナルドメインのＵＲＬとメアドを刷り込みたい せっかくAWSが無料試用期間なのにドメイン取得費用を払うのはイヤ とにかくドメイン取得に一銭も払いたくない、という方向けに寄稿します。 無料で取得できるドメイン Freenomからは5種類のドメイン(.tk/.ml/.ga/.cf/.gq)が無料で取得できます。どれを使うかはお好みで。今回は.tkで取得を進めます。 .tkドメインの注意事項 90日間で25アクセス以下の場合は、登録が削除されます。3ヶ月の