広告システム開発部の佐藤禎章です。 今回は、Firebaseサービスの一つである Cloud Messaging を使用して、ブラウザへ Push 通知を送る仕組みを揃えてみました。 試しやすく単純な仕組みに出来るので、 node を使用して全部 JavaScript で書いてあります。 node : v4.6.0 npm : 2.15.9 今回作成するものの全体は、下記 Github リポジトリに投入してあります。 これをそのまま clone して、API Key などの設定を投入すれば、そのまま使えま

皆さん。こんにちは。BASEの藤川です。 今年の4月頃に、BASEドメインの常時SSL化の取り組みについて発表させていただきました。 thebase.in リリース時は、新規登録ショップのみの対応だったのですが、本年の9月末に、全てのBASE社においてご提供しているドメイン（thebase.inや、shopselect.netなど...）をご利用のお店においてSSLがお使いいただけるようになりました。 3月末以降に登録したお店は、最初からSSL対応になっていたのですが、それ以前からお店を開いている場合は、

こんにちは。 新卒2年目デザイナーのshinoです。   制作職、特にデザイナー・コーダーのみなさんは、通勤時間などのスキマ時間にスマホでウェブサイトを見て、「あ！このデザインいいな！」「この配色ステキだなあ」「このサイト、どうやってコーディングしているんだろう？」と思ったことがあるのではないでしょうか。   ただ、そういうときほど、PCを利用できない状況だったりしますよね。   わたしは、「会社や自宅に着いてからじっくり見よう…。」と保留にして、そのまま忘れてしまった経験がよくあります笑   できれば、

RESTfulなAPIを作ろうと思った時の参考になるのが RESTful成熟度の3レベルモデル です。自分たちのAPIがどの立ち位置にあるのかが分かれば、どう改善することでよりRESTfulとして成熟するかが分かるようになるでしょう。 レベル0 まず最初の状態ですが、これは XML-PRC や SOAP が該当するそうです。すなわち、一つのURLと一つのHTTPメソッドで後は送信されるデータで処理内容や処理対象が分かるという方法です。 レベル1 レベル1になると、まずURLが分かれます。しかしHTTPメソ

フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。 viewportについて まず初めにviewportに関して説明します。 viewportはHTMLメタ要素の一つです。これを指定することにより、スマホ/タブレットで表示される際の描画領域幅やスケールを決定できます。 viewportは以下のようなタグで指定できます。 < meta name = 'viewport' content

8月25日、TAM CoworkingにてEnterprise APIs Hack-Night #6が開催されました。今回のテーマはEdTech×APIで、教育分野にフォーカスして3人の方に登壇いただきました。こちらはそのレポートになります。 講演1：プログラミング教育による破壊的イノベーション 登壇者：小金井市立前原小学校 校長 松田 孝様 一言に教育といっても色々と概念があります。学校教育に注目が集まりますが、家庭教育、生涯教育、社会教育などあります。学校教育は一部に過ぎません。さらに学校教育の中でも

こんにちは。制作部の苅部です。 今回は最近実施したGoogle Analyticsを使ったA/Bテストについて書こうと思います。 仕組み自体はすごくシンプルですので、ツールの導入が難しい場合にも簡易的なA/Bテストが実施できると思います。 Google Analyticsを使う機会が少ないエンジニア/デザイナーの方や、普段フロントエンドの実装をされてないディレクターの方に向けて、今回の事例を簡単に共有できればと思います。 実施の経緯 運用中のサービスで採用しているアイコンについて、「どうもわかりづらい」「

Swaggerはオープンソース・ソフトウェア、オープンなフォーマットと言うこともあり、関連するライブラリが幾つか存在します。OpenAPI Initiativeが設立されたこともあり、業界標準となっていけばさらに登場してくるのではないでしょうか。 今回はそんなSwaggerによる開発を補助するソフトウェアを紹介します。 Swagger2Markup/swagger2markup SwaggerファイルをベースにMarkdownファイルを生成するソフトウェアです。若干癖のあるツールですが、Markdownフ

こんにちは。制作部の平尾です。 私は2〜3年前くらいまでFlashがメインでお仕事していたのですが、最近はスマホのお仕事が多いので、新しく生まれ変わった Animate はまったく触っていませんでした。久しぶりにAnimateを使って、HTML5+JacvaScriptのアニメーションを作ってみたらいい感じだったので、簡単にサンプルを使ってご紹介したいと思います。 サンプルの完成イメージはこんな感じです。このアニメーションをAnimateで作成して、HTML5 Canvasにポチっとしてみようと思います。

7月22日に行われたAPI Meetup Tokyo #15はOpenAPI Specification（旧Swagger）特集でした。イベントの告知後、あっという間に満席になってしまったというほど、注目が高まっているOpenAPI Specification、今回はそのレポートになります。 1. OpenAPI Specification/Swagger概要 API Meetup運営チーム/Apigee 関谷和愛さん OAS（OpenAPI Specification）はREST API記述のフォーマッ

みなさま、こんにちは！エンジニアの東です。 フロントエンドの開発は不慣れな私はCSSの扱いもまだまだ未熟です。 というのも、私は、自身の業務では、CSSはなかなか触る機会がないです。 それもあって、私はCSSには苦手意識がありまして・・・特にfloatの扱いがうまくできないんですよね・・・！floatを使ってコンテンツを配置しようとすると大体レイアウトが崩れて、混乱します。 そんな私でも、floatの代替として使える非常に便利なものがありましたのでそちらを紹介したいと思います。 それは、 CSS3 Fle

エンジニアの荒井です。現在VASILYでは サマーインターンシップ を開催しています。募集開始後、さっそく多くの方からご応募いただいています。 インターンコースのひとつにフロントエンド開発コースがあるのですが、HTMLを書くのか、サーバーサイド言語を書くのか等、業務範囲に興味がある方が多いようです。そこで今回は、VASILYフロントエンドチームの役割と、インターンシップの内容について紹介したいと思います。 VASILYでのフロントエンドエンジニアの役割 はじめにVASILY内でのフロントエンドエンジニアの

こんにちは、制作部の今野です。 数年前からGoogle検索や翻訳などに、マイクのアイコンを見かけるようになり、好奇心でマイクをクリックすると、マイクが反応したり、ブラウザが喋り出したりしてビックリしました。 最近、どんな技術で実装しているのかな？と、色々調べていくうちに、「Web Speech API」というのを知り、これをうまく使えば、Botも楽しくなるんじゃ？と思い、調査しました。 Web Speech APIとは？ ブラウザで音声の入出力ができる2つの機能があります。 テキスト読み上げ（Speech

最近のAPIはJSONを基本フォーマットとして提供していることもあり、Webアプリケーションから利用したいという要望が強くなっています。しかしWebアプリケーションでのAPI利用は、サーバサイドとは異なる問題点が幾つもあります。 非同期 Webアプリケーションの場合、基本的に利用する言語はJavaScriptになります。JavaScriptはシングルスレッドな実装なので、ネットワークやデータの処理に時間がかかるものを同期処理にすると、処理が完了するまで全く何も操作できなくなってしまいます。それを防ぐために

こんにちは！BASE CTOの藤川です。 BASEのCSVダウンロードでダウンロードできる注文データから、納品書を作成し印刷するExcelシートをサンプル的に作ったので公開いたします。もしExcelを勉強したい人がいたらご参考ください。 なお、仕事の合間にさくさくと作ってみましたので、相当、緩い感じのものです。 BASEでは納品書Appsをインストールすると簡単に納品書をダウンロードして印刷することができるのですが、一枚ずつ印刷する仕組みなので、受注がものすごいたくさんある場合に、かなり手間がかかってしま