teratailでMonaca/Onsen UIタグのトップランカーを表彰してきました

こんにちは!広報の吉田(@kiyoshi502)です。

teratailは2016年10月29日よりHTML5ハイブリッドアプリ開発プラットフォームであるMonacaおよびOnsen UIの公式サポートフォーラムに認定されました。

f:id:kiyoshi502:20170120155344j:plain
昨年11月14日に開催されたHTML5モバイルアプリdayにてteratailとMonacaの記念すべきコラボ!

現在までにMonacaタグでは180件以上、Onsen UIタグでは70件以上の質問が投稿され、多くの問題がteratailユーザーによって解決されています。

f:id:kiyoshi502:20170120144807p:plain

今回はそんなMonacaタグとOnsen UIタグで問題解決に貢献されたteratailユーザーを
2016 Monaca TopUser on teratail
2016 Onsen UI TopUser on teratail

として表彰。MonacaとOnsen UIの開発会社であるアシアルの取締役 塚田さんと共にプレゼントをお届けしてきました。

続きを読む

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

続きを読む

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制作者が押さえておきたい変更点を、いくつかピックアップして紹介してみようと思います。

続きを読む