フロントエンド | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

最新情報を発信する
SiTest ブログ

Blockly1.0 って何?教育向けビジュアルプログラミングエディタを作ってみよう

Blockly トップ画面

このところ、教育とプログラミングについての話はよくでてきますね。

小学校でプログラミング教育が必修化するニュースは知ってる方も多いと思います。
それに影響をうけ、さまざまなビジュアルプログラミング言語がでてきました。

ビジュアルプログラミング言語とは視覚的なオブジェクトでプログラミングするプログラミング言語です。

Scratch (スクラッチ), MOONBlock (ムーンブロック), VISCUIT (ビスケット)など、聞いたことあるかたも多いと思います。

今回、紹介する Blockly (ブロックリー)もその1つです。

それでは、 Blockly の概要からビジュアルプログラミングエディタを作っているところまで見ていきましょう。

続きを読む >

Vuetify.js を使ってマテリアルデザインに挑戦しよう!

「マテリアルデザイン」という言葉を Google が発表してから既に3年が経過しましたが、みなさんは実際にマテリアルデザインを使ったことはありますか?

今ではかなり浸透しており、メジャーな JavaScript のフレームワークには、マテリアルデザインをベースにした CSS フレームワークが登場しています。(React.js はフレームワークというよりライブラリですが)
 ・ Angular : Angular Material
 ・ React.js : Material-UI
 ・ Vue.js : Vuetify.js

マテリアルデザインのルールに則れば、直感的で使いやすい UI が作れる!
そこで今回は、 Vue.js の CSS フレームワークのひとつ Vuetify.js を使って、ゼロからマテリアルデザインを適用していきたいと思います。

続きを読む >

環境構築不要!最小構成で理解する Riot 超入門編

Riotアイキャッチ画像

コンポーネント指向フレームワークである Riot を最近良く耳にします。

Riot は、比較的容易なフレームワークです。
でも、ちょっと試したいだけで環境構築するのは手間ですよね。

この記事では、簡単に試せるように、
テキストエディタとブラウザさえあれば動作する構成にしました。

Riot をスムーズに理解するために、最小構成のサンプルの HTML を作成し、
そこに徐々に肉付けして、 Riot の様々な機能について説明します。

それでは、 Riot を見ていきましょう!
続きを読む >

Firebase を使ってサイトを無料で公開してみる

今回は、Google のホスティングサービス Firebase を使って静的なサイトを公開する方法をお伝えします。
サクッとウェブサイトを公開したいけど、Google サイトのようにテンプレートからではなく、自分で書いた HTML・CSS を使いたい、という方に特にお薦めです。

続きを読む >

CMS を10分で構築!無料で簡単な Netlify CMS を使ってみよう

Netlify CMS トップ

今やブログを持つならほとんどの方が CMS を導入しているのではないのでしょうか?
CMS で有名なのは WordPress ですよね。

ただ、 WordPress を導入するには、レンタルサーバーやドメインを用意しないといけなかったり、レンタルサーバーによっては PHP や MySQL をインストールしないといけません。

また、エージェントによっては、 レンタルサーバーから WordPress の環境まで用意してくれているところもありますが、費用が発生したりします。

今回は、そんな手間や費用をかけず、 CMS を構築できる「 Netlify CMS 」を使っていきます。

高機能ホスティングサービスの Netlify にのせて、使っていきます。 続きを読む >

意外な落とし穴!?CSSコーディングにおける iPhone での注意点・3つの事例

意外な落とし穴!?CSSコーディングにおけるiPhoneでの注意点・3つの事例

こんにちは、プロダクト開発チーム エンジニアの森永です。

以前の記事「モバイルファーストの時代。スマートフォン用ブラウザは2017年以降どうなる?」でも書きましたように、Webサイトの作成においてはモバイル用サイトを重視する傾向が強まってきております。

スマートフォン用ブラウザの機能もPC用ブラウザと比べて遜色ないレベルに近づいてきており、画面サイズに気をつければHTMLやCSSのコーディングは同じ感覚で出来るようになってきています。
続きを読む >

iPhone の動く写真を Web でも表示できる!「LivePhotosKit JS」を試してみた

iPhone 6s から撮影できるようになった「動く写真」こと Live Photos がウェブサイト上での表示に対応しました!

今回、Apple が公式に API を提供開始したことにより、簡単な HTML コーディングだけで Live Photos を自分のウェブサイトに埋め込めるようになっています。

というわけで、早速この LivePhotosKit JS を試してみました。

続きを読む >

「 Hugo 」は簡単! バージョンに注意しながら3ステップで導入してみる

Hugo Top

近年、 Jekyll や Hexo といった静的サイトジェネレータが話題になりましたね。
その中でも2017年に注目を浴びているのが、超高速 Golang 製の「 Hugo 」です。

何が超高速なのかというと、ビルドの速さです。
Hugo だと1記事あたり1msでビルドすることができます。
1000記事を1秒でビルドできるのは魅力的です。

ただ、導入する際にバージョンに関して躓くことがあります。
今回はその Hugo の概要から、バージョンに注意しながら導入までを紹介していきます。

※ この記事は Mac で Homebrew によりインストールすることを想定しております。

続きを読む >

Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる

Netlify Top

2017年現在、簡単に静的サイトを公開できるようになりました。
便利かつ簡単なホスティングツールが増えてきたのもその理由の1つではないでしょうか。

Heroku, Firebase, GitHubPages
どれも便利ですが、どのホスティングツールにも負けず劣らず有用な「Netlify」をご存知でしょうか?
Netlify は SSL の設定も簡単に行える高機能ホスティングツールです。
今回はその Netlify を使用して静的サイトを公開しています。

Netlify の概要から使い方までをサクッとみていきましょう。

続きを読む >

UmbrellaJS って何? jQuery に代わる超軽量ライブラリをオススメする3つの理由

UmbrellaJS

JavaScript ライブラリの王道といえば、jQuery だと思います。

複雑な処理をかかなくとも、DOM 操作や Ajax リクエストできたりするのが魅力ですね。

その学習コストの低さと使いやすさが認められ今や Webエンジニアで知らない人はいないぐらい人気のライブラリとなっております。
ただ、デメリットとして、軽量ではないということがあげられていました。

その問題を解決してくれるのが、超軽量 JavaScript ライブラリ「UmbrellaJS」です。

今回は「 UmbrellaJS 」を紹介していきます。
それでは、どういったものかを見ていきましょう。

続きを読む >

1 2 3

03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら