JavaScript

【JS体操】第3問「Zalgo Text の生成」〜いろんな回答紹介編〜

『JS体操』第3問「Zalgo Text の生成」の解説記事第1弾。挑戦してくださったみなさまの回答や社内QAチームが事前に検証・想定していた回答を一挙にご紹介します。

【JS体操】第3問「Zalgo Text の生成」延長戦のお知らせ

『JS体操』第3問の延長戦を急遽開催します。再帰を使った114文字の回答をさらに短くしてみましょう。

【JS体操第3問ヒント④】「コードポイント」を「文字列」に変換する22の方法

JavaScript で「Unicode のコードポイント」を「文字列」に変換する22の方法を、実用性のあるものからほぼネタのものまでいろいろご紹介します。

【JS体操第3問ヒント③】「疎」な配列を「密」にする12の方法

JavaScript で「疎」な配列を「密」にする12の方法をコードゴルフやワンライナの視点も交えてご紹介します。

【JS体操第3問ヒント②】「コードポイント」と「コードユニット」

Unicode の「コードポイント」と「コードユニット」の違い、さらには文字数とは?などJS体操第3問のヒントにもなるかもしれない解説記事です。

【JS体操第3問ヒント①】Zalgo Text のできるまで

世にも恐ろしい Zalgo Text の説明と、JavaScript で Zalgo Text を作る方法を実例とともにご紹介します。

JS体操第三回開催中!

カヤックで開催しているエンジニア採用企画JS体操第三問の告知になります! 今回の問題はちょっぴりこわい「Zalgo Textの生成」がテーマになっています。 ベースのコードを編集して、できるだけ短い文字数を目指してみてください♪

【JS体操】第2問「画像の横長具合を比較しよう」〜チート部門①②③の解説〜

『JS体操』第2問 チート部門の解説記事です。console.assert() や console.log() を上書きしたり、String.prototype.trim() や、Response.prototype.text() を上書きしたり、とんでもないチート技の数々を真面目に解説します。

【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法&ハック部門の解説〜

カヤックが主催するJavaScriptのコードゴルフ大会『JS体操』。第2問「画像の横長具合を比較しよう」の「正攻法66文字」「ハック部門33文字」解説をお届けします。

【JS体操】JavaScript で頭の体操をしよう!〜第1問 44文字 解説編〜

面白法人カヤックが主催するJavaScriptのコードゴルフ大会、その名も『JS体操』。その第一問の結果発表と解説をお届けします。はたして最短文字数の44文字はどんなコードなのか?どんなアプローチで導き出せるのか?さぁ、あなたもJavaScriptで頭の体操をし…

「JS体操」のすゝめ 〜その②〜

JS 脳、プログラミング脳をゆる〜く鍛えるためのエクササイズ、その名も「JS体操」。前回の記事で紹介した問題の模範解答(154文字)を23新卒の大桐が解説します!

「JS体操」のすゝめ 〜その①〜

面白法人カヤックでは日々、様々な社内勉強会が開催されています。本記事では JS 好きな社内のエンジニア向けに企画した「JS体操」についてご紹介します。みなさんもぜひ一緒に「JS体操」してみませんか?

新卒デザイナーが初めてJSでゲームを作ってみた話

この記事は Tech KAYAC Advent Calendar 2021 の25日目の記事です。WEBのこと何も知らなかった新卒デザイナー鈴木が、ゲームをつくって、その難しさと楽しさに感銘を受けた話です。エンジニアの方々、本当に尊敬します。そして、エンジニア以外の方々には、…

【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021 の21日目の記事です。 こんにちは!意匠部のおばらです。 今回は アドベントカレンダー14日目の記事 でご紹介した 「すき焼きの写真にすき焼きの3Dモデルなど任意のファイルをバイナリとして埋め込む方法」 の解…

すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021の14日目の記事です。 こんにちは!意匠部のおばらです。 今日は、知っていても役に立たないかもしれない、 WEBページでの画像の変な使い方をご紹介しようと思います。 題して「すき焼きの写真にすき焼きの3Dモデ…

具体例から学ぶ!作り込みたいWeb制作のためのJavaScriptライブラリdat.GUIのススメ

(こちらの記事はクライアントさんであるJTさんの許可を得て事例を掲載しました。この場を借りてお礼を申し上げます。ありがとうございます!) どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 Tech KAYAC Advent Calendar 2019…

Web上でBlenderでつけたアニメーションの複数切り替え

この記事はTech KAYAC Advent Calendar 2019の14日目の記事です。 こんにちは!クライアント事業部技術部の@yumikokhです。 新卒4年目、今年からWebフロント→サーバーサイド所属になりましてお仕事で演出ごりごりすることはなくなったのですが、 趣味でWebGL…

Firebase Realtime DatabaseとFirestoreを使い分けていこうなという話

こんにちは、今年もあっというまでしたね〜@fnobiです。この記事はTech KAYAC Advent Calendarの12日目になります。 毎年アドベントカレンダーでは、その時お世話になった技術の話をしているんですが、今回は去年に引き続きfirebaseで行かせていただきます。…

B-スプライン曲線がサッパリわからない

画面写真をクリックするとサンプルアプリに飛びます。 今回はサンプルがhtml5ですので、それがそのままソースコードですが、 一応githubにも置いてあります。 内部に「ここからここまでライブラリ」的なコメントがあるので 、その部分だけ持っていけばライブ…

LINE Thingsでお年玉を楽しくする

この記事は、Tech KAYAC Advent Calendar 2018 の23日目の記事になります。 こんにちは!面白法人カヤックのIoT芸人こと入江(@shinnoske0714)です。 業務ではHTMLファイ部というチームでフロントエンドエンジニアをやっています。 技術の無駄遣いをモットー…

regl入門

こんにちは、カヤック・クライアントワークチーム・フロントエンドエンジニアのMr.ブラウンです。 今回は、 「Fast functional WebGL」 と謳っているreglを紹介いたします。 ※ 多少、WebGL・GLSLをさわったことがある前提で話が進んでいきます。 はじめに re…

フロントエンド開発に Babel も Webpack も必要ない ※

できらぁ! 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはな…

中〜大規模なSPAを開発する時に抑えておきたい10のポイント

こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。…

【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる

この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは!カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレン…

すごい勢いでモックを作るノウハウを共有しよう【Webゲーム開発】

この記事で伝えたいこと Web上でゲーム作る際に、モックづくりで役立つ設定や注意点とかとかとか つくったもの デモ:https://hkitahara.github.io/pages/techblog171218/index.html 作業時間:8.5h コメント:100点目指して頑張ってください. (デザインは…

Vueの単一ファイルコンポーネント+TypeScript+Hot Module Replacementの環境を作ってみた話

こんにちは!ファイ部の ひめの です。 この記事はTech KAYAC Advent Calendar 2017の15日目の記事です。 さてさて、今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。 (2017/10/14) こ…

細かすぎるけど伝わって欲しいlodash.jsの話

ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsと…

動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう

こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出…

【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。(コピペで動くサンプルコード付き)

お詫びと訂正:(2017/06/08 23:32) 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内…

svg / canvas出力ができるbodymovinの紹介

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で1番プログラムできないおじさんの町田(@machida-yousuke)と申します。 今回は、「映像業界?フロントエンド業界?が注目しているオープンソースライブラリ bodymovin…