Raspberry Pi に Chromium OS をインストールしてみた

はじめに

Chromebook のことを調べているときに、ラズパイに Chromium OS ってインストールできるのかなとふと思いついて調べてみたらできることが判ったので試しにやってみました。

インストールイメージのダウンロード

FydeOSのRaspberry Pi用Chromium OSのページからインストールイメージをダウンロードします。この記事を書いたときのインストールイメージは chromiumos_image_r86r2-rpi4b.img.xz でした。

インストールイメージをSDカードに書き込む

Raspberry Pi Imagerを使いました。Raspberry Pi Imagerは対象のSDカードに以前別のOSをインストールしていたりしてパーティションが分けられているような場合でも適切に作り直してくれるので、圧倒的に楽になりましたね。

起動・初期設定

書き込みが終わったSDカードをRaspberry Piに挿して起動するとすんなりChromium OSが立ち上がりました。初期設定として、言語・キーボードを選択して無線LANの設定をしたらすぐに使えるようになりました。

Linuxを使えるようにする

せっかくなので Linux を使えるようにします。Chrome OSはLinuxカーネルを使ったディストリビューションの1つという説明をさせることがありますが、ここで言うLinuxはChrome OSの素の部分のことではなく、裏で起動される仮想マシン上のもののようです。

7.5GBのディスク領域が推奨されます。

64GBのSDカードを使っている場合は、余裕でLinux用の空き容量がありました。

インストールは簡単です。ユーザ名とディスクサイズを指定して数分待つとターミナルが起動します。仮想マシン上で動いているのは Debian なので、 apt でパッケージをインストールできます。

Emacs もこの通り動きます。

日本語入力

少し前までのバージョンだと日本語入力にはいろいろと不具合があったようですが、今回インストールしたr86r2ではあまり不都合を感じませんでした。

1つ問題だったのは、Linux ターミナルから開いたウィンドウ上では日本語入力できなかったことです。例えば、ターミナル上で開いた Emacs では日本語入力できるが、別ウィンドウとして開いた Emacs では日本語入力できない、といった具合です。

おわりに

インストール自体は簡単でした。

Chromium OS では Google Play から Android アプリをインストールすることはできないので、アプリケーションの追加は Chrome Store からか追加インストールした Linux システムからということになります。

Chromium OS の軽さは魅力ではありますが、実用ということであれば、やはり Raspberry Pi OS を選択することになりそうです。

簡単なプログラミング用語

こんにちは。開発担当のマットです。

私の初めての仕事は15歳の時でした。父の会社で、紙資料（パンフレットなど）を折りたたむ役でした。毎日8時間、紙を印刷して折りたたんで折りたたんで、フォルダーに綴じてをやっていました。つまらない仕事で時給はたったの 500 円でした。その後、日本に移住して保育園で働きながら日本語を必死に勉強して、翻訳や通訳の仕事もやりました。

そして、途中で私はプログラミングに憧れました。ソフトウェアの翻訳の仕事をしていたら自分でもソフトウェアを作りたいな！という気持ちになりました。ただ、その翻訳の仕事で多くの言葉に初めて出会いました。日本語でも英語でもないような言葉・・・英和辞典で調べても、どうしても理解できないプログラミング用語。

この記事でその用語をできるだけ簡潔でわかりやすく説明したいと思います。プログラミングは幅広い分野なので主にウェブアプリケーションを中心に説明しますが、ご興味があればぜひお読みください！

とても短い辞典ですが・・・

API

Application Programming Interface
アプリケーション通しの通話窓口ですね。

例えば、Youtube に動画をアップすると自動的にTwitterに投稿する、という設定があるとしましょう。それを成し遂げるにはYoutubeはTwitter のサイトを開いてテキストボックスにメッセージを入力し「ツイート」ボタンを押しているわけではありません。

実は Twitter が裏で API というウェブページ（みたいなもの）を用意しています。 Youtube は特定の情報を添えて（認証データ、送りたいツイートの内容）、そのページにアクセスするだけでTwitter がそれを処理してツイートを投稿してくれます。

つまり、Twitter の API は他のアプリケーション（YoutubeやFacebookや個人が作ったサイトやゲームでも） が Twitter に仕事をお願いできるところです。

ウェブサイトだけではなく、ソフトウェア・アプリケーションやハードウェアにも、APIが存在しています。

バックエンド・フロントエンド

ウェブ系のアプリケーションでよく聞く言葉ですが、バックエンドとは、ユーザーが見えない部分です。フロントエンドはユーザーが見える部分となります。

たとえば、ウェブページのレイアウトはユーザに見られる部分ので、そのサイトのフロントエンドです。逆に、ウェブページの内容が保存されているデータベースはバックエンドと言います。

クライアントサイド・サーバーサイド

フロントエンド・バックエンドには似ていますが、クライアントが「ユーザのブラウザ(Chrome、Safari等)」、サーバーが「サービス側のサーバー」と考えたら、わかりやすいです。

例えば、ウェブサイトに都道府県の一覧があるとします。都道府県の順番を並べてあげたいのですが、ウェブページを送る前に並び替えてあげるならその処理はサーバーで行うので「サーバーサイド」です。
もし、ウェブページを送る時に並び替えスクリプトもページの中に埋め込んで、並び替え処理はサーバーではなくユーザのブラウザでされる場合は「クライアントサイド」と言います。

Google の検索結果の順番はGoogle が決めるのでサーバーサイドとなります。
逆に、Wikipedia での一覧リストの順番は（だいたい）ボタンを押せば、ブラウザが並び替えをしてくれるのでクライアントサイドとなります。

キャッシュ

一度完了した処理の結果を一時的に覚えることです。
例えば、通販サイトの場合ユーザがページを見ると今セール中の商品一覧を出したいかもしれませんね。
でも、誰かがページをアクセスすると毎回毎回何がセール中であるかをわざわざデータベースに確認して処理をするより一度だけやってその結果をメモリーは一時間だけ覚えます。

こうすると、データベースへの負荷が軽くなりウェブサイトのスピードが速くなるのでユーザが快適に買い物ができます。

暗号化・復号化

とても賢い数学を使って、データをごちゃごちゃで読めない状態にして（暗号化）、また読める状態に戻す（復号化）ことです。
暗号化の数学処理で指定の数字を使いますので、その「鍵」がないと復号化できません。

ハッシュ

ハッシングとは暗号化のようです。
データをごちゃごちゃに読めない状態にできますが、暗号化と違ってそのごちゃごちゃのデータを復号化できません。

復号化できないので、あまり用途がないように思えますが、アプリケーションがパスワードを保存する時に使えます。
パスワードをデータベースに保存してしまうと万が一ハッキングされてしまった時に漏洩してしまうので、復号化できないのはそれを避けるためです。

逆に、パスワードをハッシュして、ごちゃごちゃの状態で保存します。
そして、ユーザさんがログインする時にそのログインで使ったパスワードをハッシュして照合する。
どちらのごちゃごちゃも一致していると同じパスワードを入力したと判断できます。

MD5 と SHA1 はハッシュ・アルゴリズムの種類です

まとめ

他にもたくさんありますが、用語をちょっとでも紹介できたら嬉しいと思います。ここまで読まれているということはプログラミングに少しでも興味があると思いますので、私が以前に書いた「プログラミング言語とは」の記事もぜひ併せてお読みください！

Solrのリファレンスガイドをビルドする

Solr のリファレンスガイドは、たとえばバージョン8.7のものは
https://lucene.apache.org/solr/8_7_0/index.html
というURLで閲覧できますが、リリース直後などにおいては最新のバージョンに対応したリファレンスガイドが公開されていないこともあります。
そういった場合を踏まえて、Solr のソースからリファレンスガイドを自前でビルドしてみました。

リファレンスガイドのソースは Solr のソースコードの solr/solr-ref-guide 以下にあります。ビルドに必要な手順が Readme.adoc に書かれています。

リファレンスガイドのソースは Asciidoc 形式で記述されているので、Asciidoc を扱える ruby のツール群をインストールします。

gem install jekyll --force --version 3.5.0
gem install jekyll-asciidoc
gem install slim
gem install tilt
gem install concurrent-ruby

ビルドには ivy が必要なので、まだ使ったことが無ければ準備しておきます。

ant ivy-bootstrap

ビルドします。

cd solr/solr-ref-guide
ant default

生成されたHTMLは solr/build/solr-ref-guide/html-site 以下にあります。

各所に DRAFT の文字列が見られますが、オフィシャルのリファレンスガイドとほぼ同じものをローカルに閲覧できるようになります。

Sass の便利な機能「@mixin」の使い方

Sass の便利な機能「@mixin」の使い方について紹介します。

基本的な書き方

基本的な書き方は下記のようになります。

@mixin title_abc($color: #333, $fontSize: 22px) {
  color: $color;
  font-size: $fontSize;
}

.title {
  @include title_abc();
}

.title_light {
  @include title_abc(#777, 20px);
}

「@mixin」で名前と変数、スタイルを定義して、「@include」で呼び出します。

そのまま使いたい場合は、「@include title_abc();」のように引数を渡さずに使い、変更したい場合は「@include title_abc(#777, 20px);」のように引数を渡します。

cssに展開したあとは下記のようになります。

.title {
  color: #333;
  font-size: 22px;
}

.title_light {
  color: #777;
  font-size: 20px;
}

メディアクエリを管理

まず、ブレイクポイントを変数で定義します。
変数で定義しておくことで、あとでの変更が簡単にできます。

$sm: "600px";
$md: "900px";
$lg: "1200px";

@mixinを定義します。
「@content」はスタイルセットを@mixinに渡す機能です。
@includeで書いた内容がこの場所に展開されます。

@mixin media-max($size) {
  @media screen and (max-width: $size) {
    @content;//展開される場所。この場合「.class {color:red}」
  }
}

「@include」で定義した、@mixinを呼び出します。
$lgのところは変数ではなく、「1000px」などのように書くと個別での対応もできます。

@include media-max($lg) { 
  .class {color:red}
}

今回は「$lg: “1200px”」なので下記のように展開されました。

@media screen and (max-width: 1200px) {
  .class {
    color: red;
  }
}

擬似要素で三角形を作る

三角形を作りたい時に用意しておくと便利な@mixinです。
ジェネレータを使わずに作成することができるので、用意しておくと便利です。

@mixin triangle($direction, $width, $height, $color){
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  $widthNum: $width / 2;
  $heightNum: $height / 2;
  @if ($direction == top) {
    border-width: 0 $widthNum $height $widthNum;
    border-color: transparent transparent $color transparent;
  } @else if ($direction == left) {
    border-width: $heightNum $width $heightNum 0;
    border-color: transparent $color transparent transparent;
  } @else if ($direction == right) {
    border-width: $heightNum 0 $heightNum $width;
    border-color: transparent transparent transparent $color;
  } @else if ($direction == bottom) {
    border-width: $height $widthNum 0 $widthNum;
    border-color: $color transparent transparent transparent;
  }
}

.arrow::after {
  // top:上向き bottom:下向き right:右向き left:左向き
  @include triangle(right, 6px, 10px, blue);
}

展開されるcssは下記のようになります。

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent blue;
}

remを使用した文字サイズわかりやすくする

フォントサイズをremで指定するときに、1.5remと書くと思うのですが、パッとどれぐらいのサイズかイメージしずらいです。
そのためあらかじめ@mixinを用意しておくとイメージしやすくなります。

@mixin rem($size) {
  font-size: $size + px;
  font-size: ($size / 16) + rem;//既定値を16pxに設定した時
}

h1{
  @include rem(24)
}

p{
  @include rem(16)
}

展開されるcssは下記のようになります。

h1 {
  font-size: 24px;
  font-size: 1.5rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

今回はSassの便利な機能「@mixin」の使い方を簡単に紹介しました！
何かの参考になれば幸いです。

Solrの記事リスト(〜2020年12月)

はじめに

ふと気付けばこのブログの Solr の記事が40本を超えていました。Solr タグで検索していただくこともできますが、もう少し見やすくなるようにトピックで分類して記事タイトルとリンクの形でリスト化してみました。

Prometheus連携

パッケージ管理

JSON Request API

Docker

日付表現

SolrCloudのリーダー選出

SolrCloud

インデックス作成

distinct

その他