JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
転職したいエントリです。プログラマとして拾ってください
どうもどうも。古都ことです。転職したい気分になってきたので書きます。 なおこの記事は、転職先が決まるか、諦めるか、反応がなかったら消します。この記事が残っている間は連絡待ってます。（2019/07/25追記 残しておきます） 希望条件 自分の知識や技術をより活かせる職場を探しています。拾ってください。 勤務先：できれば大阪周辺（豊中市から近いとかなり良い）遠いようならリモートワーク可給料：手取り25万は欲しい勤務時間：普通でもフレックスでも業務内容：可能ならばウェブ系がいいです（フロント/サーバ/バック問わず）新しい技術や新しい試みができる、挑戦的な内容開始：8月以降？備考：まだ退職してないです 連絡先 連絡は締め切りました プライベートでの実績 大雑把にはGitHub見てもらえばいいと思いますここと https://github.com/kotofurumiyaここ https://gi
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
【連載記事】JavaScriptでプログラミングを学ぶ その5：データ構造とアルゴリズム
プログラミングにおいて、値（データ）の扱いはとても重要です。今度は、値をどう管理すべきか、値をどう処理すべきかについて学んでみましょう。 連載目次 基礎と文法 関数 配列とオブジェクト オブジェクト指向 データ構造とアルゴリズム（この記事） HTMLとDOM（予定） 未定 今回学ぶ内容 プログラミングというのものは、極端なことを言うと、値の操作の集まりです。なので、値をどう上手に扱うか、という一点が重要になってきます。値の扱いが上手ければ、処理が高速に終わるかもしれません。また、少ないメモリ消費で動くかもしれません。 今回はそういった「処理効率」に焦点を当てていきます。そして高い処理効率を実現するには、データ構造とアルゴリズムの知識は必要不可欠です。 値を保持するデータ構造は様々存在します。データ構造が違うと何が違うのか、それぞれどんなメリットがあるのか、どんなデメリットがあるのか、いくつ
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
JavaScriptで弾幕STGをフルスクラッチで作る その1 ゲームエンジン編
プログラミングといえばゲーム制作ですよね（最近はそうでもない？）。かつてはウェブブラウザ上で動くゲームを作ろうとすると苦労しましたが、最近ではHTML5やES6などの発達によって、作るのもだいぶ楽になりました。ゲーム制作用のJSライブラリなども散見されるようになってきて、JSによるゲーム制作のハードルはどんどん低くなってきています。 ですがやっぱりフルスクラッチ（※自分で全部作ること）で作ってみたいですよね？フルスクラッチ、楽しいですからね。楽しさ100倍です。バグの量も100倍ですが。 というわけでJavaScirptで弾幕シューティングゲームをフルスクラッチで作ってみましょう。対象となるブラウザはChrome51以降です。 ファイルの準備 まずはHTMLファイルとJSファイルを用意しましょう。全てJSから制御するので、HTMLファイルはほぼ空で結構です。 <!DOCTYPE html>
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
