CKEditor4.5をiPhoneで快適に使う方法

2017-02-21  

最近自作ブログ管理システムのリニューアルをする機会が何度かあってブラウザで動くwysiwygエディタをいくつかテスト導入しました。wysiwygエディタは数年前から導入してるけどいずれもバージョンが古いので新し目のやつに置換したく色々調べた。以下のブログがとてもよくまとまってて素晴らしく参考になりました。

Web業務システムでも使えるWYSIWYGエディタ×10選 hifive開発者ブログ

んで、上記ブログで紹介されているエディタを一通りテスト導入してみたものの、全部「帯に短したすきに長し」なんですよね~(´・ω・`)

散々あれこれ試して結局定番のCKEditorに落ち着きましたw けどJS多すぎで重かったバージョン3の代より現行のバージョン4は比較的軽くて良い感じです(プラグインの数に依存しますが)。PCで使うには無問題。けどiPhoneで使うとなると話が変わってきます。

CKEditor4.5をiPhoneで快適に使う方法

いろいろと調べた結果、iPhone(iOS)でCKEditor4を快適に使うには以下の2つのCSSを設定すればOKな感じ。

.cke_editable img{
width:90px !important;
}

.cke_editable{
    font-size: 20px;
}

 

iPhone+wysiwygエディタでブログを更新するさいに一番厄介なのが「画面が小さい」「変にズームインされる」です。

複数の写真をUPした日にゃ本文書くのが超大変!てことで、CKEditorのTEXTAREA内の画像は強制的に小さくします。それが img{width:90px}の部分。

そして「変にズームインされる問題」。これはiOSの仕様みたいです。標準のサファリでも後入れChromeでも同じ挙動します。フォームに文字を入れようと入力欄をアクティブにすると勝手に画面がズームインして、入力後にちゃんと元のサイズに戻らず「ムキーーーー」ってなるトラブル。あれを防ぐにはフォームのフォントサイズを16px以上にすればOKなんだそう。ってことで、老眼対策も含めCKEditorのTEXTAREA内のフォントサイズを20ピクセルに指定。

21AHIAK9yAYuZaEa.jpg

たったこの2行をcontents.cssにいれるだけでiPhoneでもめっちゃ快適に入力可能になります(-ω☆)

Windows7のCドライブが100%になるトラブル

2017-02-19  

 

E5_nlzKrjGaesyYH.jpg

「WindowsのCドライブがいっぱいになってパソコン使えません」っていうヘルプ要請の電話が来ました。

近年のパソコンってハードディスク容量がいっぱいあるから、仕事で使っているだけのPCで満杯になるなんてまずありえません。特にそのPCはメール・WEB・スカイプ・FAXソフトくらいでしか使ってないやつ。

添付ファイル付きメールを消してもらったりWindowsのDISKクリーンナップ、ブラウザの履歴・キャッシュクリアなどなど、一般的な対処方法を自力でやってもらったけど「残り0%になりました」っていう続報が・・・((((;゚Д゚))))

いくらなんでも、普通に使っててそんな事はありえないので、何かしらの障害が発生してるんでしょう。怪しいのはWindowsのシステムファイルあたり。


てことで、翌日クルマで一時間かけて現場へ。

うむ。確かにCドライブは100%使い切ってて残り0%((((;゚Д゚)))) 初めてみる光景。

linux系ならコマンド一発でどのファイル・フォルダが悪さしてるのか調べられるけどWindows(のDOSコマンド)だと面倒。ってか知らない。

なのでWindowsのフォルダ・ファイル容量を一覧にしてくれるフリーソフトをネットからダウンロード・・・・しようと思ったけどDISK残りゼロなのでそれすら出来ないw

とりあえず不要そうなファイルをちょっとだけ消して無事にフリーソフトを落として実行。

そしたらC:Windows¥Logs配下にCBSっていうフォルダがあって、それが異様に容量食ってた。CBSソニーならよく知ってるけどCBSってナニ?

ググってみたらWindowsアップデートが生成するログファイルで、なんらかの原因で粗大ごみとして残ることがあるんだそう。更に調べたらC:Windows¥temp配下にもcab_なんちゃらっていうログのゴミが大量に!

てことでそれらのファイルを全部消したらDISK空き容量が半分まで復活(-ω☆)

他にもlogsとtempには要らないであろうゴミが山盛りだったけど、要らぬ二次災害を起こしてもアホらしいのでそれらは放置しました。

ひさびさのゲイツトラップでしたわ。

以下はMS公式の対処方法

C:WindowsTemp フォルダーに cab_XXX_X ( X は数字) が生成されディスクの容量を圧迫している場合の対処方法 | Ask CORE

ってことで動画を死ぬほどダウンロードすること以外、今時のパソコンでDISK空き容量が0になるなんて普通はあり得ないので、同じ様な自体に遭遇したら

1.DISK容量を調べるフリーソフトを入れて、どのフォルダが異様にデカイか調べる

2.そのフォルダ名やファイル名でググる

3.たいてい同じ問題で困っている人のページと解決方法が載ってるので参考にして削除

っていう流れをオススメします(-ω☆)


仕事ネタついでに

うちの会社で最も酷使されてるキャノンのA4モノクロレーザープリンタ。一日500枚くらい。うちは年間310日以上稼働の優良BlackBass企業なので年間15万枚くらいですかね?買ったのが確か5~6年前。ざっくり100万枚は印刷した功労者プリンタ。

その功労者もついにガタが来たというか、印字がめっちゃ汚れるようになったのでキャノンに送ってメンテの見積もりをとったら・・・

3万円オーバー((((;゚Д゚))))

たしか2万円ちょいで買ったやつ。修理で3万・・・( ゚д゚)

てことでそれは諦めて新しいのを買うことに。

A4モノクロだと1万円ちょいで買えるんですねぇ。WiFiとイーサネット接続もできるタイプをamazonで購入。

NIX75lU7fPGmHE1d.jpg

キヤノン A4モノクロレーザープリンター Satera LBP6240

修理代金の半額以下で新品が買えちゃう。ものを大事に!とかいっても、結局新しいを買ったほうがいいっていうねぇ。

いやしかし、この手のデバイスは20年前に較べて軒並み半額どころか1/4、ものによっては1/10くらいの値段になってますよね。しかもクリック一つで翌日届くっていう。いい時代です(-ω☆)

 

「文字小さくておっさん泣かせ」スマホサイトの最適な文字サイズは?

2017-02-09  

 

SEdbip8SZMwsy8ZJ.jpg

表題の件。40歳以下の方はスルーしてください(*´ω`*) 40オーバーの皆さんへ。

スマホサイトの文字小さくて見づらくないですか?

あくまでもブラウザ(サファリとかクローム)でみるwebの話です。スマホアプリの話ではありません。iPhoneの場合、iOSの設定で文字サイズを変えられます。OS側で文字サイズを大きくすれば対応してるアプリもたいがい文字が大きくなります。さらにアプリ自体の設定で文字サイズを大きくすることも可能です。なので「アプリ」はそれほど問題ありません。

以下にアプリの例を挙げてみます。

ニュースキュレーションアプリのSmartNews。

aNI4aywtj0VmqXkf.jpg

iOSで文字サイズを大きめに設定してるからSmartNewsの見出しも大きくて良い感じです。

SmartNewsで読売オンラインを開いた画面(19px)

bG8CR151kmpZ6Nsl.jpg

↑以降、画面サンプルの下に一行あたりの文字数を表示しています。この例では一行「15文字」。とても読みやすいです(*´ω`*) 

※見出しの横の(19px)はPCで言う19ピクセルという意味。iPhone7はPCと解像度が違うし、サイトごとに左右マージンが違うので単純計算できないけどおおよそ「570px÷2÷文字数」で計算しています。CSSで指定された正確なpx数ではありません。なおptではなくpxです。

フェイスブックアプリ(15px)

IxusD651iZaokBD3.jpg

これは一行19文字。読みづらくはないけど、ちょっとツライw

twitterアプリ(19px)

E5SEfTOdYKpIyuSm.jpg

これも設定で大きくしてるので15文字。らくらく読めます。


そしてこのエントリーの本題です。

オッサンにはブラウザで見るサイトの文字が小さすぎるぜ!読ませる気あんのかよw

Web版Facebook(10px)

ivaBD7Skmvi97QgT.jpg

アプリ版が19文字だったのに対しweb版になると一気に27文字!!10ピクセル!!こんな小さい文字読むにはiPhoneを50cmくらい離さいないと無理っす(*´ω`*) もともとアメリカの学生向けに始まったサービスとはいえ今の日本ではオッサンが一番使ってるんだからなんとかしてください(*´ω`*)

オッサンと言えば、オレより上の世代も読んでるであろう新聞社の公式サイトも調べてみました(普段はキュレーションアプリ経由で見るから、公式サイトを見ることがない)。

読売オンライン公式web(約13px)

KnBIJ7hMKxSIJ8q8.jpg

アプリでは19pixあったのにサファリで開くといきなり13pxくらい。これはかなりキツイレベルですオレは。

朝日.com公式web(15px)

EQ7KXTe2ETV6p_0_.jpg

一行あたりの文字数は、読売に比べ3文字少ないだけですが、断然読みやすい。

Yahoo!ニュース(約13px)

JYr71q9H1hi3KlQ5.jpg

読売オンラインを同じです。行間がちょっと広いかな?恐らくニュースサイトでは日本トップクラスのアクセス数だと想像しますが、そのサイトがこの小ささ・・・うーーん、オレは一切開かないけど、普段これを読んでいるおじさま達は読み難くないのかしら?

Google(約12px)

M8uBswDAH11tfjkq.jpg

ちなみにwebの神とまで言われるgoogle様は23文字。ちっさいわぁ。ただし「見出し」メインのGoogle検索結果と「長めの本文」とではまた印象が違うんですよね。

THE PAGE公式サイト (10px)

4gBTUXetHvJ7ezBv.jpg

Yahoo!の子会社がやっているニュースサイト。オレもちょいちょい見ますが、ターゲットは明らかにおじさま年代なはず。なのにまさかの10ピクセル!!!これは運営側に反省を求むレベルw

しかも。

上に挙げた大手新聞社やYahoo!ニュールは英数字記号が「全角」です。全角英数字なんてダサくて死んでも使いたくないけど大手老舗ニュースは全角なんですよね伝統的に。

で、THE PAGEを始め以下に載せてるサイトも英数字記号は全て半角です。なので「一行に何文字」と表記してますが文中に英数字が多いと一行あたりの文字数が増加します。

なので、上に載せたThePage26文字~っていうのも二行目はMainichiって半角ではいってるんで一行あたり30文字を超えています。

ちなみに

全角英数字 ABCDEFG12345
半角英数字 ABCDEFG12345

です。また半角英数字はiとWでは横幅が全然違うのでillustとWOWOWでは幅が全然異なります。日本語(と全角)は基本は同じ幅。

話を戻して

TechCrunch Japan(12px)

YNOIQMuh_0eAfM8m.jpg

WEB系のニュースサイトで長年twitterフォローしてサイトを見てたけどこの前フォロー外しました。理由は「文字小さくて読めねw」。この記事を書くにあたって調べたら12px。しかも文中に英字が多いので余計小さく感じるんですよねぇ。

tenki.jp(約13px)

FeI5i2EHqUwmZMIS.jpg

老若男女みるであろう天気情報サイトなのにまさかの13px。

この記事を書くにあたりこうやって数字を出してハッキリ解りました。あくまでもオレの場合ですが13pxはけっこうツライ。12px以下は読む気を失せる。15px以上が心地よい。

番外でアメリカcnn

kwzp9_6c6iRdSckF.jpg

先に書いたように日本語とアルファベットでは全然表示方法が違うので単純に比べられないけど一行に40文字以上ありました((((;゚Д゚)))) でも、英単語ってそれぞれ長さもバラバラなので、なんとなく斜め読みで読めちゃうのかもしれませんねネイティブの人たちは。有名なTypoglycemia、最初と最後の文字が合っていれば人間はたいてい読めるってやつみたいな。


みなさんが今読んでるUNITOROは20pxです。スマホの場合左右に大きく余白とってるんで一行あたり15文字です。

他のサイトよりかなり大きいんですが小さいと俺自身がウザくて読みたくないからです。

更にオレの釣りに至ってはもっと大きくて24pxです(*´ω`*)

Rvx073LWmKPOt70K.jpg

これはUNITOROよりも長文傾向になるので、なるべく読みやすいように大きくしてます。若い人には大きすぎてウザいかもしれませんが高齢者に優しいサイトでありたいのでお許し下さい(*´ω`*)

っても、ちょくちょく文字サイズなどは調整してて、未だにこれがベストってのはなくて模索中です。

なお、iPhoneのサファリの場合URL欄左のアイコンタップするとリーダーモードになります。

s39OoRnxZSG9hgJ7.jpg

これはめっちゃ読みやすい。色の反転もできるし文字サイズもめっちゃ巨大化可能。オレも長い文章読むときはこのモードにしています。これにすると広告も消えて超快適。

けど多くのニュースサイトは広告収入で運営されてるわけで、読み憎さのあまりユーザーがみんなリーダーモードにしちゃったら運営自体立ち行かなくなりますよね。そもそも同じニュースをアプリ版で快適に読めちゃうし。

ってことで、こんな個人サイトでアツク語ってもどーにもならないけど、世の中の(おっさん向け)スマホサイトの文字サイズが軒並みもっと大きくなることを願います(-ω☆)

 

iPhoneの写真がデカすぎて色々困った時はこのアプリで一発縮小

2017-02-06  

年々巨大化するiPhoneの写真。もはやオレの持っているキャノンEOSの最大サイズに迫る勢いです。EOSに迫る!iOSだけに!

んでFBやらインスタやらtwitterやらにアプリ使ってそれらの写真をUPするのは問題ありません。

が、webで使うときはその大きすぎるサイズが時に重荷に。そして向き情報・位置情報などでトラブルが起こることもあります。

iPhoneのカメラアプリが標準で「小さい写真」撮れれば問題は解決するのになぁ。64GBモデルとか128GBモデルを買わせようという戦略としか思えない(*´ω`*)

そもそも、SNSでもwebでも我々がいつもみてる写真の大きさは横幅600ピクセルくらいです。だけどiPhone7だと3024ピクセル×4032ピクセルですよ!5倍もでかい。ファイル容量もwebでみてるのはせいぜい数百キロバイトなのに元のiPhone写真は1~3メガバイトあります。

ブログにアップするにしても一枚3メガとかちょっとありえない無駄な大きさ。


てことで、iPhoneの写真を小さくするにはいろんな手段がありますが、色々試してる中、これは良い!って思えたのがこのアプリ。その名もズバリ「複数の写真/画像をまとめてリサイズ-一括変換アプリ- for iPhoneを App Store 

AZAscIi9kasOd5Cm.jpg

その名の通り、複数の写真を一発で縮小できます。使い方も超シンプル。アプリを起動して「設定」でどのサイズにするかを決めて、あとはカメラロールっぽい画面で「これ」と「これ」と「これ」って感じでタップするだけ。

m7xuUo4jujrVQEIs.jpg

タップされた写真は赤く囲まれて分かりやすい。あとは「リサイズ」をタップするだけ。

縮小が終わると「次にどうするか?」をきかれます。

※毎度のことながら英語画面になってますが普通はちゃんと日本語で表示されるのでご安心を。

PJbq004EfWa3HQ_i.jpg

「カメラロールに保存」します。

これで指定した小さいサイズ版がカメラロールに保存されます。願わくばこれ専用のアルバムに自動で保存されれば最高ですが。

PCに縮小された写真をコピーしてEXIF情報を覗いてみます。

oydOuqSo3QzmKpZu.jpg

すると綺麗サッパリEXIFは消されていました!

●EXIFが無いことのメリット

・写真の向き情報が消えるので、ブログにアップしたら写真が横向いた(T_T)などのトラブルが無くなる。

・位置情報つきで撮影してても、キレイに消してくれるし撮影日時もキレイに消えるのでプライバシー保護に。

普通にネットに公開するにはEXIFなんて無い方が良いです。

逆にいうとEXIF情報を使ってPCで写真を管理する人には向いてません。

Windowsの画面操作を動画としてキャプチャしてくれる無料ソフト「AG-デスクトップレコーダー 」

2017-02-06  

s7Hc0LUZe4JeRus7.jpg 

Windowsの画面操作を動画で説明してるの見たことありますか?アプリの使い方などを説明するには最適な方法です。オレも「あーゆー風に画面操作をキャプチャするソフトがあるんだなー」「でもお高いんだろうなー」って思ってました。が、ググってみたら無料であるんですね今の時代は凄い!

って、この手のアプリを必要とする人がどれくらいいるか謎ですがw

オレの場合ソフトウェア・アプリを作ったり操作を教える側なので、こんなのが無料で使えるとはめっちゃ嬉しいです。

仕事でよく外国人の相手をするんですが「エラーが出て処理できない」ってメール文章が来ても、こっちは全然わからないわけです。そもそも日本語のエラーなので外人さんも全然わからない。そんなことがあると数年前まではかなり苦労したけど、今の時代は「そのエラースクリーンを写真撮って送って」って伝えると、スマホで写メとって送ってくれます。「Screenshot」でどの国にもたいがい通じるのも凄いw 

とはいえベストな解決方法は外人のお客さん向けに「画面操作方法を動画で見てもらう」です。静止画の100倍、文字の65535倍は分かりやすいはず。外国人向けの動画をYouTubeにアップして「この動画見て」って伝えれば今の苦労は相当無くなるはず。

外国人のみならずパソコンに強くないお客さんへオレが作ったシステムの操作方法を伝えるには電話・メールより256倍は分かりやすいはず。

っていうのは薄々気づいてたけど「画面操作を動画にする」なんていうのはかなり敷居の高いもんだと諦めてたんですよ。最悪iPhoneで画面操作を録画したりもしたけど、片手だとツライw そして、他人にはちょっと見られたくない画面部分もあったりするわけです。


というわけで、この動画キャプチャソフトは凄いです。

  • キャプチャする領域を指定できる(見られたくない部分はカット)
  • エンコードが豊富(独自型式・mp4・avi・wmv)
  • インストール不要(exeファイル直起動可能)
  • 無料

いくら無料でも、この手のソフトって怪しげな国のが多くてインストール時に余計な怖い・ウザいやつをインストールされる可能性もあります。でも、このソフトはそもそもインストール不要なので超安心。ここが最も気にいったポイントです。

以下にサンプル載せてみます。MP4で記録しtwitterにアップしたもの。回線やタイミングによっては画像が荒れ気味になるかもですが、元のファイルはけっこう高画質です。

UNITORO以外の最近の投稿

Recent entries

LNOZsdBsozFuBKN8.jpg

はやり目(ウイルス性急性結膜炎)とかいう病気になった(*´ω`*)

21AHIAK9yAYuZaEa.jpg

CKEditor4.5をiPhoneで快適に使う方法

E5_nlzKrjGaesyYH.jpg

Windows7のCドライブが100%になるトラブル

fRCuQMu7B7G2j5r4.jpg

ローランスHDS3・Tiでついにリアルタイム等深線マップ作成が可能に!?

uF4GDnWEslXvgOD7.jpg

B.A.S.Sエリート第1戦ウィニングルアー

picture from keitai

バレンタインスペシャル

3g_4ErKJATHUKh1n.jpg

2017年のJBTOP50はボートが3種類必要

l2N0atqBA5GYK8L4.jpg

釣り道具をアメリカから輸入したときの関税について

uZHPQ2sq8peb1soI.jpg

久々にダラダラと駄文を書いてみる

SEdbip8SZMwsy8ZJ.jpg

「文字小さくておっさん泣かせ」スマホサイトの最適な文字サイズは?

2016シーズン榛名湖バス釣りオレなりのまとめ7月~11月編

0crVXm8ypaDHEpWs.jpg

八郎潟の放流量と水位がリアルタイムでわかるサイト

_m4pI4GcuBXQRtGL.jpg

2016シーズン榛名湖バス釣りオレなりのまとめ3月~6月編

s7Hc0LUZe4JeRus7.jpg

Windowsの画面操作を動画としてキャプチャしてくれる無料ソフト「AG-デスクトップレコーダー 」

AZAscIi9kasOd5Cm.jpg

iPhoneの写真がデカすぎて色々困った時はこのアプリで一発縮小

ナカバヤシ コレクションケース ミニ ワイド 透明アクリル棚板タイプ ブラックを1/43モデルカー用に買ってみた

oOIlFSnKCnVl5I74.jpg

お気に入りのルアーをディスプレイしてみる?

7JbZkxWrzSWgPkp6.jpg

Dマガジンで実際に読めるページをベストカー誌で比べてみた

15MDtpsjJF1bHHae.jpg

Google Chromeでアメブロが真っ白になるやつの解決方法

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込みについて』

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込み』問題解決に Anker® ポケットサイズ ポータブルワイヤレススピーカーを買った

WTzbkVq7CjCF9yl0.jpg

ひげ剃りの替刃が買えないトラップにはまらないようにamazonで買ってみた

UtWE7vntu7wOS91Y.jpg

2017年JBトップ50第2戦が開催される「弥栄ダム」についての予習

sqnxX2YC4ohzJ1lU.jpg

乾燥と爆風で

hvY3xPNnohpKWI4L.jpg

VW 6代目ポロよりも先にセアト・イビサ登場

t4jfQ1nxccr9lum9.jpg

Google日本語入力がクロームでめっちゃ重い問題を解決

YgLAjHrUCmWc_kYE.jpg

月額432円で170冊の雑誌が読めるDマガジンを契約してみた

0MFccg0zaXtZN5Tq.jpg

VWポロを初めて運転した結果・・・

TLESK3TyFF__QwKU.jpg

VWゴルフ7ネタ『タイヤ周りの異音が解消』

8AZ86eX76capbnmM.jpg

VW新型ティグアンに試乗してきた(-ω☆)

6IOjoBtPFX6wxFC8.jpg

iPhone6S/7でタップが効きづらいやつ→3Dタッチが原因か?

Category

Popular entries 2016

Popular entries 2015

Popular entries 2014