ios safariでのスクロールバー表示について
※ご注意：ios Safariでのスクロール問題を可決するための記事ではありません。 iosのsafariで親要素幅を子要素がはみ出す場合にスクロールバーを常に表示させると、慣性スクロールが効かなくなります。 MacとiPhoneのSafariでは、スクロールの挙動が違うので戸惑ってしまう方も多いと思います。 これを解決するために時間をかけるなら、仕様とするなり、分からせUIを実装するなりした方が結果的に良いですね。
.outer{ width: 95%; margin: 0 auto; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .outer::-webkit-scrollbar { background: #666; } .outer::-webkit-scrollbar:horizontal { height: 5px; } .outer::-webkit-scrollbar-thumb{ background: red; } .inner{ width: 2000px; padding: 2em; background: #ccc; }
outerクラスの-webkit-overflow-scrolling: touch;はsafariでのスクロールに慣性を与えてくれます。
.outer{ width: 95%; margin: 0 auto; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; //これ }
しかし-webkit-overflow-scrolling: touch;を使用すると::-webkit-scrollbarの設定が無視されてしまうんですね。
ios safari以外では、スクロールバーが表示されていてもスクロールに慣性が効いているので、開発ブラウザからiPhoneで確認すると違和感があります。
以前から問題としてアップデートをきたしていましたが、ios 12のSafari 12でも修正はありませんでした。 MacとiPhoneでスクロールの挙動が違うのは、Appleが想定するモバイルデバイスでのスクロール体験はこれがベスト（仕様）ということでしょう。
MacOS Xでスクリーンショットを撮る方法と保存先を変える方法
ドキュメント（マニュアル）作成時にお世話になるスクリーンショット（スクリーンキャプチャー）機能。ちょっと設定を変えるたびに設定方法を検索しているのでここにメモしておきます。
MacOS Xでスクリーンショットを撮るショートカットキー
基本的にはショートカットキーでスクリーンショットを撮る。キーは以下の通り。
画面全体を撮る
Command + Shift + 3
マウスで範囲を選択して撮る
Command + Shift + 4
ウィンドウを選択して撮る
Command + Shift + 4でカーソルが変わったらspace
これらを押す（実行する）とデスクトップに.png形式で保存される。
ファイル名を変更する
通常「スクリーンショット 2018-09-27 12.00.00」のようなファイル名で保存されますが、これを変更するにはこちら。
「スクリーンショット」部分を消す
% defaults write com.apple.screencapture name ""
「スクリーンショット」部分を他の名前に変更する
% defaults write com.apple.screencapture name "screencapture"
デフォルトに戻す場合は「screencapture」部分を「スクリーンショット」に設定しましょう。
日付を消す
% defaults write com.apple.screencapture include-date -boolean false
日付をつける場合
% defaults write com.apple.screencapture include-date -boolean true
SystemUIServerを再起動
ファイル名の指定が完了したらSystemUIServerを再起動しましょう。これで設定が反映されるはずです。
% killall SystemUIServer
保存形式を変える
上記で保存されるファオーマットを変えたい場合は、ターミナルを起動してコマンドラインで設定します。
jpg形式
% defaults write com.apple.screencapture type jpg
gif形式
% defaults write com.apple.screencapture type gif
tiff形式
% defaults write com.apple.screencapture type tiff
pdf形式
% defaults write com.apple.screencapture type pdf
png形式（デフォルトに戻す）
% defaults write com.apple.screencapture type png
SystemUIServerを再起動
フォーマットの指定が完了したらSystemUIServerを再起動。
% killall SystemUIServer
シャドウ無しのウィンドウスクリーンショットを撮る
ウィンドウを選択してスクリーンショット撮ると、ウィンドウのシャドウも一緒に記録されますが、このシャドウを除外する場合はこちら。 これもコマンドラインで設定します。
ウィンドウのシャドウを除外
% defaults write com.apple.screencapture disable-shadow -boolean true
SystemUIServerを再起動
% killall SystemUIServer
ウィンドウのシャドウを含める（デフォルトに戻す）
% defaults write com.apple.screencapture disable-shadow -boolean false
Re:SystemUIServerを再起動
シャドウ有無の指定が完了したらSystemUIServerを再起動。
% killall SystemUIServer
保存先の変更
通常スクリーンショットはデスクトップに保存されますが、これを変更したい場合はこちら。
例：「~/Pictures/sc/」に保存する
% defaults write com.apple.screencapture location ~/Pictures/sc/
/Pictures/sc/の部分をお好みで変更しましょう。
デスクトップに保存する（デフォルトに戻す）
% defaults delete com.apple.screencapture location
Re:SystemUIServerを再起動
保存先の指定が完了したらSystemUIServerを再起動しましょう。
% killall SystemUIServer
cronの設定方法
cronの設定するたびに調べてしまうのでメモしておきます。
crondが起動しているか確認
念のためのcrond起動確認。
# /etc/rc.d/init.d/crond status
crond (pid -----) を実行中...
実行中...とメッセージが返ってきたならクリア。
crontabでcron操作
crontabコマンドでcronを操作。
# crontab [ -u ユーザ名 ] { -l | -r | -e }
各オプション
- -u：cronを設定するユーザーを指定
- -l：cronに登録されている内容を表示
- -r：cronに登録されている内容を消去
- -i：cronに登録されている内容を消去（削除の前に確認）
- -e：エディタを起動してcronを編集する
-eと-lはキーが近いので間違えないように注意。
cronnoの設定
以下のコマンドでcronnoの設定を行う。
# crontab -u root -e
「この日付のこの時刻にこのコマンドを実行」という命令書式。
分 時 日 月 曜日 ＜実行コマンド＞
日付・時刻・曜日には以下の値を設定する。 - 分：0〜59 - 時：0〜23 - 日：1〜31 - 月：1〜12 - 曜日：0〜7 (0と7が日曜)
固定指定
0時0分になる度に実行される例。
0 0 * * * echo "hello world"
間隔値指定
30分毎に実行される例。
*/30 * * * * echo "hello world"
リスト指定
6時、12時、18時〜23時0分に実行される例。,(カンマ)で区切ってリスト指定。-（ハイフン）で範囲指定。
0 6,12,18-23 * * * echo "hello world"
設定ファイルの確認
指定・保存が終わったら設定内容を確認して問題がなければ完了。
# crontab -l
iOS版Safariで検索フィールドのスタイルをリセット
inputタグのtype属性でtype="search"を指定すると、検索テキストフィールドが作成されるます。iOS版のSafariで、このtype="search”をCSSで整形してものテキストフィールドをうまくコントロールできないことがしばしば。
searchのtype属性を持つinputタグを整形するためのCSSをメモします。
inputのスタイルをリセット
iOS版のSafari独自の解釈でスタイリングされているinputタグのCSSを整形します。
sassでリセットする
@include box-sizing(border-box)を指定する。-webkit-appearance: none;を指定する。- 疑似要素
-webkit-search-decorationにdisplay:noneを指定する。
input[type="search"] { @include box-sizing(border-box); -webkit-appearance: none; &::-webkit-search-decoration { display: none; } }
以上の指定でコンパイルすればOK。
CSSでリセットする
-moz-box-sizing: border-box;を指定する。（Firefox用）-webkit-box-sizing: border-box;を指定する。（Safari,Chrome用）box-sizing: border-box;を指定する。-webkit-appearance: none;を指定する。（Safari,Chrome用）- 疑似要素
-webkit-search-decorationにdisplay:noneを指定する。
input[type="search"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; } input[type="search"]::-webkit-search-decoration { display: none; }
この指定が読み込まれるとリセットされます。
表示確認
スタイルを適用する前と適用後の比較。思い通りの表示になりました。
適用前
適用後
補足
Safari,Chrome用、Firefox用と、ベンダープレフィックスを書いていますが、モダンブラウザ（最近のWebブラウザ）のCSS3のプロパティはベンダープレフィックスなしでも問題ありません。 IEやアップデートされていないブラウザなどに対してベンダープレフィックスでCSS3のプロパティ書かなければいけいのが現状です。
この辺の事情を踏まえて、適宜ベンダープレフィックスを使用したいですね。
macでKindle電子書籍の作成（epubから.mobi）
Amazon以外で購入した電子書籍やPDFをKindleで読むためのメモ。 Macのターミナルからkindleのファイル形式「.mobi」ファイルを生成する手順を説明します。 ※追記あり
KindleGen 2.9の入手
Kindle 出版プログラムから「KindleGen 2.9」をダウンロード。 ※本記事投稿時のバージョンは2.9。
追記
2018年9月27日現在、上で紹介したKindleGen 2.9のダウンロードページがなくなっているのを確認。 日本語のサポートがあるかは不明だが、以下よりKindleGen 2.9の入手は可能。 https://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000765211
(追記ここまで)
KindleGenのインストール
ダウロードしてフォルダに移動して、「/usr/local/bin」に「kindlegen」をインストール。
// ダウロードしてフォルダに移動 % cd /Users/ユーザー名/Downloads/KindleGen_Mac_i386_v2_9 // /usr/local/binに「kindlegen」をコピー % cp kindlegen /usr/local/bin/kindlegen // インストールされているか確認する % kindlegen -varsion
デフォルトの言語設定はENとなっているので、お好みで言語設定。
日本語に設定するなら、$ kindlegen -locale jaとたたいてあげればOK。
mobiファイルの作成
インストールが確認できたら、epubファイルがあるディレクトリに移動します。
移動後、$ kindlegen 電子書籍タイトル.epubとたたいてあげると、同じディレクトリに「電子書籍タイトル.mobi」が生成されます。
$ kindlegenと打ち込んだら、ターミナルウィンドウに「電子書籍タイトル.epub」をドラッグ。
自分のKindle端末に送る
作成した.mobiファイルをメールで自分のKindle端末のアカウント（username@kindle.com）に添付して送信。
自分のKindle端末のアカウントはAmazonの「アカウントサービス > コンテンツと端末の管理」の「端末」タブから確認できます。
送ったKindle端末のライブラリを確認してみましょう！
この「kindlegen」は、epub、html、opfファイルをmobiファイルに変換できるので、もう一歩踏み込んだKindleの使い方を楽しめそうです。
電子書籍やウェブページをKindleに入れて持ち運びたいと考えている方は、ぜひお試しください。
今回使用した端末はこちら
Kindle Oasis (Newモデル) を使ってみて
以前、タブレット用途も兼ねてKindleFireを使っていました。 それなりに重く厚みがあって、iPadの足下にも及ばないタブレットとしてのパフォーマンスとUIでした。 いつだったかほこりを被っているのを見て以来、今どこにあるのかも思い出せない始末です。
しかしiPadで読書をするのは手が疲れる、、、 淡い期待を込めて、昨年末にKindle Oasis (Newモデル) を購入しました。
結果、とにかく活字が好きになった。
このKindle Oasis (Newモデル) はとにかく軽いです。 そしてフロントライトのおかげで紙の本を読んでいるような体験ができます。 文字を「読む」ことに特化した端末。 シリーズものの物語を一気読みしてしまいました。 同じ作品をまとめて表示する「シリーズごとにまとめて表示」は、まさに時間泥棒。（対応していない本もあるらしいです）
カタログには「1日30分使用した場合、1回の充電で数週間利用可能」と書いてありますが、1〜2h/日の読書でも1〜2週間は充電の必要がないのもうれしいです。
所々で不評を買っている純正ファブリックカバーは確かに外れやすいですが、持ち運ぶ時しか使用しないので大変重宝しています。 ※現在は取り扱いを中止しているようです。
これに手書きのメモ機能が備わったら、電子ペーパー端末としての完成形と言えるのではないかと思います。
気になる点は・・・
マンガを読むときに画面の大きさとページ送り時のもたつきがある 連続したページ送り（物理ボタン）に反応しないことがある 充電用のポートがmicroUSB（Type-Cポートだったら良かった） こんなところでしょうか。
ぜひぜひおすすめしたい端末です。
macのターミナルに「You have mail」と言われたときの対処法
macのターミナルに「You have mail」と言われたときの対処方法をメモ。
% mail Mail version 8.1 6/6/93. Type ? for help. "/var/mail/username": 4 messages 4 new >N 1 MAILER-DAEMON@****. Thu Feb 8 10:40 90/2975 "Undelivered Mail Retu" N 2 MAILER-DAEMON@****. Thu Feb 8 10:40 91/3422 "Undelivered Mail Retu" N 3 MAILER-DAEMON@****. Sun Feb 11 00:14 91/3449 "Undelivered Mail Retu" N 4 MAILER-DAEMON@****. Sun Feb 11 00:14 90/2983 "Undelivered Mail Retu" ?
未読メールを読む場合は、?のあとにメールの番号をタイプしてEnterキー。
消す場合には?のあとにd *とタイプしてEnterキー。
終わったらq Enterで抜けましょう。
Macでログイン･ログアウト画面が英語になってしまった時の対処法
Macでログイン･ログアウト画面ダイアログボックスの表示内容が突然英語になることがあります。OSをアップデートするとこの状態になることがありますよね。 英語になってしまったダイアログボックスの表示内容を日本語に戻す方法はこちら。
ターミナルを使う
まずはターミナルを起動します。
Spotlightにターミナルと打ち込むと、「ターミナル」がヒットするので、ENTERで起動します。
ターミナルが起動したら、表示されている$のあとに、「sudo languagesetup」とタイプしてENTER。
実行時にパスワードを聞かれるので、管理者パスワードをタイプしましょう！
パスワードを入力したらENTER。
するとこのようなリストが出てくるので、「6) 主に日本語を使用する」に設定しましょう。
日本語に該当する6とタイプしてENTER。
するとターミナルが「System Language set to: ja」と応答します。 締めに$のあとに「exit」とタイプしましょう。
「プロセスが完了しました」とメッセージが出れば設定は完了です。
確認してみよう
再起動してダイアログの表示を確認します。 治っていない場合にはもう一度この手順を繰り返せばだいたい治ります。
経験から、1回目のlanguagesetupでログアウト時のテキストが日本語になります。
再起動してみると、ログイン時のテキストがまだ英語なので、もう一度languagesetupを繰り返す。もう一度再起動するとログイン時のテキストも日本語になっているはずです。
input,textareaのCSSをリセット -iOS Safari -
iOS SafariやFirefoxのフォーム要素にCSSでデザインを設定しても狙った通りにならないことがあります。 これはユーザーCSSを無視してブラウザのデフォルトスタイルが優先されるからですね。
appearanceにベンダープレフィクス（-webkit-）をつけて、値をnoneにすれば初期化できます。
input,textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: none; max-width: 100%; }
ウィンドウのスクリーンショットからシャドウを消す
COMMAND+SHIFT+４を押してから、SPACEキーを押すとカーソルがカメラマークになってウィンドウのスクリーンショットを撮れます。
このとき、ウィンドウのシャドウも一緒に記録されてしまいますが、ターミナルから下のコマンドを実行すると、シャドウ無しのスクリーンショットが撮れます。
% defaults write com.apple.screencapture disable-shadow -boolean true
$ killall SystemUIServer
もとに戻したい場合は以下のコマンドを実行します。
% defaults write com.apple.screencapture disable-shadow -boolean false
$ killall SystemUIServer
