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によって動いたり動かなかったりが激しいのでご注意を)

続きを読む

Myタグで質問フィードを「緩く」絞り込めるようになりました

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

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

昨日行ったアップデートで、PC版トップページ質問フィードの「Myタグによる絞り込み」に 「緩い」 絞り込みを追加しました。

続きを読む

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へ移行しました!

続きを読む

【随時更新(17.04.15Kotlin追加)】いろんな技術の入門ハンズオン資料まとめ(Angular/React/WebVR/Go/Python/Xamarin etc...)

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

1年ほど前からたくさんのコミュニティの方々とイベントを共催しています。
様々な技術のハンズオンもご一緒させて頂いたので、そこで使われた資料のうちWebで公開されているものをまとめてみました。

ぜひ新しく技術を学ぶ際、ハンズオン資料を作成する際などにご活用ください。

ちなみにteratailで開催しているイベントは、基本的にconnpassで公開しています。
イベントの一覧はこちらです。(僕が個人的に開催している勉強会も多々混じってますw)
http://connpass.com/user/afroscript10/open/

Facebookのteratailユーザーグループでもイベント開催のお知らせをしていますので、併せてご確認ください。
https://www.facebook.com/groups/teratail

では、資料一覧です。
フロントエンド、サーバーサイド、スマートフォンアプリ、ゲームエンジンの4つのカテゴリーでまとめています。

続きを読む