プログラミングなら、オンラインのクリエイティビティに境界線はありません。インターネット上では日々、プログラマーたちがそのスキルを活かして、一般向けの小さなプロジェクトを立ち上げています。元Googleのデザイナーで、現在はDropboxの副社長を務めるノコラス・ジトコフが作ったウェブサイト、tybittyも、そんな小さなプロジェクトの一つです。

ittybittyのウェブサイトを使用すると、任意のWebホスティングを持っていない場合でも、無料で小さなHTMLのウェブサイトを作成することができます。

ちょっと解説

仕組みとしては、itty.bitty.siteをURLで読み込んで、小さなサイトを作るというもの。つまり、あなたのサイトは、そのリンクの中に保存され、表示されるのです。

URL自体には、サイトの見た目や内容など、そのサイトに関するすべてのデータが含まれています。

あなたの小さな小さなリンクを受け取ると、それはいつもより少し大きくなることに気づくでしょう。それはあなたのウェブサイト全体です。

リンクからリンクへ

実際にItty Bittyで作成されたサイトは、非常に小さなインターフェースになっています。サイトの各追加ページは、サイトそのものを使用して作成されることを忘れないでください。

このページからは、基本的なHTMLを使った簡単なページをすぐに作成することができます。

より堅牢なItty-Bittyサイトを作成したい場合は、HTMLドキュメントを直接サイトにドラッグ＆ドロップしたり、既存のアイテムを直接プロンプトにリンクさせたりすることができます。

ドキュメントやリンクにCSSやJSなどの他のプログラミング言語が使用されていても、Itty Bittyのサイトでは読み込まれます。とはいえ、Itty-Bittyを使う主な利点（1つのアドレスからロードできる主な理由）は、ページが特定の小さいサイズ以下に保たれなければならないことです。

小さなサイトとは、どの程度の規模なのか？

ittybittyが無料で、ウェブホスティングを必要としない場合、あなたのウェブサイトは実際にどのくらいの大きさにすることができます？答えは：あまりない。

ウェブサイトは、ウィンドウの右上にサイズが表示されます。サイトのサイズは変動しますが、これはリンクのサイズも変動することを意味します。サイトによっては、数バイト以上のリンクを共有することができないため、より大きなサイトの共有に制限を受けることがあります。

幸いなことに、制作者は多くの一般的なプラットフォームの最大バイトサイズを公開しており、異なるプラットフォームが対応するサイズを説明することができます。

例えば、Bitlyでウェブサイトを短縮する場合、非常に小さなウェブサイトを作成する必要があります。これは、Microsoft Edgeにも適用されます。ブラウザ間で共有するだけなら、より大きなウェブサイトを作成することができます。

イッテQのリンクより

HTMLファイルを直接Itty Bittyのサイトにドロップしたり、サイトの内容を直接入力しても作成できますが、今回は、以前Dudley Storey氏が作成したCodepenプロジェクトを使用した方法を紹介します。

codepenは、Itty Bittyを使ってサイトを作成する最も簡単な方法です。codepenは、ユーザーに使いやすい開発環境と便利なリンクプロセスを提供します。

上記は、強力なHTMLのバックボーンに、他の微妙なプログラミングを加えることで、シンプルなウェブサイトを作成できることを示す優れた例である。また、幸いなことに、上記の多くのプラットフォームで共有できるほど小さいサイズです。

Codepen プロジェクトを Itty Bitty サイトに変換するには、Itty Bitty サイトにペンへのリンクを貼り付けます。次に、グレーの無題の部分にカーソルを合わせ、あなたのサイトを反映させるためにテキストを編集してください。

次に、ウィンドウの右上にあるメニューをクリックします。

このページでは、あなたの小さなビットへのリンクを作成します。一見、ウェブサイトを作成したようには見えませんが、そうなのです。

リンクをコピーする」をクリックすると、そのリンクをブラウザに貼り付けてサイトを表示することができます。また、Itty Bittyのサイトは、デフォルトでQRコードによる送信が可能であることも重要なポイントです。

これにより、失われたデバイスに物理的な参照を付けるなど、さまざまなオプションが可能になります。

おめでとうございます！これで、サーバーレスで無料のリンクサイトが完成しました。

小さなリンクをさらに短くする

また、リンク短縮ツールを使えば、ごちゃごちゃしないリンクが作れます。リンクを短縮できるだけでなく、無料アカウントに登録すると、自分のテキストでリンクをカスタマイズできるBitlyを使用する予定です。

Codepenのサンプルは、Bitlyで圧縮するには大きすぎましたので、JT Helmsによる別の素晴らしいプロジェクトを紹介します。私は上記のプロセスに従って、このペンを小さなウェブサイトに変換しただけです。

リンクができたら、Bitlyにアクセスしてください。Bitlyの起動ページにリンクを貼り付けるか、アカウントにログインしてCreateボタンを選択します。以下のプロンプトにリンクを入力してください。

その後、ログインしている場合は、Bitlyのエディターを使って、適当にリンクを調整します。

最初のリンクをITTYBITTYEXAMPLEに変更しました。これで他のウェブサイトと同じようにbit.ly/ittybitty exampleにアクセスできます。もちろん、無料なのでウェブホスティングやサーバーのメンテナンスは必要ありません。

小規模なWebサイトのセキュリティ

これは、小さなHTMLサイトを作るにはクールで賢い方法ですが、欠点がないわけではありません。小さなサイトを悪用するのは、他のサイトを悪用するのと同じように簡単です。つまり、サイトがアラートなどの機能であなたを困らせる可能性があるのです。

まだ実験段階であるため、安全なWebプレゼンスの確立のための主要な方法としてこのサイトに依存する必要はない。

小さなお子様のために、可能性は無限大です

オンラインのクリエイティブは、印象的なものが多いですね。しかし、Itty Bittyほどシンプルで使いやすく、身近な存在であることは稀です。小さなアプリケーションを紹介したい？div要素で混ぜる？Itty Bittyのウェブサイトでは、すべてが簡単に実現できます。

また、数や場所が限定されるわけではありません。このサイトの作成者であるNokolas Gitkoffに習い、サイト内のサイトにリンクし、包括的で数ページにわたる解説を行います***。ブルドッグになるのもいい。この小さなオンライン実験をぜひお試しください。

小さなサイトを作る前に、HTMLとCSSの知識を高めて、さらに**良い**サイトを作ろう!または、あなたのウェブサイトをホストするための代替方法については、当社のInMotionホスティングレビューをチェックしてください。