ぼちぼち書くブログ

日記とかうまいもんとかパソコンのことをマイペースで記します。高知市に住んでいるので地元の情報も投稿します。

はてなブログに表を手軽に入力する方法~FirefoxとChromeで動作が違う模様

私が使用しているWebブラウザはFirefoxです。かなり前からずっとFirefoxを愛用していて、一時期Firefoxが激重方向にブレた事があってChromeも使ってみたのですが、しっくり来なくて、その後軌道修正されたFirefoxに戻ってからはずっと安定しています。OperaやSleipnirなんかも使っていた時期がありますが、個人的にはFirefoxがフィットする感じです。(シェアではChromeに負けてますけどね)

そんな私は、現在、はてなブログProをメインブログシステムとして利用しています。細かいところで不満もあるし、Javascriptの塊みたいな構造(実装)は遅いという不満もありますが、概ね良く出来てると思うので当分使い続けるつもりです。

さて本題です。

たまにブログ記事にデータ的な要素を含めたいことがあって、TABLEタグを使った表を入れることがあります。この時私はExcelやLibreOffice Calcとかでちゃっちゃと作った表をコピー&ペーストで表(TABLE)として貼り付けています。

知人から表をはめ込む際に画像ではなくTABLEで行う場合に手軽な方法無い?という話をされて、「そのままコピペすればOK」という回答をしたのですが、どうやら知人の方ではTABLEではめ込む事が出来ないそうで、どうしても画像として表が貼り付けられてしまうとの事。

はてなブログにそんな機能(設定項目)があったかな?
仕様が変更になったのかな?
と思いながら試してみましたが、普段通りTABLEとして貼り付け出来ました。そこでふと、知人はWebブラウザにGoogle Chromeを使っていて私とは環境が違うのを思い出しました。ひょっとしてブラウザの違い?

Firefoxの場合

FirefoxでExcelの表をコピペしたらTABLEタグで埋め込まれた。これは私の通常の認識通り。

氏名 点数
鈴木 90
田中 79
山田 87

Chromeの場合

次にGoogle Chromeで検証。

Chromeで表をコピペしたら画像に変換されて埋め込まれた。なんじゃこりゃ?

f:id:sasapurin:20160221121428p:plain

くどいですが手順を記します。
Excelで表の範囲を「コピー」して、はてなブログの投稿画面「見たまま」から「貼り付け」したところ、自動的に画像がフォトライフにアップロードされて、画像のソースが記事として埋め込まれました。

Webブラウザが画像を自動的にアップロードする動作を初めて見たので、一瞬何が起こったか理解出来なかったのですが、Chromeの場合、表形式の情報がクリップボードにある状態で貼り付けされた場合、表を自動的に画像に変換して画像ファイルをアップロードして画像を表示するソースが埋め込まれる仕様の様です。

ブラウザが勝手にこういう事をするとは考えにくいので、はてなブログの開発者がChromeだけで動作する機能を実装したんじゃないかなと推測します。(サポートの回答待ちです)

検証の結果

自動的に表を画像に変換する機能がChrome独自の実装なのか、Firefoxでも別の操作を行えば出来るのかは、はてなブログの仕様が分からないとどうしようもありません。

また、TABLEとして記入して、表のデータを編集出来るようにしたい場合もあれば、画像でアップロードしたい場合もあると思います。

いずれも用途によっては便利な機能なので、FirefoxでもChromeでもそれぞれの機能を活用出来るのが理想です。問題と感じるのは単に表をコピペした時の動作がブラウザによって違うという点です。

そこではてなブログのサポートに問い合わせをする事にしました。

返事はまだ来てませんが、回答として整理出来たらこのページを更新したいと思います。私の常識的ラインとしてはブラウザで挙動が違うとか勘弁して欲しいんですけどこればかりはサービス提供側の考え次第ですからね。

追記

はてなのサポートから回答が来ました。要約すれば、下記の2点でした。

・ブラウザごとに挙動を変えているわけではない
・ブラウザ自体の仕様によって挙動が違っていると思われる

Excelの表をコピーしてChromeではてなブログの投稿ページに貼り付けした際の挙動、下記2つの動作をブラウザが勝手にやっているとは考えにくいので、はてなブログの記事投稿画面で動作しているJavaScriptを簡単にチェックしてみました。

①表を画像としてアップロードする

②アップロードした画像ファイルをHTMLソースで埋め込む

はてなブログはJavaScriptの塊なのでJavaScriptを無効にしているとほとんど機能しません。tinymce.min.jsというスクリプトが動いている事を確認しました。

TinyMCEと言えば、JavaScriptで実装されたオープンソースのHTML用のWYSIWYGエディタです。どうやらはてなブログの投稿画面にもTinyMCEが使われている様です。

設定にもよりますしプラグインの実装状態にもよりますが、Excelの表をコピー&貼り付けした時にTinyMCEが何かを処理している可能性はあります。ブラウザ毎に違う動作をする実装になっているのかも知れません。残念ながらその環境設定について調べる術を知らないのでこれ以上は諦めることとします。