サルでもわかるGit入門はサル先生のGit入門に改名しました。 サルでもわかるGit入門がPWAに対応しました。 iOSやAndroidのスマートフォンのホーム画面にサルでもわかるGit入門を追加することでネイティブアプリのように起動し、ブラウザよりも高速に閲覧することが可能になります。 こんにちは。 ヌーラボのマーケティング課所属のレオです。 私はヌーラボが運営するサイトやCacooの開発をサポートしたりとヌーラボ内を横断しているフロントエンドエンジニアです。 今回はレガシーな構成からNuxt.jsにリプレイスしたサルでもわかるGit入門を今更ながらPWAに対応させたので、かんたんにご紹介します。 そもそもPWAとは PWAとはProgressive Web Apps（プログレッシブウェブアプリ）の略です。 通常のWebサイト / Webアプリはブラウザ上で動作しますが、PWAはブラウザ

Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 YewはRustで書かれたフロントエンド向けのフレームワークです。 書かれたコードはWebAssemblyに変換されて、ブラウザ上で実行することができます。プロジェクトのREADMEに「ElmとReactに影響を受けた」と書かれているように、JSX風のHTMLを書けるようなマクロが用意されていて、Rustのコード内にHTMLっぽく表現でビューを書くことができます。 また、Elmアーキテクチャのように、モデルとビューがあり、メッセージによって状態の更新がされるようになっています。 というわけで、以前、このブログでsakiが書いた「Vue.js でかんばんライクなタスク管理アプリを作ってみました。」という記事を参考に、見ためがほとんど同じようなかんばんライクなタスク管理アプリ (タスクボード

Cacoo 開発チームの山岸です。ウェブにおけるアニメーション・インタラクションが好きなので今回は Web Animations API を紹介します。 Web Animations API (以下 WAAPI)とは これまでの CSS Transitions / Animations や SVG Animation を JavaScript で実現するための API です。WAAPI によりアニメーションにおける統一的なインターフェースを提供することを目的として仕様策定が進められています。 何を解決するか CSS によるアニメーションの場合、実行時の制御ができないことや複雑な CSS Animations の修正の大変さがありました。 また、CSS と JavaScript の両方を用いることも多いですが、アニメーション表現と実行のコントロールが別になることでの管理のしづらさ、reque

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを

【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた！ WebAssembly はウェブ上での利用に適した軽量でポータブルなデータフォーマットです。ゲームなどの実行速度が求められる分野で使えるように、JavaScript よりも読み込み速度や実行速度を早くすることを念頭に設計されています。それを実現するために、WebAssembly では機械語のようなバイナリコードをブラウザ上で使うようにしています。 JavaScript の生みの親であるブレンダン・アイクが 2015 年 6 月に WebAssemblyを発表してから 2 年が経ち、多くのブラウザで使えるような状況が整いつつあります。 そこで、この記事では WebAssembly のバイナリコードを使ったサンプルのコードを通して、WebAssembly を簡単に紹介したいと思い

こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if

こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ

注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ