ブロガー エディタ 〈HTML〉

ブロガー エディタ <HTML> アイコン

ブログサイトのブロガー (Blogger.com) の公式アプリ (Android)だと投稿をHTMLで編集する機能が無いほか、PCブラウザで公式のサイトにアクセスしてもブラウザやIMEの環境によってはHTML編集の挙動がおかしい場合(※)があるので、スマホでブロガーの投稿/ページをHTMLフォーマットで編集できるアプリ:

『ブロガー エディタ〈HTML〉』

を作ってみました。

※: 公式サイトだと、HTML編集中にテキストを選択してドラッグで移動する場合、ドラッグした内容が消えてしまったり、そのマウス操作の後にキー入力をしても入力がされないなど ( 現在) の不都合があります。

また、は、HTML編集中にシフトキーを押しながら矢印キーで範囲選択をすると選択範囲が削除されてしまうなどの不都合もありました (翌日にはその症状は無くなっていました。)。

詳しい事はわかリませんが、JavaScriptでキーボードからの入力がある毎に、HTMLコードの要素によって色を更新するといった処理を付け加えているのだと思いますが、時折、処理がおかしいままの状態で一般公開になっている気がします。

勝手な想像ですが、アルファベットの直接入力では問題がない場合が多いのと、以前にいくつか何度がバグレポートをしていましたが改善される事もまれなので、この部分担当の開発チームにはIMEを理解している又は使っているメンバーがいないか少ないのではないかとった印象があります…

このアプリは、ブロガーのサイトの表示される状態の記事をそのまま編集するWISIWIGタイプのエディタではなく、記事の元になるHTMLテキストを編集するアプリなので、使い勝手は少し上級者向けのアプリになります。


#HTML編集 #ブロガー

メイン画面

メイン画面: サインイン
メイン画面: サインイン

ブロガー記事の管理・編集には、Google社の提供する「Google API」の「Blogger API v3」を使っているので、このアプリの利用には編集したいブロガーのサイトに連携されたGoogleアカウントでサインインする必要があります。

  1. アプリインストール後、メイン画面に表示される「このアプリの使用承諾規約(EULA)に同意する。」の左横のチェックボックスをタップすると表示される規約に同意するとサインインボタンが表示されます。
  2. サインインボタンをタップして任意のGoogleのアカウントでサインインしてください。

Googleアカウントにサインインすると、アカウントに関連付けされているブロガー(Blogger.com)のサイトの一覧が表示されます。


メイン画面: ブログ一覧
メイン画面: ブログ一覧

一覧に表示される各ブログの情報の右側にある 「」ボタンをタップする事で、ブログの詳細情報を表示・非表示にする事も出来ます。

ブログ情報
ブログ情報

※: ブログ情報に表示されるURLはデフォルトのURLで、ブログの設定によっては実際のURLと異なる場合があります。


一覧に表示されたブログをタップして選択すると「コンテンツ一覧画面」に移動します。


注: このアプリはGoogle社がオンラインで提供する「Blogger API v3」を使ってブロガーのコンテンツにアクセスする為、ブロガーのコンテンツをオフラインで編集する事は出来ません 🙅🙅🙅。


コンテンツ一覧画面

コンテンツ一覧画面
コンテンツ一覧画面 (投稿)

「コンテンツ一覧画面」では、タイトルの下に、

  • 「メイン画面」で選択したブログの情報
  • 一覧表示オプション
  • 選択したブログのコンテンツ一覧 (「投稿」又は「ページ」)

の順番で表示されます。


一覧表示オプション

コンテンツ選択

投稿
ページ

一覧に表示するコンテンツの種類、「投稿」または「ページ」を選択します。

昇降順

一覧に表示するコンテンツの順番を選択します。

  • : 更新日時を基に新しいコンテンツから順に表示します。
  • : 更新日時を基に古いコンテンツから順に表示します。

※:このオプションは、「コンテンツ選択」で「投稿」が選択されている場合のみ、選択可能で、「ページ」が選択されている場合無効になります。

公開状態

下書き
公開中
予約済

一覧に表示するコンテンツの公開状態を選択します (複数選択可)。

※:「 予約済」は「投稿」の一覧のみに選択可能で、「ページ」の一覧では無効になります。


ブログのコンテンツ一覧

一覧の「投稿」又は「ページ」をタップして選択すると「HTML編集画面」に移動します。


ブログ一覧と同様に「投稿」または「ページ」のコンテンツ情報の右端にある「」ボタンをタップする事で、コンテンツの詳細情報を表示・非表示にする事も出来ます。

コンテンツ情報 (投稿)
コンテンツ情報 (投稿)

HTML編集画面 /

HTML編集画面
HTML編集画面 (投稿)

「コンテンツ一覧画面」で選択した「投稿」又は「ページ」のタイトルと内容が表示されます。


タイトル、内容を変更した場合はタイトルの右よりの下にある(保存)ボタンをタップすると更新されます。


  • HTML ビュー
  • 作成ビュー

ラベルをカンマで区切る; 一致する候補がありません

パーマリンク

  • 自動パーマリンク
  • カスタム パーマリンク
  • 公開
  • 下書きに戻す
  • この投稿をゴミ箱に移動: → ゴミ箱はどこ？？？？

付属機能

ブロガーエディタの付属機能として次の画面をメイン画面のメニューから選択する事ができます。

  • ビューワー
  • ブックマーク

ビューワー

URLを指定して任意のページを表示する事ができます。 また、画面右下に表示される[] ボタンをタップしてページをHTML表示する事も可能です。

この機能はサインイン無しで使えますが、メイン画面からアクセスする編集機能とは別処理になるのでブロガーのページの表示にはURLを指定する必要があります。

※: URLが、https://ではなく、http://の場合は、デバイスやOSの設定によって表示が制限される場合があります。


ブックマーク

ビューワー用の「ブックマーク」を登録/管理する事が出来ます。


HTML編集のメリット？

Webページは、HTML言語で書かれていますが、HTML言語を直接使わずに、実際にブラウザで表示される様な状態を可視的に編集出来るアプリやサイトが沢山あります。

とても便利なのですが、最終的に出来上がったページのHTMLコードを確認すると長いHTMLタグが重複して組み込まれていてビックリする時があります。


例としては、投稿を編集している際に他のページから内容を一部コピーしてペーストする場合、コピーした内容が元のページに出来るだけ似ていないと可視的な編集にならないので、間隔の設定や文字のフォーマットなどを含むレイアウト関連のHTML設定、「CSSスタイル」も同時にコピーされます。

HTMLで編集していると、コピーする部分全体のレイアウト設定を見つけてコピーして、コピー先の範囲全体に一度だけ設定を加えれば良いのですが、可視的な編集の場合だとプログラミング処理の都合でペーストする内容のHTMLのテキストタグ毎に文字フォーマットをコピーする仕様になっている様です。


例えば、ブロガーの場合、ブラウザで投稿やページの内容を編集する際だとデフォルトモードの「作成ビュー」でHTML言語を使わずに可視的に内容を編集できます。

次は実際にブロガーの記事でGmailで送られて来たメッセージをコピペで添付した部分のHTMLコードの一部になります。 改行一つにあたる部分なので文字のフォーマットも必要なくHTMLなら「<div><br /></div>」と簡単に済むのですが、がコピペされた部分には<span>タグで無駄な設定が付け加えられていました。

例:

<div>
    <span style="color: #455a64; font-family: Roboto, arial;">
      <span style="font-size: 14px;"><br /></span>
  </span>
</div>

HTMLに全く興味がないのであればこのままにしておいても良いのかも知れませんが、こういった余計な設定が付加されたHTMLタグがページ内に沢山あると、ページの保存サイズが大きくなる他、ブラウザー側で読み込む際の不必要な処理が発生して読み込みにかかる時間にも影響が出てしまいます。

HTMLの知識が少し必要になりますが、一般的なページでもHTMLで確認して余計なコードを削除することで効率の良いページになるはず。


既知の問題と制限

本アプリは、ブロガーコンテンツの編集に「Google APIs」の「Blogger API v3」の機能を使っている為、本アプリの機能は「Blogger API v3」によって提供されるサービスの可用性や仕様によって制限されます。


Blogger APIの公式のドキュメントでは利用制限などに関する公式の記載が見つけられない為、非公式な情報になりますが、Blogger API v3の利用にあたっては:

  • APIコールは１日あたり1000回まで、
  • １日に新規作成できる投稿の数は最高100まで、

といった制限がある様です。


更新履歴

0.1.x ～

バージョン  更新内容
ブロガー エディタ 〈HTML〉0.1.x+ アイコン
Android     iOS
0.1.2
  • HTML編集画面の入力を修正。
  • HTML表示の末尾の一部が表示されない不都合を修正。
  • HTML編集後の画面ナビゲーションを更新。
( 公開)   ( 公開)
0.1.1
  • AdMobを更新。
( 公開)   ( 公開)

※: 投稿/ページの編集時の挙動がおかしい不都合を修正 中です しました。
0.1.0
  • Appアイコンを更新。
  • ブックマーク機能の更新。
  • Firebase関連の設定を修正する為にバンドル IDを更新。
  • ストアURLを更新。
( 公開)   ( 公開)

0.0.x➡︎0.1.xの更新でストアURLが更新されました。


0.0.x

バージョン  更新内容
ブロガー エディタ 〈HTML〉0.0.x アイコン
Android     iOS
0.0.5
  • ブックマーク機能の更新。
  • ストアURLを更新。
  • ストアURL変更のお知らせをメイン画面に追加。
( 公開)   ( 公開)
0.0.4
  • Appアイコンを更新。
  • 画面ナビゲーションを更新。
  • 設定ページを追加。
  • [iOS] Firebaseの設定を更新。
( 公開)   ( 公開)
0.0.3
  • 使用承諾規約(EULA)ダイアログを追加。
  • Firebase App Checkを導入。
( 公開)   ( 公開)
0.0.2
  • 初回リリース (Google APIのOAuth設定が完了次第利用可能になります。)。
( 公開)   ( 公開)
0.0.1
  • 初回プレリリース。
( 公開)   ( 公開)


コメント

コメントを投稿

このブログの人気の投稿

[Googleクラウド] Application EnginをArtifact Registryに移行しないといけない??

イメージ
「 Google Container Registry (GCR) 」が廃止されるとかで、保存されてりる内容が「 Artifact Registry 」に移動されるといったメールが10日ほど前にGoogleから届いたのですが、「Artifact Registry」って情報を保存してるだけで毎月課金されるサービスだと認識しているのですが、これから毎月いくら課金されるんでしょうか？？ [ 目次 ] Google Couldチームからのメール Artifact Registry を使う場合 Google Couldチームからのメール 平素より Google のサービスをご利用いただきありがとうございます。本日は、貴社の  App Engine  アプリに影響する重要な変更についてご連絡いたします。古い App Engine プロジェクトでは、 Google Container Registry  を使用して、デプロイされたソースコードから作成されたコンテナ イメージを保存している可能性があります。 Google Container Registry は サポート終了 となり、 Artifact Registry  に置き換えられます。したがって、Google Container Registry にコンテンツがある場合は、以下の手順に沿って、App Engine でデプロイフローを自動的に移行できるようにする必要があります。 この変更に関する追加情報は以下のとおりです。 ご注意いただきたい点 App Engine をデプロイする際、Cloud Build はソースコードをコンテナ イメージに変換します。このコンテナ イメージは、Google Container Registry に保存される場合があります。 Artifact Registry は、コンテナ イメージを保存するための次世代サービスであり、リージョン化されたストレージとセキュリティ機能が改善されています。今後、Artifact Registry は App Engine が使用す...
Read more »

『コメ欄』用カスタムCSS - L◯NE風 (ツイキャス) - OBSのブラウザでも使えます。

イメージ
関連サイトの「 kiiのメモ帳 」で公開している『 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS (シンプル版) 』ですが、 『 コメ欄 』のアプリ内表示モードでカメラ機能を使う場合に、吹き出しの背景に映る部分の画像が吹き出しの色と似ていると、コントラストの関係で吹き出し部と背景が同一化してしまうので、吹き出し部に 囲いの線 又は 色付きの影 のどちらかを追加で表示出来る様に変更してみました。 因みに以前のカスタムCSSでは、吹き出しの根元部は「◣」を使って再現していましたが、今回はカール付きで弧を描いているので少し再現度が向上しています。 このページの後方にある 設定 の部分で囲い線と影の他に、文字の大きさや色などをクリックでCSSをカスタマイズする事が出来ます。 カスタマイズ後は カスタムCSS の下にある CSSをクリップボードにコピー をクリックするとカスタムCSSがクリップボードにコピーされます。 [目次] 囲いの枠線と影の例 カスタムCSS LINE風 (コメ欄用) 設定 (Part-1) サンプル 設定 (Part-2) スマホアプリ 『コメ欄』での使用例 影を吹き出しの下方向に表示する方法 更新履歴 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS シンプル版 @ メモ帳 (別サイト) x４バージョン : アイコンサイズ変更可 @ メモ帳 (別サイト) 幅細めバージョン : 狭い幅で表示したい時用 @ メモ帳 (別サイト) 『コメ欄』用カスタムCSS : 吹き出しの周りに枠線又は影の表示が可能 (このページ) 囲いの枠線と影の例 次に吹き出しに囲い線/影を設定した場合のコメント欄のスクショを例のとして貼っておきます。 囲い線と影の色は設定で、違う色にする事が可能なのと、ユーザー名やユーザーI...
Read more »

[OBS] Twitchコメント欄向けCSSカスタマイザー (試作)

イメージ
( Twitch Chat Overlay CSS Customizer Prototype ) Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」をChromeウェブストアで公開していますが、この拡張機能に読み込ませるテスト用のカスタムCSSも必要だと思ったので、Twichのコメント欄 (チャットオーバーレイ) 向けの簡単なCSSカスタマイザーをここに置いておきます。 このページでクリップボードにコピー出来るCSSを使うと、Twitchのチャット欄をポップアップして表示したコメント欄のURLを使って表示するオーバーレイを、マウス操作でカスタマイズする事が出来ます。 [目次] Twitchのコメント欄 (チャットオーバーレイ) カスタムCSS コメント欄サンプル 設定 更新履歴 TwitchコメカスタムCSSテスター サポートページ #Twitchコメカスタム   ( #ツイッチコメ欄カスタムCSS 、 #トイッチコメ欄カスタムCSS ) Twitchのコメント欄 (チャットオーバーレイ) Twitchのライブ配信をパソコンのブラウザで視聴する時にウインドウの右側に表示されるコメント欄を、「チャットをポップアウト」でポップアップすると https://www.twitch.tv/popout/ ユーザー名 /chat?popout= というURLでコメント欄が別のウインドウで表示されます。 配信ソフトの「OBS」のブラウザや、Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」を使って、上記のURLにこのページのカスタムCSSを読み込ませて表示すると、標準のTwitchコメント欄とは違うレイアウトにカスタマイズして表示する事が出来ます...
Read more »

[ツイキャス配信・閲覧支援ツール] キャスポケットツール: 初期設定

イメージ
ツイキャス配信・閲覧支援機能をいくつか搭載したアプリ、 『 キャスポケットツール 』 （ Android ｜ iOS ） を作ってみました。 ツイキャス のユーザーやライブ配信を検索する機能をはじめ、自分のサポート・サポーターを閲覧したり、気になるユーザーを登録してライブ配信の通知を有効にしたりする事が出来ます。 このアプリの機能を使うのには、 アプリを ツイキャスのアカウントに連携 する必要がある他、 Android 13とそれ以前 のAndroidでは、 バックグラウンド処理を有効 にすると、登録した「気になるユーザー」のライブ配信開始の通知を受け取れる確率が上がるので、 ここに『キャスポケットツール』を使うのに 最低限必要な初期設定 をメモしておきます。 [目次] キャスポケットツールの機能 初期設定 バックグラウンド処理の有効化 iOS Android 13とそれ以前のAndroid 備考 #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ キャスポケットツールの機能 メイン画面 現時点では次の機能が搭載されていて、アプリのメイン画面から選択する事が出来ます。 ライブ配信検索 : ライブ...
Read more »

Flutter備忘録: 公開アプリのバンドルIDの更新

イメージ
Google PlayとAppストアで公開しているアプリのバンドルIDを更新しないといけなくなってしまったのですが、その時の工程をここにメモしておきます。 どちらのストアでも、アプリは「バンドルID」で識別されいて、バンドルIDが違うと別のアプリだと認識されます。 また、既存のアプリのバンドルIDを変更する事はどちらのストアでも出来ないらしいので、新しいバンドルIDでアプリを新規登録する必要があります。 バンドルIDは。一度設定したら普通は変更する必要はないのですが、今回はアプリにFirebaseを導入する際に、Firebaseのツールが正しく動作せず、泣く泣くアプリのバンドルIDを変更せざるを得なくなりました。 結論としては、Google Playの場合は至って簡単で、 新しいバンドルIDでアプリを新規で登録した後、古いアプリの設定を更新すれば良かったのですが、Appストアの場合はやり方が悪いとアプリ公開の審査が通らず却下されるみたいで、まず既存のアプリを非公開にしないと新しいアプリは登録出来ない仕様みたいです。 またバンドルID変更に関するApple公式のドキュメントも見つける事もできませんでした。 [目次] GoolgeのPlayストアでバンドルID変更 AppストアでバンドルID変更 結果 GoolgeのPlayストアでバンドルID変更 Playコンソールのサイドバー Google Playの場合は、 新しいバンドルIDでアプリを登録 古いアプリの公開状況を「非公開」に設定 といった工程で、変更が割とスムーズに完了しました。 1. 新しいバンドルIDでアプリを登録 既存のアプリとは別に、新しいAndroidアプリを新しいバンドルIDで作成してPlayコンソールで登録。 ただ、新しいアプリを同じ名前では登録出来ないので、 「...
Read more »

[OBS] コメントを逆の順番で表示 (ツイキャス/YouTube)

主にOBSの設定についてやツイキャス用のカスタムCSSを公開している別サイト、 『 kiiのメモ帳 』 で、配信のコメント欄のコメントを逆の順序で表示できないかという質問がありました。 ツイキャスだと新しく投稿されたコメントはコメント欄の一番上に表示されて、新しいコメントから順に上から下に表示される仕様になっています。 コメントを逆順で表示した場合、新しくコメントが頻繫に追加されてコメント欄が動いている場合はまだ良いのですが、動いていない場合だと上下にあるコメントのどちらが新しいのか紛らわしくなってしまいます。 そういう理由で 『kiiのメモ帳』 で公開しているカスタムCSSにはコメントの表示の順番を逆にするオプションは付けていません。 でも、これはあくまでも個人的なこだわりで、逆の順番で表示する事で個性を出したいと思う人もいるかもしれないので、上記の質問の解答をここに記事としてメモしておきます。 [ 目次 ] ツイキャスのコメントオーバーレイ YouTubeのコメントオーバーレイも逆の順番で ツイキャスのコメントオーバーレイ ツイキャスのコメント欄の場合は、「tw-comment-list-view__scroller」クラスのDIVタグの下にある無名のDIVタグの中にコメントが並ぶレイアウトになっています。 (👉「 ツイキャスのコメント欄の構造 (メモ帳) 」) なので、 既存のカスタムCSSの最後に次のCSSを加えると コメントが逆の順番で (新しいコメントが一番下に) 表示される様になるはずです。 . tw-comment-list-view__scroller > div { display: flex; flex-direction: column-reverse; height: 95%; /* 最新コメントがはみ出ない様に必要 */ } . tw-comment-list-view__scroller { transform: none !important; /* 下へスライドするアニメーション効果を無効化 */ }...
Read more »

キャスポケットツール: 検索の巻 (ツイキャスのユーザー検索とライブ検索)

イメージ
Googleプレイで公開中の キャスポケットツール の 検索機能 の説明をここにメモしておきます。 [目次] 検索結果の上限 ユーザー検索 ユーザー検索結果 ライブ配信検索 ライブ検索結果 #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ 検索結果の上限 「 ライブ配信検索画面 」、又は、「 ユーザー検索画面 」の右上にあるアイコン「 」で検索結果の上限を選択できます。 右上にある「 」ボタンをタップすると検索結果の上限を、30、60、80、100の中から一つ選べます。 ユーザー検索 ツイキャスのユーザーをキーワードで検索する事が出来ます。 「検索キーワード」の欄にキーワードを入力した後に、キーパッド右下の [完了] 、 又は、 をタップすると (使っている日本語入力方法 (IME)によって多少異なります)、 「サーチ」 ボタンがオレンジ色に変わって、...
Read more »

ツイキャスで他の人がサポートしている人って見えますか？ (キャスポケットツール)

イメージ
[ 目次 ] 知恵袋の質問 アンサー: キャスポケットツール 例: キャスくんのサポートリスト 知恵袋の質問 Yahoo知恵袋に次の様な質問があったのですが: 自分がツイキャスで誰をサポートしているかって、他の人から見えちゃいますか？ 誰かは見えなくても、何人サポートしてるとか見えますか？ (2020/6/4) 0:29 ツイキャスで他人がサポートしてる人って見ることは出来ますか？ (2016/11/28) 11:18 ツイキャスについてです 自分のサポーターは周りから見られるのは知っています 自分がサポートしている人は周りから見れますか？（僕がサポートした人以外） また見れないとしても僕が何人サポートしているかは周りに分かりますか？ (2015/11/21) 17:40 ツイキャスの 公式アプリや公式サイト では、各ユーザーのサポートの一覧が「サポート欄」で確認出来る他、(ログインが必要になりますが) 自分がサポートしているユーザーの一覧も確認する事も可能です。 しかし、他のユーザーがサポートしているユーザーの一覧は、公式のサイトや公式アプリでは確認出来ない仕様になっています。 でも、「誰をサポートしているか」という情報が非公開になっている訳ではなく、公式サイトの情報から全てのユーザーの「サポート欄」をくまなく確認していけば、理論上は「誰が誰をサポートしている」かを調べる事は出来ますが、かなりの時間とデータ量が無駄になるでしょう。 でも、実際は、無料アプリで「誰が誰をサポートしている」の一覧を簡単に確認する事が出来ます。 アンサー 無料Android/iOSアプリの「 キャスポケットツール 」で、他のツイキャスユーザーがサポートしているユーザーの一覧が確認出来ます。 👉 キャスポケットツール サポートページ ...
Read more »