ブラウザだけでライブコーディング「Hydra」「Estuary」「P-Code」「Twigl.app」「Tone.js」 - karaage. [からあげ]
ブラウザだけでDJ・VJ気分！？ この前、DJ・VJ的な遊びをするためにコーディングをしているという記事を書きました（詳細は以下参照ください）。 ただ、自分で1から作るとなると、ある程度プログラミングの知識や環境の構築が必要なので、0から始める人はなかなか気軽に楽しむのは難しいかと思います。 そこで、今回はネット環境とブラウザさえあれば、手軽にDJ・VJ的なことができてしまうサイトをいくつか紹介したいと思います。 どのサイトも、動かすだけならプログラミングの知識は不要です。自分で好きな映像・音楽を生成する場合は、多少のプログラミングの知識があった方が良いのですが、どれもそれほど難しくないのと簡単（適当でもOK）なものもあるので、自分に合っていそうなものを楽しんでみると良いかと思います。 なお、ブラウザはすべてGoogle Chromeを使って確認しました。 Hydra 上記サイトにアクセス
![ブラウザだけでライブコーディング「Hydra」「Estuary」「P-Code」「Twigl.app」「Tone.js」 - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab930903a4b2bbc27988c4cd07f6ac05cbfb16ab/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20210503%2F20210503094132.png)
高校生がリアルタイム投票サイトを公開したらいきなり1万PVを記録した話 - Qiita
今回は高校生の私たちが公開した投票サイトが三日で１万PVを記録したので、その経緯をサイトの紹介も含め、全て公開します。 qiitaで後日談を書きましたので、よかったらお読みください リンクはこちらです サイトの内容 名前はAICEVOTE(アイスボート) リンクはこちら ----> aicevote.com(大量アクセスで現在サーバーが不安定な状況です。ご了承ください。) このサイトを一言で言うとこんな感じです。 "投票用紙を氷に見立てた次世代のリアルタイム投票サイト" AICEVOTEとは 普通の投票とAICEVOTE（アイスボート）の違い 普通の投票 普通の投票では、投票箱A/Bに最終的に投票された票の数の比で結果が決まります AICEVOTE AICEVOTEでは投票用紙の代わりに氷を投票します。 それぞれの投票箱の底は網目になっています 時間が経てばあなたが投票した氷は少しずつ溶け
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了
オープンソースのWebアプリケーション分析ツール「Cube.js」
「Cube.js」は、npmやyarnでインストールできるオープンソースのWebアプリケーション用分析ツールです。RDBだけでなく、AWS AthenaやGoogle BigQueryなどのサーバーレスクエリエンジンと連携するように設計されています。機能が非常に豊富なので、今回は初期セットアップに的を絞ってご紹介します。 ◆ オープンソースのWebアプリケーション分析ツール「Cube.js」 https://cube.dev/ 紹介 「Cube.js」は、GUIも完備した高機能なWebアプリケーション分析ツールです。 インストール $ npm install -g cubejs-cli # or $ yarn global add cubejs-cli npmまたはyarnでインストールします。 $ cubejs create <プロジェクト名> -d <データベースタイプ> （データベー
Goで作られたターミナルツール「gotop2.0」など1月のGitHub Release Radar
GitHubは、公式ブログThe GitHub Blogにおいて1月の"Release Radar"を発表した。Release Radarでは、注目のオープンソースプロジェクトなどを定期的に紹介で紹介している。 gotop 2.0は、CPUやメモリー、ディスク使用率やプロセスリストなどターミナルでグラフィカルに表示させるモニターツール。Googleが携わるGo言語で作られている。2.0では、バッテリーのモニタリングが機能として加えられている。[k]キーによるup、[j]キーによるdown、[c]、[m]、[p]によるCPU、メモリー、プロセスIDによるソート、[dd]によるプロセスkillなどキーバインドも実装されており、ターミナルベースの作業中にササッと表示させ状況を確認、不要なプロセスを切って行くといったクールな使い方が期待できる。Linux、FreeBSD、OSXで動作するが、Win
AWSの料金を「ざっくり」計算できるサイトを作る - Qiita
AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在 Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り
もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】 GitHubで直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集！読み物からソースコードまで、皆さんの開発に役立つ要素満載です！ 世界中の開発トレンドはGitHubにあり。 今回は直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集し、ジャンル別に整理しました。また、より内容を把握しやすくするため、各リポジトリの概要も記載しています。 上位にはソースコードだけでなく、開発に役立つ読み物系のリポジトリも多数。ぜひ参考にして、あなたの開発をブラッシュアップしてください。 読み物 Roadmap to becoming a web developer in 2017 Best websites a programmer should visit The Syste
日報共有アプリケーションをOSSとして開発している話
日報一覧画面最近、プライベートな時間をつかってRepostというオープンソースの日報共有アプリケーションを開発しています。 投稿した日報に対して、コメントや絵文字でリアクションすることでチームでのコミュニケーションを活性化させることを目的としています。日報版Slackのようなイメージです。 まだ開発着手から1ヶ月ということもあり、バージョン0.0.1でまともに稼働できる段階ではないですが、開発のモチベーションを高めるためにも記事を書いてみました。 技術スタック チャンネル作成画面RepostはフロントエンドにReduxを採用し、SPAとして構築しています。APIサーバとしてのバックエンドはRuby on Railsで開発しています。また、エディタ部分はDraft.jsを用いてMarkdownエディタを実装しているところです。 Draft.jsについては、過去にとあるプロダクトに採用した経験
macOS Sierraで新たに導入されたセキュリティ機能「Gatekeepr Path Randomization」について。
macOS Sierraで新たに導入されたセキュリティ機能「Gatekeepr Path Randomization」についてのまとめです。詳細は以下から。 AppleはmacOS SierraでGatekeeperの機能を強化するため、システム環境設定から署名がされていない、いわゆる野良アプリを常に実行できる「すべてのアプリケーションを許可」オプションを削除していますが、Sierraではさらに「Gatekeepr Path Randomization」という新しいセキュリティ機能が導入されています。 macOS Sierraでは開発元が未確認のアプリが利用できない状態に macOS 10.12 Sierraで未署名のアプリを起動する方法 Gatekeeper Path Randomizationとは？ Gatekeepr Path Randomization(GPR)はWWDC 2016
Firebaseを使ったサーバーレスWebアプリケーション開発 (ServerlessConfセッション紹介) - yoshidashingo
セクションナイン の 吉田真吾（@yoshidashingo）です。 第3弾はフロントエンド開発者であるきはるさんです。 プロフィール 名前：佐々木季羽る Kiharu Sasaki 会社名：freelance, Section-9 職種：Frontend Developer SIerで通信系システムの開発に携わった後、コンサルティング会社にて金融系エンタープライズシステムを担当。フリーランスとして独立後は、Webアプリケーション開発を中心に活動中。流しのフロントエンドエンジニア。Section-9メンバー。 Quick Chat ---- ServerlessConf Tokyoでのセッション概要を教えてください Firebaseは、Googleが提供しているバックエンドサービスです。 アプリケーションに必要なサーバー、DBの構築や運用が不要なのはもちろん、データに連動してREST AP
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
美雲このはオフィシャルサイト | 神様目指して修行中！みんな応援よろしくねっ！
美雲このはとは？ 座敷童子一族の末裔として生まれ、栃木の由緒正しい某神社で暮らしていたんだけど、昔からのしきたりで一人前の座敷童子になるため東京で修行を開始！ 紆余曲折あって、ConoHaの応援団長に就任することになりConoHaを使っているみんなを応援するとともに、このはも一人前の座敷童子ではなく、「神様」になるために日々頑張っているよ！ プロフィール 名前：美雲 このは （みくも このは） 年齢：年齢という概念はないが、人間でいうと13歳くらい？ 身長：150cm＋α 体重：ひみつ 長所：勉強熱心・わりと機転がきく 短所：いじわると勘違いされる振る舞いをしがち 好きなこと：アニメを見たりゲームしながらのごろごろ
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！ 河合良哉 ブラウザ上で音を扱うというと、直接音を加工できるWeb Audio API、ブラウザから直接MIDIデバイスと接続できるWeb MIDI APIの2つがここ数年の間に利用可能になり、実際のWebサイトでも使われるようになりました。 今回は「ハンズオンだともっとよかった」というお声をいただきましたHTML5 Conference 2015での講演内容を元に、2つのAPIの説明と、実際にブラウザ上に電子楽器の1つであるシンセサイザーを作ってしまうという記事です。 記事中のサンプルはGitHubに公開していますので、そちらも合わせてご参照ください。 利用するAPIの説明
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
コマンド１発で、ターミナル上の全操作を録画してブログに埋め込める「asciinema」
ターミナル上で行っている「コマンド操作」のすべてを、簡単なコマンドを入力するだけでバックグラウンドで録画してくれる「asciinema」を紹介！ ターミナルだけで完結できる点や、動作が非常に軽快なのが魅力的だったのでサクッと概要を解説しておきます。 使い方！まず、以下のコマンドから本体のソースをインストールします。 $ curl -sL https://asciinema.org/install | sh あとは、録画コマンドを入力すれば、すぐに記録が始まります。 $ asciinema rec ~ Asciicast recording started. ~ Hit Ctrl-D or type "exit" to finish. 作業が終わったら、録画終了コマンドを入力すればOK！ $ exit ~ Asciicast recording finished. ~ Press <Ente
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
