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

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

私の初めての仕事は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 はハッシュ・アルゴリズムの種類です

まとめ

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

このエントリーをはてなブックマークに追加
LINEで送る

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

このエントリーをはてなブックマークに追加
LINEで送る

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」の使い方を簡単に紹介しました！
何かの参考になれば幸いです。

このエントリーをはてなブックマークに追加
LINEで送る

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

はじめに

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

Prometheus連携

パッケージ管理

JSON Request API

Docker

日付表現

SolrCloudのリーダー選出

SolrCloud

インデックス作成

distinct

その他

このエントリーをはてなブックマークに追加
LINEで送る

健康診断で見つかったピロリ菌の除菌と検査

前回の健康診断でピロリ菌に感染しているのがわかったのでピロリ除菌を行いました。

朝と夜にお薬を飲むだけ・・・だけどつい忘れそうになります。薬の入ってる紙に日付を書く欄があったので飲む前に記載することでなんとか飲み逃すことなく薬は飲み切りました。薬を飲んでる最中はいつも行ってるスーパーの特定の弁当が塩辛く感じてコロナで味覚障害とか聞いていたので少し戦々恐々としていましたが単純にピロリ菌除菌の薬自体の副作用が出ただけのようです。

その４週間後に除菌判定の検査。これは袋に息を入れるだけなので検査自体は特に負担のかかるものはなかったです。さらに１週間後にようやく除菌判定の検査結果を聞きに病院に向かい結果は良好！除菌できていました！！１度目の除菌で除菌できない場合があると聞いてたので１回目で済んだのは本当によかった。ただ３ヶ月後に今度は便での検査があるのでそれが済んだらようやく本当に除菌完了です。

発病してからの治療より余裕のあるうちに予防をという点でシステム開発と同じですね！

このエントリーをはてなブックマークに追加
LINEで送る