teratailの質問ページをリニューアルしました

こんにちは!teratail開発チーム デザイナーの木村です。

1/16にteratailのPC版質問ページをリニューアルしました!
以前からPC版質問ページにはコンテンツを読み進めたり、質問者と回答者がコミュニケーションをとったりする中で、細かい修正だけでは改善しづらいいくつかの問題がありました。それらを改善する基盤として全体的なデザインの変更と一部機能の追記・変更を行っています。
今回は以下の6点のリニューアルポイントを説明させていただきます。

続きを読む

GCPロードバランサとApacheの設定により、teratailが重くなっていました

こんにちは! teratailエンジニアの鈴木です。

実は11月の終わり頃(11/25)から数週間に渡り、teratailが非常に重く、時にはサーバーからエラーが返ってしまう状況がありました。

本件に関して、ユーザーの皆様に多大なご迷惑をおかけすることになり、大変申し訳ございませんでした。

今回は、不具合に関してのお詫びと共に、本件への対応として行った、GCPロードバランサを使用する上でのApacheの設定について紹介しようと思います。

続きを読む

Vue.jsでVirtual DOMを速習する

こんにちは。teratail開発チームでインターンをしている草間(@tkow)です。

jQueryはとても便利なライブラリで簡単なアプリケーションであればjQueryだけでも作れてしまうので、Web開発ではjQueryしか使ったことがない人も多いと思います。

しかし規模が大きくになるにつれて複雑になったロジックをjQueryのみで管理するのは大変です。また、selectorの一貫性を保つのが困難で、再利用が難しいコードが多くなります

そして生まれたのが、ブラウザのHTMLの表示部分と変更されるデータを結びつけておき、データの変更が生じるとそのデータが仕様されているHTMLの表示もすべて更新されるデータバインディングという概念と、その位置を特殊なタグによって管理することで埋め込まれたタグを再描画する位置と構造を記録するVirtual DOMという概念です。
近年では、React.jsが有名ですね。

今回は、軽量かつ学習コストが比較的小さいVirtual DOMライブラリVue.jsの使い方を自作のCheatSheetを用いて紹介します。

f:id:tkow:20161206141108p:plain

React.jsはjsxと呼ばれる、独自のテンプレート記法を用いて、Virtual DOMを実現していますが、Vue.jsは独自の記法を最低限に止め、カスタムタグ内の記述のほとんどが、既存のJavaScriptやHTMLの標準的な記法に沿っています。かつ、外部依存性のないライブラリなので、他のライブラリよりも比較的導入が簡単で、学習コストも少なめと大変便利なライブラリです。

また、Virtual DOMを使ったライブラリやフレームワークはほとんどが根本的な概念で共通しているので、Vue.jsを理解すればAngularやReact.jsなど、Virtual DOMを利用している他のフレームワークやライブラリを学ぶ時にも知識が活かせます

それでは、実際に基本的なVueの基本を説明していきます。

続きを読む

WebAudioとWebGL(Three.js)で、音声ファイルを3D表現

こんにちわ。 teratailチームDevRel担当の木下(@afroscript)です。

WebAudio Web MIDI API Advent Calendar 2016の5日目です。

2016年11月に開催されたWebAudio API 初心者向けハンズオンで教えてもらった内容をもとに、「音声ファイルを3Dで表現する」というのに挑戦してみました。

(僕は職業的にはエンジニアではない(仕事上はほぼコードを書かない)ので、コードの汚さや効率の悪さもろもろは大目に見ていただけるとうれしいです)

今回やること

ベースは先ほど話に出たハンズオンの際に用いた下記資料の7番目のレッスンです。 WebAudio APIのAnalyserというNodeを使って、読み込んだ音声ファイルデータを取得し、音声を可視化するというものです。

資料↓

webmusicdevelopers.appspot.com

※上記ページの下のほうに「start」ボタンがあるので、それを押して一旦音声の可視化(平面)を確認してみてください。

なお、Three.jsのrevisionはr81を使ってます。 (Three.jsはrevisionによって動いたり動かなかったりが激しいのでご注意を)

続きを読む

HTML 5.1勧告! これだけは押さえておきたい変更点

f:id:moo-lev:20161026123631p:plain

日本のみなさん、こんにちは!

teratailエンジニアの鈴木です!

本日(日本時間)W3Cのブログで正式に発表があり[1]、HTML 5.1が 勧告 (REC)となりました! よっ!

今回は、このHTML5初のマイナーバージョンアップデートについて、Web制作者が押さえておきたい変更点を、いくつかピックアップして紹介してみようと思います。

続きを読む

teratailはGoogle Cloud Platformに引っ越しました!

f:id:yumotohashi:20161031150056j:plain 俺達は

GCPへの移行を

強いられてるんだ!!!!
用意された画像に合わせただけで内容には関係ありません

TL;DR

10/26のメンテナンスでteratailをGoogle Cloud Platformに移行しました。TokyoリージョンのStackdriverまだですか。

初めに

こんにちは、teratail開発チーム本橋です。
teratailは10月26日にVPSサービスからGoogle Cloud Platformへ移行しました!

続きを読む