Bootstrapのサイトが簡単に作れるというWebサービス『Divshot』とは。


『Divshot』 サインアップから開始まで

『Divshot』はWebブラウザ上で各コンポーネントをドラッグアンドドロップしていくだけでサイトが作れるというサービス・・・らしい。

しかも、出来上がったサイトのHTML/CSSのダウンロードが出来る・・・らしい。

これが本当ならBootstrapを使った綺麗なサイトがパワポのように簡単に素早く作れるに違いない!

ってことで、無料登録・制作画面などを確認してみたい。

Divshot

 

『Divshot』 へ新規登録

https://divshot.com/

意を決してDivshotのサイトへアクセス。

やはり英語サイトだ、日本語バージョンにワンボタンで変換がどこかにきっとある・・・ない・・・。

こんな事は今までもあった。なんとか単語を読み取り、ある時はドラえもんのポケットから出されるような便利ツールを使い攻略してきた。

なにより私は洋画をよく観る、聞き流すだけで英語を話せるようになる、あの教材も顔負けするくらいの時間をだ、きっと自然と身についているに違いない。

さて、この壮大で宇宙のパワーをガンガンに出してくるサイトに怖気づいてしまう寸前のところで、SIGN UP FOR FREEの目立つリンクテキストがあるのを見つけた。

「SIGN UP FOR FREE」をクリックしてみる。

すると以下の画面が出た。

新規会員登録のリンクはどこにあるのかと、探してみても見つからない。

ならばこの画面こそそうに違いないと思い、登録したいメールアドレスとパスワードを入力後「SIGN UP」をクリックしてみる。

Divshot

予想が正しければ登録したメールアドレス宛にDivshotからのメールが届くに違いない。

わずかな希望を抱き、登録したメールアドレスを確認してみるとメールは届いていた。

Divshotからのメールは非常にシンプルなものだった・・・

文面にはクリックしろと言わんばかりの「VERIFY EMAIL ADDRESS」の文字が・・・クリックしてみる。

Divshot使い方

すると、メールアドレスが確認されたと思わしき以下の画面が表示される。

「back to the dashboard now.」というリンクテキストがある。しかも太字だ。

今すぐダッシュボードに戻ろうって事だろうか・・・戻ろうと言われても行ったことはない・・・

他にもリンクはあるのかと探し見るがどうやらなさそうだ。

ならばクリックしてみよう。他に逃げ場所はない。

Divshot使い方

どうやらこれがDivshotのダッシュボードのようだ。

Divshot登録

よくわからい、スキル不足なのか、宇宙パワーに圧倒されているのか・・・使うの止めようかと一瞬怯む。

だがしかし、パワポのように簡単に早く作れる魅力は大きい!

とはいうものの、ここでわかるのは「+ CREATE APP」の文字くらいだ・・・クリックしてみよう。

app name とは・・・プロジェクトネームみたいなものなのか・・・

名前を考えたら半日は過ぎる特技を持っているが、名前を決めるのは苦手だ、時間が惜しいので適当な名前を入力して「Create App」を恐る恐るクリックする。

Divshot使い方

するとまたしても難解な以下の画面が表示された。

画面を見ると3つのタブがある、左の「UPLOAD」と中央の「CLI」は今の私には関係ないものに思える。

となると・・・残る「ARCHITECT」に違いない。

「ARCHITECT」タブを開いた画面の中には英語で何か書かれている。

リスニングパワーを活かして読んでみる・・・

よく考えたら殆ど日本語吹替えでしか観てないからわかるはずもない。

早くも便利ツールに頼る時が来たようだ。

「With Architect you can prototype and build websites visually in your browser.」
「アーキテクトを使用すると、プロトタイプができ、お使いのブラウザで視覚的にウェブサイトを構築します。」

-google 翻訳-

目的の場所はこれに違いない!

「LAUNCH ARCHITECT」をクリックしてみる!

Divshot使い方

NewFile作成のスタートページが表示された。

「BlankPage」や「Jumbotron」「JustifiedNavi」などのテンプレートを選択することができるようだ。
Divshot

今回は「BlankPage」を選択して「CreateFile」をクリックしてみる。

やっとだね、これがDivshotのサイト作成画面だ!

Divshot制作

これは簡単!

ローカルで作業中のフォルダもアップ出来るし、一部Bootstrapの機能を使う、テーマをカスタマイズしてみるなど使い方によっては便利なのかもしれません。

テーマは右下「DESIGNER」タブ内の「Change」ボタンより変更出来るようです。

Divshotの使い方

それと、ダウンロードしたzipフォルダにはhtmlファイルのみがある状態で、CSSはCDNで読み込むものとなっていたので、別途ブラウザでソースを表示してcssをローカルに保存したほう確実かなとは思った。

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL