Chromebook と Google のサービスを使いこなすためのヒント集

BTemplates.com

Search This Blog

Powered by Blogger.

[WordPress] 追加CSSで本文を装飾

※本ブログは Blogger by Google で作ってありますが、こちらは別サイトで使っている Wordpress 関連の記事になります※ ーーー WordPress で作ったサイトをもっと綺麗にしたい!そのために CSS を使いたい、と思って調べていたら、なかなか上手く行か...

Sunday 23 October 2022

[WordPress] 追加CSSで本文を装飾


※本ブログは Blogger by Google で作ってありますが、こちらは別サイトで使っている Wordpress 関連の記事になります※

ーーー

WordPress で作ったサイトをもっと綺麗にしたい!そのために CSS を使いたい、と思って調べていたら、なかなか上手く行かなくて…引っかかるのは断片的な情報ばかりで、しかも途中でエラーも出るし、完結までに何ステップか検索しなければならなかったんですよね。そこで、プラグインの使い方からページへの CSS 適用方法までの覚書を残します。

結論的には私の場合、プラグインを使うことで上手く行きました。


    Contents
  • CSS の編集ごときで、サーバのセキュリティ設定をいじるのは嫌
  • Simple Custom CSS and JS が簡単だったよ
    • CSS の追加
    • CSS の適用
  • プラグインを使う意味
  • おまけ:色見本に使えるサイト

Monday 17 October 2022

[ Chromebook]写真のサイズを縮小する色々な方法 & Web上での画像ファイルの取り扱い


Webサイトに写真を載せる時、Windows や Mac なら画像加工に便利なソフトがあるので、そんなに悩まないかもしれません。でも Chromebook ユーザの人は迷うかもしれませんね。そんな時に役立つ機能やアプリをご紹介しながら、画像ファイルの扱いについて書いて行きます。


Contents

  1. 画像の形式 : JPEG, PNG など
    • ファイル形式が、スマホやカメラ専用の場合
  2. 画像のサイズと解像度 : 〜 KB/〜 dpi など
    • ファイルサイズが、バカでかすぎる
    • WordPress の画像編集機能は、「おまけ」的な感じ
    • Chromebook の Gallery で、簡単にリサイズも
  3. 画像加工の具体的な手順
  4. 画像の著作権


ファイル形式が、スマホやカメラ専用の場合

最初の 2 つは、スマホで撮った画像を使う場合に失敗しやすい点。

Web 上で使用する画像には、基本 JPEG、画質を保ちたいものには PNG を使用します。

  • 写真は JPEG
  • 文字やロゴ、グラフィックは PNG

ところがスマホの設定によっては、保存されている画像が Web 上で取り扱えない形式となっている場合があります(HEIC 形式)。そのままではサイトへアップロードする際にファイルを選択することすらできないので、ファイル形式を変換しましょう。

  • HEIC は Web では使えない

リモートワークツールの記事に、Google Drive を経由させる HEIC → JPEG 変換の方法を書きました。オンライン処理なら、Chromebook ユーザでも使えますよ。


ファイルサイズが、バカでかすぎる

スマホ・カメラで撮った写真は解像度が高く、ファイルサイズも 1 〜 3MB くらいあったりします。

私は Web ページに載せる画像のファイルサイズは、数 10 〜 数百(大きくて 200 〜 300)KB 程度を目安に縮小しています。

  • ファイルサイズは 100KB 前後に抑える

解像度は、Web なら 72 dpi 〜 96 dpi 程度が推奨されています。利用端末の画面解像度に依存します。印刷に使う場合でも 300 〜 350 dpi 程度。

ファイルサイズをあまり小さくしすぎると、解像度が閲覧に耐えられなくなってしまうので、そこは自分で調整します。Squooshなら、劣化具合いを目で確認しながら、リサイズ&解像度を落とせます。

https://squoosh.app/ (Google のアプリです)

Web サーバの契約容量にも制限があるし、それだけではなく、重いページは読込スピードが遅くなります。遅いページだと back ボタンで去る人も多いですよね。Google に検索順位も下げられ、良いことがありません。


WordPress の画像編集機能は、「おまけ」的な感じ

WordPress を使っている場合、スマホで写真をアップロードする時に画像サイズを選ぶこともできます。

そのまま上げようとすると、”元のサイズ: 3 MB” などとバカでかい数字が表示されているので、ここで変えられます。「大」「中」「小」と、大雑把な 3 つの選択肢から選びます。元画像にもよりますが、アイキャッチ画像に使うなら「大」、文中に使うなら「中」、アイコンなら「小」を選ぶと良いかな。

既にアップロードした画像も、WordPress の [ダッシュボード] → [メディア] の「画像編集」から、サイズ変更が可能です。画像のトリミングや回転なども可能です。

ただ、この方法は面倒くさいし、上手く行かないことがあります。

トリミングはトリミングのみで一旦編集を保存しなければならず面倒だし。

画像の回転が上手く行かず、本当は 90 度だけ回転したいのに、どうしても 180 度回転してしまう、といったことも。これは画像が持つ Exif 情報(Exchangeable image file メタデータ)の中に、"Auto-rotation" が含まれていることがあるからです。

後述しますが Exif 情報は最終的に消しておきたいので、トリミングはともかく、「向き」は、アップロード前に正しい状態にしておきましょう。

既に上げてしまったものは、プラグインで直す方法もあります。


Chromebook の Gallery で、簡単にリサイズも

Chromebook 標準の写真プレビュー機能ですが、そこで画像の編集もできます。

※後で手順を載せますね


画像加工の具体的な手順

SEO 上も画像は重要な要素。Google 検索は「画像が何か」だけでなく、その「美しさ」「わかりやすさ」も見ています。単純作業で面倒だなと思いますが、なるべく丁寧にやりたい部分です。

  1. 画像の選定と加工
  2. サイズを Web 用に調整
  3. alt 属性を設定
  4. メタデータ削除


1. 画像の選定と加工

画像はなるべく「明るく、きれいで、見やすい」ものを使用しましょう。


2. サイズを Web 用に調整

アイキャッチ画像: 横 1200 px

文中:横 1000 px (モバイルなら 750 px)

アイコン: 縦横 32 px

容量は 100 KB 前後以内に。


3. alt 属性を設定

それと、「alt 属性」は設定しておいた方が良いです。画像が読み込めない事態も稀に発生するので、そんな時に画像の代わりに表示される文字列です。

「どのような画像を使うべきか」「どのような代替テキストを入れるべきか」は、以下のドキュメントが参考になります。

Google 画像検索に関するおすすめの方法 - Search Console ヘルプ


4. メタデータ (Exif 情報) 削除

スマホやカメラで撮った写真には、「日時」や「場所」、先ほど出てきた「自動回転」などの情報が記録されています。このデータを削除しておくことは、セキュリティ面でも大切です。データを削除することで、ファイルサイズも小さくなります。

知識として一応、書きましたが・・・

実は 2 〜 4 は WordPress の場合、アップロード後に一括でやってくれる”プラグイン”があります。色々ありますが、私はこちらを使っています。

「1.画像加工」だけは、自分で好みに調整する必要がありますね。今はスマホアプリで簡単にできます。そちらはまた別の機会に。


画像の著作権

最後に、訴えられないために必要な「著作権」について。

画像は自分で用意するか、「著作権フリー」のものを使わせていただく、有償のものにはキチンと代金を払う、引用する場合に必要に応じてその旨を記載するなど、"ルールを守って" 楽しい Web 生活を送りましょう!

Windows 使いのための Chromebook Tips


Chromebook に興味がある。だけど、ずっと使って来たのは Windows。そんな自分がChromebook を買って、本当に満足できるかな?という迷いを持つ人は多いと思います。

Windows & Excel の超ヘビーユーザーで、長いこと Windows 環境でシステム開発もしてきた私でしたが、Chromebook への移行は意外とすんなり行きましたよ!必要なのは Chromebook への愛だけです。

最初は 3 万円弱の安いマシンを、とりあえず使ってみたくて買いました。その結果 Chromebook が大好きになったので、皆にも使ってみて欲しいと思いました。

だけど「失敗した」と後悔はして欲しくないし、「これまで Windows でやっていたことを Chromebook でどうするか?」と、いちいち調べながらやり方を確立する必要はもちろんありました。


    Contents
    1. Chromebook を買うべきではない人
    2. Chromebook を検討しても良い人
      • Office が必要だと "思い込んでいる" 人
        • 今まで、自動的に与えられてきたのが Windows だった
        • 今は、Web ブラウザ上で何でもできるようになった
      • Android アプリ開発がしたい人
    3. Chromebook 共通の特徴
      • Chromebook の良い所
        • ユーザを選ばない
        • 起動が速く、充電長持ち
        • たとえ壊れても、すぐにいつもと同じ環境で使える
        • 本体価格ポッキリ
        • セキュリティの面で安心な理由
      • Chromebook への不満
    4. Chromebook を選ぶ上での注意点と、それをカバーする方法
      • ゴミ箱が無い
      • 光学ドライブは無い
      • アフターサポート
      • 自動更新ポリシー
      • パソコンのサポートが終了するとどうなる
      • Chromebook の自動更新ポリシー有効期限
    5. Chromebook を選ぶ上での疑問点
      • Chrome OS と Windows OS との互換性
      • Office との互換性
    6. 開発機として使う場合
    7. 開発環境の準備をどうするか

[Chromebook] Tethering (テザリング)を使う


ずっと一人で家で作業していると、息が詰まる時ってありますよね。カフェや公園にでも行きたい・・・

かといって、フリー Wi-fi を仕事に使うのも怖いし(というか、ダメだと思う)。

そんな時の味方は、スマホの Tethering (テザリング) 機能です。スマホをホスト、Chromebook をクライアントとして、スマホのネットワークを借りちゃいましょう。Chromebook だけでなく、Wi-fi 専用モデルのタブレットなども外で使えるようになって便利ですね。

さあて、スマホとノートパソコンを持って、緑の見えるカフェに行って来ますよ!あ、もちろん画面は見られないようにね。個室が取れると最高なんだがー。好みの席が無ければ、まだ少し寒いけど、外でも。


      Contents
      • 大前提として、ギガと環境が必要
      • Tethering を安全に利用するには
      • 接続手順 1 [Bluetooth 接続の場合] *Android Phone の対応機種のみ
      • 接続手順 2 [Wi-fi 接続の場合] * iPhone の場合
      • Wi-fi 経由する時の注意点 1 -ネットワーク名(SSID)
      • Wi-fi 経由する時の注意点 2 - ID とパスワードの管理


Sunday 9 October 2022

【Chromebookを選ぶ】どこまでできる?Windows から乗換の場合


(2020.6 旧サイトにて公開の記事です)

Chromebook に興味がある。だけど、ずっと使って来たのは Windows。買って、本当に満足できるかな?という迷いを持つ人は多いと思います。

私の最初のマシンは 3 万円ほど。何しろ安かったので、それほど期待もせず、とりあえず使ってみたくて買いました。その結果 Chromebook が大好きになったので、皆にも使ってみて欲しいと思いました。

だけど、「失敗した」と後悔はして欲しくない。私は特定企業の営業マンじゃないので、あくまで中立的な立場からモノを言いますね。

なお私は Mac には詳しくないので(最初のマシンではありましたが、昔すぎ)、以下の記事はあくまで Windows との比較になります。

    Contents
    1. Chromebook を買うべきではない人
    2. Chromebook を検討しても良い人
      • Office が必要だと "思い込んでいる" 人
        • 今まで、自動的に与えられてきたのが Windows だった
        • 今は、Web ブラウザ上で何でもできるようになった
      • Android アプリ開発がしたい人
    3. Chromebook 共通の特徴
      • Pros (Chromebook の良い所)
        • 要は、ユーザを選ばない
        • 起動が速く、充電長持ち
        • たとえ壊れても、すぐにいつもと同じ環境で使える
        • 本体価格ポッキリ
        • セキュリティの面で安心な理由
      • Cons (Chromebook への不満)
    4. Chromebook を選ぶ上での注意点と、それをカバーする方法
      • ゴミ箱が無い
      • 光学ドライブは無い
      • アフターサポート
      • 自動更新ポリシー
      • パソコンのサポートが終了するとどうなる
      • Chromebook の自動更新ポリシー有効期限
    5. Chromebook を選ぶ上での疑問点
      • Chrome OS と Windows OS との互換性
      • Office との互換性
    6. 開発機として使う場合
    7. 開発環境の準備をどうするか

Chromebook が動かなくなった[初期化]


 Chromebook を使っていると、度々不具合に出会います。Windows でもこういうことは無いわけではありませんでしたが、Chromebook にしてから増えたような? 90 年代に使っていた Mac だと、こういうことは日常茶飯事だったけど・・・。

画面が固まったーとか。

起動しなくなったーとか。

調子が悪くなった時は、再起動したり、時間を置いてからまた開いてみます。

すると普通に起動して来て、「ブラウザがクラッシュしました。ページを復元しますか?」的なことを言って来ます。通常はここでほっとする。

だけどある時、画面に線が入った状態のまま止まってしまい、何もできなくなってしまいました。その時は、"Powerwash" という方法で復活させることができました。

Reset your Chromebook to factory settings - Chromebook Help


工場出荷時の初期状態に戻すわけなので、自分がローカルに置いたファイルや、ローカルで管理しているデータ、ノートパソコンのログインユーザデータなんかは、当然消えます。

Google Drive 上にあるデータや、Chrome ブラウザで管理しているデータはローカル管理じゃないので、そのままです。同じユーザでログインすれば使えます。あくまでノートパソコン本体で管理しているデータが消えるだけです。

※そういうわけで、保存しておくようなデータは極力ローカルに置かない方が良いです。

初めて使った時のようにログインユーザを作る所から始めるだけで、初期化してもまたすぐに使えるようになります。Chromebook って何と気軽なのでしょう。


ただ・・・この後、ユーザー辞書登録ができなくなってしまったんですよね・・・。ユーザー辞書の登録内容が消えてしまう、というのは仕方がないのですが、それだけでなく、入力欄がロックされ、何もできない状態になってしまいました。解決策が見つからず、日々の作業効率が落ちてしまったので、新しいのもう一台欲しいな・・・。

(2022.10 追記)

上のユーザー辞書登録の件ですが、今年のいつの段階だったかに自動的に解決されていました。つまりバグっぽい。迷惑極まりないバグだー。

Sunday 25 September 2022

Androidアプリ開発環境を準備【Chromebookプログラミング】


以前に Visual Studio Code を入れた Chromebook に、Android Studio も入れてみました。これでアプリも作れます。

    Contents
  • Android Studio セットアップ手順
    1. システム要件の確認
    2. ダウンロード
    3. インストール
    4. 初期設定
  • Google の無料 Kotlin コース