create-ja

📝

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.

IndieWebの文脈におけるcreate（作成）とは、新しい投稿（最もシンプルな形では新しいノート）を作成する行為やそのためのUI、あるいはより広く、自身の個人サイト上やサイトのために何かを作成することを指します。以下も参照してください：

クリエイト・デイ

特定の作成UIタイプ：

イベント作成
...

関連語：クリエイター：自身のサイトのためにUI、デザイン、コードを作成している人。

IndieWebの事例

Barnaby Walters

Barnaby Walters は、公開された Taproot 作成インターフェースをホストしています：

スクリーンショットについては以下を参照：

Taproot ノート・インターフェース

Aaron Parecki

Aaron Parecki は Quill の開発者です。

ノートと写真

ブックマーク

ページをブックマークする（自身のサイトにブックマーク投稿を作成する）ために、Aaronは以下を使用しています：

ブックマークするURLがあらかじめ入力された `quill.p3k.io/bookmark` を起動するためのブックマークレット
quill は micropub を使用して
自身のサイトに ブックマーク投稿を作成 します。

（スクリーンショットが必要）

以前、Aaronのソフトウェアには作成インターフェースが含まれていました。古いスクリーンショットは p3k-v1 で見ることができます。

Tom Morris

Main article: Ferocity#Posting_UI

Tom Morris は 2013-03-25（あるいはそれ以前）から、tommorris.org で以下のノート作成インターフェースを持つ Ferocity を使用しています。

二重円のアイコンはジオロケーション（位置情報）用です。これをクリックするとブラウザの Geolocation API を使用して投稿場所を設定します。
Twitterのチェックボックスで、投稿をTwitterにシンジケート（同時投稿）するかどうかを選択できます。

Jeena

Jeena の投稿インターフェース（プロジェクト名未定）

Jeremy Keith

adactio notes

2014-05-27以来、Jeremy Keith が自身のサイト adactio.com にログインしている際にホームページに表示されるノート作成UI（「シンプルな更新フォーム」）：

[1]

adactio photos

2014-07-05、彼はノートに写真を添付する機能を追加しました。これはシンプルな写真投稿（Twitter と Flickr の両方に POSSE される）を行うための方法です。

この写真にある彼のノートPCの画面の2番目のウィンドウで、「ファイルを選択」というHTMLファイル入力が追加されたUIをかろうじて確認できます。

サイロごとのPOSSE切り替え

その後（2014-10-01頃）、投稿ごとに Twitter や Flickr への POSSE を個別に切り替える機能を追加しました（両方ともデフォルトはオン）。

Jeremyは、これらのアニメーションするスライドトグルをオープンソースとして公開しています：

http://jsbin.com/rugonu/6/edit <-- 自分で試せます

Calm Technology

calmtechnology.com は Amber Case によるトピックに特化したIndieWebサイトで、WordPress と P2 で動作しています。

UIの中心として、一つの大きなテキストボックスと大きな「Post it（投稿）」ボタンがあり、その上にメディアやタグを追加するためのマイナーなオプション要素がインラインで配置され、文脈として最近の投稿の上に表示されていることに注目してください。

gRegor Morrill

gRegor Morrill はこのインターフェースを使用してノートを投稿しています。詳細については、彼が継続しているノートに関するドキュメントを参照してください。

Martijn

Martijn van der Ven の投稿UI： IWC Nürnbergでのデモ。

モバイル

Main article: モバイルでの作成

モバイルでのノート作成は、様々な理由から特に困難です：

ネットワークの信頼性が低い（JS / AJAXに依存している場合、ユーザーデータ消失の可能性がある）
ディスプレイが小さい（入力内容を確認できるスペースが少ない）
タッチキーボード（物理的なキーボードよりも操作しづらく、正確性に欠ける）

サイロ（中央集権型サービス）の事例

Facebook

Facebook は、プロフィールやウォールの「タイムライン」の上部に、以下の3つの明示的な投稿タイプオプションを持つ新規投稿用UIを提供しています：

近況 | 写真・動画 | ライフイベント

デフォルトでは「近況」が選択されており、「今なにしてる？」というプロンプトテキストが表示されます。

これは、チェックインやリンク/ブックマークなどがUI上で明示的に区別されていた過去の作成UIから大幅に簡略化されたものです。

FB：作成機能の有効化

テキストエリア（デフォルトテキストが表示されている場所）をアクティブにすると、その下に新しいオプションが表示されます：

アイコンは以下を表します（ホバーするとツールチップが表示されます）：

「投稿に写真を追加」
「投稿に友達をタグ付け」
「気分・アクティビティを追加」
「投稿に位置情報を追加」（都市名が自動入力され、削除用の×ボタンが表示される）
「投稿の日時を設定」
公開範囲の設定（公開、友達、自分のみ（デフォルト）、カスタム、学校、会社など）

FB：テキストサイズの自動調整

テキストエリアの文字サイズは、入力中の近況アップデートの長さに応じて可変します。

FB：ライフイベント

「ライフイベント」を選択すると、作成ボックスが展開され、選択可能なカテゴリセットが表示されます：

仕事・学歴、家族・交際、居住地、健康・ウェルネス、旅行・体験

FB：近況の再選択

「近況」を再選択すると、テキストフィールドがアクティブになり、上述の近況オプションが表示されます。

FB：作成時の背景色

プロフィールではなくホームページから作成する場合（ Tantek Çelik によればプロフィールからでも同様）、インターフェースが若干異なります。背景色を選択するオプションも含まれています。「背景色」をクリックすると、いくつかの色オプションから選択できます：

色を選択すると、ウィンドウ内の背景が変化します：

FB：新機能の通知

Facebookが作成UIに新機能を追加した際、小さな青いミニオーバーレイで通知することがあります：

Facebookイベント

Main article: イベント作成：Facebook

注目すべきことに、上記の作成 UIにはイベント（人を招待するタイプのもの）を作成する機能が含まれていません。

イベント作成UIは、自身のイベントやカレンダーを表示している時にのみ、文脈的に表示されます。

`facebook.com/username/events` ->
[ + イベントを作成 ] [ ✏️ ]
ボタン（鉛筆ボタンは「管理」用ですが、詳細は不明です）
`https://facebook.com/events` -> 左カラムにある
[ + 作成 ]
ボタン

「+ [イベントを] 作成」をクリックすると、イベントの詳細を入力するダイアログが表示されます：

最初のイベントが作成された後、イベントの編集 UIには既存の写真を選択するオプションが含まれます。詳細は編集：Facebookイベントを参照してください。

イベントの公開/非公開オプション：

非公開イベント：「ゲストによる友達の招待を許可」（デフォルト）
非公開イベント：主催者のみが友達を招待可能
公開イベント：ログインしていない人を含め、誰でも閲覧可能

詳細や、「イベントの重複」によって��生する「問題が発生しました」や「警告：操作をスローダウンしてください」といった不可解なエラー、またエラーメッセージが出たにもかかわらず「イベントが作成される」問題については、以下を参照してください：

イベント作成：Facebook

Googleカレンダー

Main article: イベント作成：Googleカレンダー

Googleカレンダーは、「明日の夜に夕食」といった簡潔なプレーンテキストの表現からイベントを作成する機能を持っています。サポートされている実際の表現については、引用やドキュメントが必要です。

Amazonレビュー

Amazonレビューは製品のレビューを作成するUIを提供しています。まず星評価を選択することから始まり、各ステップを完了するごとに追加のフィールドが段階的に表示されます。

LinkedIn

LinkedIn は記事を投稿するための公開インターフェースを持っています。以下の要素の追加をサポートしています：

カバー画像のアップロード
見出し
投稿本文（「ここに書く。視覚的なインパクトのために画像や動画を追加する」というプロンプト付き）

コンテンツセクションでは、シンプルな書式設定オプションが利用可能です：

見出しレベル：1, 2, 3
太字、斜体、下線
番号付きリスト、箇条書きリスト
引用（ブロッククォート）
ハイパーリンク

ブレインストーミング

より良い文章の提案

理想的には、テキスト入力ボックスが文章を改善する方法を自動提案する機能が望ましいです。

Tantek Çelik：自身の「Working On」ページでリソースとアイデアを収集中：
- Falcon：文章の改善
...

写真

このセクションの全内容を独立した写真作成ページに移動し、ここには要約を残し、このセクションへのリダイレクトを写真作成ページへ向けるように修正することを検討してください。

上記の #IndieWebの事例のいくつかには、インラインの写真投稿作成UIがあり、通常はノート作成UIの拡張として提供されています。

このセクションは、写真中心の作成UIに関するブレインストーミング用です。

写真投稿を作成するためのUIに関するブレインストーミング。

サーバーに写真をアップロードするプロセスや課題については、写真アップロードを参照してください。

UIフロー

「体感的な遅延（レイテンシ）」が少ない写真投稿作成体験のためのUIフロー案：

ユーザーが投稿する写真を選択する。ウェブアプリは即座にバックグラウンドでサーバーへのアップロードを開始する。
ユーザーが写真をフィルタリングしたりクロップ（切り抜き）したりする。ウェブアプリはフィルターやクロップの指示シーケンスをキャプチャし、ユーザーが編集を「完了」した時に、その指示シーケンスをサーバーに送信する。
サーバー側でフィルターやクロップを適用する。
ユーザーが人物タグやテキストコンテンツ（キャプション）などを追加する。
ユーザーが「投稿」などをタップする。この時点では送信すべきなのはテキストのみで、他の要素はすべてサーバーに届いているため、投稿は即座に完了する。

フィルターやクロップの指示シーケンスを純粋に CSS のフィルターおよびクロップ（width, height, object-fit:cover, object-position）プロパティと値として保持し、それらを使用してクライアント側で画像を表示し、サーバーからもその CSS を配信することで、ブラウザにフィルタリングやクロッピングを任せることもできます。これにより、ImageMagick などのサーバーサイドの画像処理ソフトウェアを使用する必要がなくなります。

HTMLボックス

正確なマイクロフォーマットのマークアップに必要なメタデータの量は最小限ですが、多くのオープンソース CMS ソリューションで必要とされるファイルシステムの数がワークフローを複雑にしています。
プレーンな HTML を受け付け、ユーザーに microformats2 を含めることを求める執筆 UI は、魅力的なユースケースかもしれません。
どの程度のテンプレート（トップレベルの h* タグなど）を含めるべきかを知る必要があります。
投稿タイプ（Like、ブックマークなど）のために URL をパースできる機能があると良いでしょう。

フィルターの適用

画像にフィルターを適用するためのライブラリやリソース：

CSS フィルター機能を使用すると、画像に対してあらゆる種類の操作エフェクトを適用できます：

https://developer.mozilla.org/ja/docs/Web/CSS/filter

Tumblrエディタについての考え

ブレインストーミング：投稿作成・編集 UI における手法や考え方、そして強い要望についてはこちらを参照：2021-12-09: https://bobaboard.tumblr.com/post/670144951687987200/ooh-i-like-cyle-now-i-want-to-hit-them-up-here-to

オフライン作成・編集、投稿のキューイング

ユースケース：iPad 上のオフラインブログ投稿執筆サイト/アプリ。

ネイティブアプリの例：iOS 標準の「メモ」アプリ。十分なコンテンツや構造ができるまで下書きを書き、保存し、拡張し、その後にマークアップを行ったり関連画像を追加したりできます。