Firebaseを使ってFacebookの投稿の空改行をできるようにする！

Firebaseを使ってFacebookの投稿の空改行をできるようにする！

先日ある方から、Facebook の投稿の際に空改行を入れても投稿後の実際の表示は改行されていないという話を伺いました。Facebook の方が空改行の場合、改行を無効にしてしまう様です。

インターネットを検索するとこの空改行を保持するための方法が見つかります。何か方法はある様なので調査して改行を保持するための Web アプリを作ってみました。この記事はその紹介です。

インターネットを検索すると

Facebook の投稿で空改行を保持する方法をインターネットで検索すると以下の方法が見つかりました。

＊　改行の前にスペースを入れる

＊　Shift ＋　改行で改行する

＊　Web アプリで変換

2021 年１月現在で以上の方法を試したところ、「Shift 　＋　改行」という方法は上手く行きませんでした。 以前はできた様ですが、少なくても現在は使えません。

改行の前にスペースを入れる方法は、スペースが改行の前にあることで Facebook は空の行とはみなさない様で一応見た目は空改行ができる様です。

最後の Web アプリですが、幾つかのサイトでは投稿内容をフォームに入れると改行が保持できる様に変換してくれるサービスがありました。実際に幾つかのサイトで試したところ、投稿の改行が保持されていました。

何をやっているのか？

一応改行する前にスペースを入れておけば Facebook の投稿に空改行を挿入できて、投稿を見やすくする事はできるので問題は解決なのです。しかし、投稿を先に書いてから行う場合などは毎回スペースを入れるのはちょっと面倒です。特に、同じ投稿を複数の場所にする場合は、毎回投稿の入力フォームでタイプするわけではないので不便です。

そこで、Web サービスでは何をやっているのかを調べてみる事にしました。

当然ですが、一つの方法は空改行を見つけたら「その前にスペースを挿入」という処理をすれば問題は解決できます。

実際に、幾つかのサイトで提供している Web アプリ（Web サービス）を調べてみました。

スペースを挿入しているケースもある様ですが、殆どのサービスは特殊な文字コードを挿入していました。 この文字コードは「Unicode の Zero width SPACE (U+200B)」というコードを改行の前に挿入していました。

なので、ファイルや入力した投稿から「改行」を検出してこの特殊コードを入れると空改行が保持できる事がわかりました。 スペースを入れる場合との違いは、スペースの場合投稿上にスペースが残りますが、この方法だと投稿上には空改行にはスペースは残りません。実際は大した違いではないのかもしれませんが、この方法で Facebook の投稿で空改行を保持するアプリを作ってみることにしました。

改行の検出の仕方

アプリを実現するには、「空改行」を見つける必要があります。 改行の方法は実は OS によって違います。改行には実際の表示では見えない特殊文字を使っています。 改行を表す特殊文字は基本的に２種類あります。

＊　LF (ラインフィード／Line Feed)

＊　CR (キャリッジリターン／Carriage Return)

です。実はこの特殊文字の使い方が OS によって違います。

Windows では、「CR ＋　 LF」で両方使っています。一方で Unix 系の OS、Linux や MacOS では「LF」を使っています。

実際のプログラミングで使われるコードは通常は 「\r」と「\n」を使っています。従って、これらの特殊文字を検出してその前に「Zero width SPACE」を入れれば良い事になります。一般的なプログラミング言語では、文字コードは「\r は 0x0D」「\n は 0x0A」を割り当てています。

Windows の場合、改行の際は「0x0D + 0x0A」ですが、Mac や Linux の場合は「0x0A」です。 本当は、空改行を検出してその前に特殊文字を挿入すれば良いのですが、Windows・Linux・MacOS をサポートするには条件が多くなって処理が面倒になります。そこでデータ量は増えてしまいますが、「0x ０ A(\n)」を検出したらその後ろに特殊文字を入れてしまう方法だとプログラムがシンプルになります。

実際は、改行された後に特殊文字が来ることになりますが、データ上は、次の行に特殊文字が入っているのと同じです。この場合、一番最初の行が空改行でなければ、実際は改行の前にこの特殊文字が入っています。この特殊文字は実際には表示されないため、普通の行の最初に入っていても問題はありません。空改行の場合のみ、改行の直前に入る事になるので「データのない行」とはみなされなくなります。そう考えると、「スペース」を挿入する場合よりプログラムをシンプルにできます。 （スペースを使う場合は、空改行を検出して、Windows か Linux／MacOS かを検出して空改行の改行の前にスペースを入れる必要があるため）

実際の実装は？

実際の使い方を考えると、２つの入力方法がサポートできると便利です。

＊　テキストファイルから投稿内容を読み込む

＊　入力フォームに投稿内容を入れる（実際にタイプする場合とカット＆ペースト）

投稿内容を変換して、変換した投稿を Facebook に投稿する様にすれば良い事になります。

従って、Web アプリで必要なのは：

＊　ファイルの選択とファイルの中身を読み込む処理

＊　入力フォームから投稿を取り込む処理

＊　取り込んだ投稿を変換する処理

＊　変換結果をクリップボードに取り込む処理

基本は文字列から「\n」を見つけて特殊文字（文字コード：8203）をその後に挿入すれば良いだけです。 変換結果を表示して、カット＆ペーストでも良いのですが、変換結果をクリップボードに取り込んでおけば、「カット（コピー）」する手間が省けるので便利です。

実際に、アプリを React で実装してFirebase のホスティングで公開しています。

まとめ

Facebook の投稿で空改行が実際の投稿に反映されない仕様の対策として、特殊文字を挿入することで Facebook の空改行を保持できる様にする Web アプリのコンセプトについて解説しました。作成したアプリは Firebase のホスティングを利用してインターネットに公開しています。

空改行が保持できると、投稿の見た目を整えて見やすくすることが可能になります。 Facebook だけではなく、他のメディアにも投稿するケースは多いと思いますので、ファイルなどからも読み込める様にして使いやすくする工夫もしています。よろしければ利用してください。（無料です！）