カテゴリー: IT周り

プログラミングに必要な教養など、周辺知識を発信します。

  • Chromeでキャッシュをリセットする方法

    Chromeでキャッシュをリセットする方法

    エンジニアなら普段Webサイト制作やWebアプリ開発をしていていると、ブラウザにキャッシュが残っているせいで自分が加えた変更が正しいのか確認がしづらいことはないだろうか。

    そのときはブラウザのキャッシュを削除すればOKなので、今回はその方法をご紹介します。

    MacBookでChromeをお使いの方は下記を参考にしてみてください。

    • 開発者ツール > ネットワークタブ > キャッシュを無効化 or Disalbe cacheを選択する
    • F12で検証ツールを開いたら、リロードボタンを長押しする > 「キャッシュの削除とハード再読み込み」をクリック
  • MouseCatchでモニター間を移動する

    MouseCatchでモニター間を移動する

    皆さん、お疲れっす。すなです。

    今回は私が最近知ったMacBookのアプリ「MouseCatch」(有料・¥300)をご紹介しようと思います。

    マウスを移動させる手間、、、

    これ、何ができるようになるアプリかというと、ショートカットキーを押すことでマウスをモニター間で移動させることができます。

    私は職場でも家でもモニターがあるので、ノートPCのモニターと外付けの外部モニターの2画面で作業しているのですが、いつも薄ら感じていたモヤモヤが、

    マウスをモニター間で移動させるとき、トラックパッドでわざわざ移動させるの面倒くさいなあ

    と感じていました。

    そこで出会ったのが、この「MouseCatch」(有料・¥300)でした。

    https://apps.apple.com/jp/app/mousecatch/id1625127067

    ショートカットキーでモニター間を移動できる

    これは何ができるかというと、それぞれのモニターに自分で登録したショートカットキーを叩くことで一瞬でマウスがモニター間を移動できるようになります!

    実際にやってみた

    試しにやってみましょう。

    僕がそれぞれのモニターに登録したショートカットキーは下記です。

    • 外部モニターに移動する時は、shift + option + ↑
    • ノートPCのモニターに移動する時は、shift + option + ↓
    MouseCatchの環境設定

    実際にショートカットだけでマウスが移動する様子を見てみましょう。

    最初は外部モニターにあるマウスですが、

    この状態でshift + option + ↓を押すと、マウスが下のノートPCに移動しました。

    更にこの状態でshift + option + ↑を押したら、マウスが上の外部モニターに移動しました。

    ちょい問題

    ただ問題点として挙げるなら、ショートカットキーでマウスが移動したとしてもフォーカス(?)が直前のモニターに残ってしまいます。

    フォーカスが直前の画面に残ってしまっているので、モニターAからモニターBに移動してきて、モニターBでなんらかのキーを押すと、モニターAの方でそのキーが反応してしまいます。

    まあ、これについてはトラックパッドでマウスを移動させてた頃にも起きてた現象なので、ショートカットキーで移動したら、一旦画面のどこかをクリックする的な操作は必要かもですね。

    まとめ

    上記で問題点を一応挙げましたが、個人的にはわざわざトラックパッドに手を移動させなくても済むようになったので、僕はだいぶハッピーになりました^ ^。

    おしまい。

  • MAMP/XAMPPをインストールしたときに入っている機能

    MAMP/XAMPPをインストールしたときに入っている機能

    タイトルの通りです。

    先日、コーチングでプログラミングについてお教えしている生徒さんとのやり取りでXAMPPを扱うタイミングがありました。

    そのときに「MAMP(or XAMPP)って何が入っているんだろ🤔」と疑問に思いました。

    今回はMAMP/XAMPPに何が入っているかを調べました!

    含まれているコンポーネント

    MAMP/XAMPPのインストーラーで表示されるウィンドウを元にまとめました。

    • サーバー
      • Apache
      • MySQL
      • FileZilla FTP Server
      • Mercury Mail Server
      • Tomcat
    • プログラミング言語
      • PHP
      • Perl
    • プログラミング言語(?)
      • phpMyAdmin
      • Webalizer
      • Fake Sendmail

    こんな感じでした。

    感じたこと

    いろいろ入っていることが分かりました!

    正直メインで使うのはApache、MySQL、PHP、phpMyAdminくらいだと思います。

    FTPの1つであるFileZillaも入ってるんですね、知らなかったです😌

    知らないコンポーネントもたくさん入っていて、TomcatやWebalizerは聞いたことがありませんでした。

    3つ目の項目にも「Program languages」が重複していたのは何かの問題だと思います汗

  • CRUDとは

    CRUDとは

    よく聞くCRUDとは何か、整理できてなかったからまとめてみた。

    システムの最低要件

    システムを作るとき、めっちゃ簡単に言うとWebサイトを作るときに最低限必要と言われている要件のこと。

    Create

    CreateのC、「作成」とか「登録」とか表現する。

    Twitterだとツイート機能、ブログだと投稿機能。

    これらがCreateにあたる。

    Read

    ReadのR、「参照」とか「閲覧」のこと。

    サイトを見る(=閲覧)のに必要な機能。

    これがないと何も始まらない感じはある(=なくても良い珍しいシステムもあるかもだけど)。

    Update

    UpdateのU、「更新」のこと。

    一度作ったブログ記事を更新したりできる。

    珍しく(?)TwitterにこのUpdate機能はない。一度投稿したら、そのツイートを描き直すことはできない。

    Delete

    DeleteのD、「削除」のこと。

    間違えて投稿したツイートを削除したり、誤った情報を載せたブログ記事を削除したりするやつ。

    まとめ

    システムに必要な機能の頭文字を取っている。

    機能を指してるだけで、HTTPメソッドとは似ているが全く別物。

    CRUDの中にHTTPメソッドが含まれているイメージ。

  • コンピュータの基本

    コンピュータの基本

    コンピュータは外身のハードウェアと中身のソフトウェアに2つによって構成されている。

    コンピュータは命令とデータをまとめて配置して処理する方法(ストアードプログラム方式)によって作動している。

    ハードウェア

    5大要素

    そのハードウェアは5つの装置によって構成されている。

    • 入力装置
    • 出力装置
    • 記憶装置
    • 演算装置
    • 制御装置

    入力装置

    コンピュータが実行するプログラムを外部から記憶装置に転送する。

    出力装置

    プログラムの実行結果を外部に出力する。

    記憶装置

    主記憶装置(メモリ)と補助記憶装置(HDD、SSD)によって構成されている。これらはプログラムの実行結果を置くために用いられている。主記憶装置は高速で動作し、半導体によって作られている。補助記憶装置は大容量で安価である。

    演算装置

    加算、減算といった計算を行う。

    制御装置

    プログラム中のデータや命令を取り出して、命令に応じて使用箇所を決定する。

    CPU

    現在では演算装置と制御装置を合わせてCPUと呼ぶ。

    ソフトウェア

    ソフトウェアはOSとアプリケーションに分類される。

    アプリケーション

    単にソフトを呼ばれることも。WordやExcelなどが有名。

    OS

    ハードウェアを効率よく管理し、ユーザやソフト開発者が利用しやすい環境を提供する。

  • 物理削除モデルと論理削除モデル

    物理削除モデルと論理削除モデル

    Laravelを勉強している過程で遭遇したワード。DBにあるデータを論理削除モデルを使って削除した。

    物理削除モデル

    DBにあるデータを削除したいとき、普通(?)はこっちの削除を行う。

    名前通り、データを物理的に削除する。

    削除したデータはDBからも削除されているため、完全に削除されて復元することができない。

    論理削除モデル

    こっちはデータを「論理的」に削除する。

    DBに削除フラグを設けて、そのデータを削除するときはフラグをtrueにする。削除フラグがfalseのデータのみ返せば、一見するとデータが削除されたように見える。

    感想

    「なるほどな」と思った。

    データを完全に削除しないから、データを復元できる = 間違えて削除しても大丈夫!みたいな感じです。

    でもデータが増える一方で容量を食いそうだから少し心配だけど、そもそもデータを削除する機会って少なそうだからあまり心配しなくても良さそうだなとも思う。

    あと「論理削除モデル」で調べたら、検索結果がLaravelだらけだった。もしかしたらLaravelでは特徴的なDBの設計方法なのかもしれない。

  • 【ど基礎】仮想化・Dockerについて

    【ど基礎】仮想化・Dockerについて

    仮想化とは

    1台のサーバー上で複数のOSを同時に動作させること。元のサーバーを「物理サーバー」、仮想化されたサーバーを「仮想サーバー」と呼ぶ。

    仮想化でできること

    本来は1台の物理サーバーに対して1つのOSしか稼働させることができないが、仮想化させることによって1つのパソコンで様々なOSを稼働させることができる。

    ソフトウェアによって複数のハードウェアを統合することで、1台のサーバーが複数のサーバーのように振る舞うことができる。

    仮想化のメリット・する意味

    仮想化することによって複数のサーバーを柔軟に分割・統合することができる。

    仮に20%しか使っていないサーバーが5台あったときに、仮想化技術を用いてこれらを統合することができれば、サーバー1台でこれらを賄うことができる。これによってハード代も節約できるし、これに伴う場所代も浮かすことができる。

    仮想化ソフトウェアの種類

    • ホスト型
      • VirtualBox (Oracle)
    • ハイパーバイザー型
      • VMware ESX
    • コンテナエンジン
      • Docker

    ホスト型

    OSに仮想化ソフトウェアをインストールして、その上で仮想マシンを稼働させる。

    ハイパーバイザー型

    ホストOSを使用せず、サーバーに直接インストールして仮想環境を作る。

    コンテナ型

    ホストOSにコンテナエンジン(=仮想化ソフトウェア)をインストールして、その上にコンテナを設置する。

    Dockerとは

    コンテナ技術が特徴的な仮想化ソフトウェア。

    Dockerを使うメリット

    ほかの仮想化ソフトウェアでも同じだけど、環境の設定すらコードで書けてしまうから開発環境を簡単に揃えることができる。複数の人と開発するときにとても便利なのである。

    ほかの仮想化ソフトウェアとの違いはイマイチ分からん。

  • 【Web用語】僕がエンジニアを始めた時に知りたかった用語8選

    【Web用語】僕がエンジニアを始めた時に知りたかった用語8選

    皆さん、こんにちは。

    すなです。

    今回は僕がWebエンジニアとして働き始めた頃に知らなくて困った技術用語8選をご紹介したいと思います。

    どの用語も基本レベルなので、駆け出しエンジニアの読者が少しでも早く現場に馴染める様にと思って書きました。

    これらの用語を知らず上司に呆れられない様に、皆さんも一緒に勉強していきましょう。

    ブラウザ

    ブラウザはWebサイトを閲覧するためにソフトウェアになります。

    いくつか有名なものを筆頭に、以下の様なブラウザが存在します。

    • Google Chrome
    • Microsoft Edge(旧 Internet Explorer)
    • Safari
    • Firefox

    ブラウザはそれぞれ挙動に差異があるため、僕のインターン先では社員が新しく作ったデザインがブラウザごとに違わないかをインターン生が確認するという作業がありました。

    サーバー

    Webサイト制作において「サーバー」といえば、一般に「Webサーバー」のことを指します。

    サーバー(=server)の語源のserveは「提供する」のような意味があります。

    ウォーターサーバー的なノリです。

    サーバー上には様々なファイルが保管されており、ブラウザと通信してファイルを提供します。

    一般に制作したWebサイトを公開するときは、それをサーバーにアップロードしなければなりません。

    リクエストメソッド

    普段の生活では聞き馴染みのないワードかも知れません。

    しかしWeb開発では頻出の概念です。

    Web開発で「リクエストメソッド」と言うときは、一般に「HTTPリクエストメソッド」のことを指します。

    ブラウザは一般にHTTPというルールに従ってサーバーに命令・通信するのですが、そのときに命令の種類がリクエストメソッドになります。

    リクエストメソッドは特に頻出な以下の4つを筆頭に、全部で10種類存在します。

    • GET(= 取得)
    • POST(= 送信)
    • PUT(= 更新)
    • DELETE(= 削除)

    日常でインターネットを使うときはほぼGETとPOSTしか使わない印象です。

    ターミナル

    これはソフトウェアエンジニア上級者になると頻繁に使うソフトウェアになります。

    映画やアニメで見かける、エンジニアが操作している真っ黒な画面のやつです。

    上のいらすとやの画像のまさにそれです。

    「ターミナル」はMacでの名称で、Windowsでは同様のソフトウェアを「コマンドプロンプト」と呼びます。

    どちらもデフォルトでインストールされているソフトウェアなので、パソコンの検索で「ターミナル(Windowsの場合はコマンドプロンプト)」と入力すると使えるはずです。

    パソコンを操作するとき(=指示をするとき)、普段はマウスを動かしてボタンをクリックするなどしますが、ターミナルを用いるとコマンドを入力するだけで同様の操作をすることができます。

    僕はファイルを書くときはVSCodeというエディタを使うのですが、インターン先の先輩はターミナルで操作していました。

    先輩曰くそっちの方が使いやすくなる時が来るそうです、、、(汗)。

    FTP

    File Transfer Protocolの略で、「ファイル(=file)を転送する(=transfer)ときの決まり事(=protocol)」という意味があります。

    サーバーにファイルを転送するとき、みんなが思い思いの方法通信するとめちゃくちゃになってしまうので、このルールに従って通信しましょう、的なのがFTPです。

    現場でも頻繁に使用されているFTPのフリーソフトは以下のようなものがあります。

    • FileZilla
    • FFFTP
    • WinSCP

    ちなみに僕は1番目のFileZillaを長く愛用しています。

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

    Webサイトを開発するときに、その見た目部分と機能部分で分ける考え方です。

    使い方として、HTML&CSSやJavaScriptを扱うエンジニアを「フロントエンドエンジニア」と言います。

    逆にPHPやRuby、Pyhtonなどを用いてサーバー周りの開発を行うエンジニアのことを「バックエンドエンジニア」と言います。

    僕がインターン生のときは、サービスの新しい機能を開発していたのでバックエンドエンジニアでした。

    ローカル環境&本番環境

    こちらWebサイトやWebアプリを開発する場所についての用語になります。

    一般に「ローカル環境」と言うと、自分のパソコン内のことを指します。

    逆に「本番環境」と言うと、実際にリリースしている本番のWebサイトのことを指します。

    新しい機能やサイトを開発するときはいきなり本番環境で開発するのではなく、DockerやVirtualBoxなどを使って自分のパソコンに本番環境に似た環境を用意します。

    そのローカル環境でまずは開発をして、新しいサイトや機能が完成したらそれを本番環境にアップロードします。

    API

    「Application Programming Interface」の略です。

    ソフトウェアの一部を公開して、他からもそのサービスを使える様にしたものを指します。

    指定のフォーマットに従えば、そのソフトウェアの一部を使うことができます。

    例えばzipcloudという郵便番号データ配信サービスの郵便番号検索APIをプログラムに組んでおけば、わざわざzipcloudで郵便番号を検索しなくても同様の機能が外部からでも使用できる様になります。

    僕もインターン生のとき、バックエンド開発で他社のAPIにたくさんお世話になりました。

    まとめ

    いかがだったでしょうか。

    以上が「僕がエンジニアを始めた時に知りたかった用語8選」になります。

    全て知ってるよ!と言う方もいれば、全然知らない、、、という方も居るかも知れません。

    エンジニアの世界には僕もまだ知らない単語が山ほどあります。

    そんな知らない単語にぶち当たったときは、そのとき勉強してしっかりキャッチアップしましょう。

    ではまた別の記事で会いましょう。

  • 【損します】僕がMacBook Proに外付けキーボードをつける理由

    【損します】僕がMacBook Proに外付けキーボードをつける理由

    こんにちは、すなです。

    今日は僕がMacBook Proを買ったにも関わらず、外付けのキーボードを使用している理由について話したいと思います。

    この記事は、

    • 毎日たくさんパソコンを使う方
    • パソコンが壊れると不便な方
    • パソコンの修理費をなるべく払いたくない方

    向けの記事となります。

    16万円のMacBook Pro購入

    プログラミングブームが起きたちょうど2年ほど前に僕は大学の授業に行くのを辞めて、1人でプログラミングの勉強を始めました。

    大学入学時に買った生協のパソコンを持って、毎日コンビニのイートインに籠っていました。

    プログラミングに興味あるのが分かってきたとある日、僕は大学のパソコンを捨てて、MacBook Proを買うことに決めました。

    それからと言うものの、MacBookの使い心地の良さも相待って僕のプログラミング学習は捗り、ブログもたくさん執筆しました。

    さらに僕は普段ブラウザでサイトを回遊するとき、VimiumというGoogle Chromeの拡張機能を使っているため、マウス操作をほぼ全てキーボードで完結させています。

    僕は普段からプログラミングやブログ執筆をする上に、ブラウザ操作もキーボードを使うので、人一倍キーボードを使っていることに気付きました。

    パソコンが壊れる心配

    当時の16万円のMacBook Proは学生の僕のとってはとても大きな買い物でした。

    24回の分割払いを今でも払っています。

    そんな大事なパソコンのキーボードが壊れて新しいパソコンを買わないといけなくなったらどうしよう。

    修理に出して高額な修理費用を払わないといけなくなったらどうしよう。

    修理に出している間にWebサイト制作の案件が納品に間に合わなかったらどうしよう。

    僕にはこんな不安が浮かんできました。

    実際にたまに「P」や「Shift」キーが上手く反応しないことが過去にありました(なんか直りましたが)。

    この様な不安を払拭するために、僕は「4000円の外付けのキーボードを買う」ことにしました。

    MacBookについているキーボードではなく、外部接続のキーボードを買うことにしたのです。

    外付けのキーボードを購入

    外付けキーボードを買ったことによるメリットはたくさんありました。

    • キーボードが壊れてもMacBook本体を修理に出さなくてもいい
    • どれだけキーボードを使ってもいいという安心感
    • 仕事が中断する心配がない
    • MacBookの修理代よりも各段に安いキーボードの保険

    これらのメリットを4000円で買うことができたと考えると、かなりお買い得だったかなと思っています。

    SANWAのBluetoothキーボード

    ちなみに僕が実際に使っているキーボードがこちらです。

    こちらは僕が購入した当時最新のMac OS “Catalina”に対応していて、かつBluetooth接続なので家のどこからでもMacBookに接続することができます。

    購入したばかりのAir Podsに似た感動があったのを覚えています。

    この外付けのキーボードのおかげで、僕は今でも安心して高級品のMacBookをガシガシ使えることができています。

    皆さんもご自宅で愛用されているノートパソコンを大事にしたいなら、是非外付けのキーボードを買ってみたらいかがでしょうか。

  • httpとhttpsの違い、知ってる?

    httpとhttpsの違い、知ってる?

    こんにちは、すなです。

    今回は僕たちがパソコンを使うときによく見る「http」と「https」にどんな違いがあるのか、気になったので調べました。

    ブラウザとは

    皆さんはインターネットを使う時、普段SafariやGoogle Chromeを使うと思います。

    この様なソフトウェアのことを「ブラウザ」といいます。

    他にもMicrosoft Edge(かつてのInternet Explorer)やFirefoxなどが有名なブラウザの1つです。

    HyperText Transfer Protocol

    ユーザーがブラウザで情報を調べるとき、ブラウザはサーバーにアクセスします(ホームページの情報はサーバーに保管されていて、ブラウザはそこからデータを逐一取得します)。

    このときの通信方法をHTTPと言います。

    httpは「HyperText Transfer Protocol」の略で、直訳すると「ハイパーテキストを転送する規約」という意味になります。

    HyperTextとは何か

    ハイパーテキストとは、とあるWebサイトを訪問したとしてそのページ内の「商品一覧」をクリックすると新しいページに遷移します。

    かつての紙媒体で同じことをやろうとすると、例えば「商品一覧(p.40)」と書かれていたとすると、40ページまで紙を捲らないといけません。

    「他のページから他のページに飛べるのがハイパーじゃね?」ということで、ネット上のページを単なるテキストではなく、「ハイパーテキスト」と呼びます。

    共通の通信手順

    httpはこれら「HyperTextなファイルを転送するのに用いる通信手順」のことを指します。

    要するに皆んながバラバラな方法でサーバーと通信してたら収拾がつかないので、「httpという方法で通信しよう」というインターネット上での約束(=規約)がhttpです。

    httpsで暗号化する

    httpsはhttpとできることは大きく違いませんが1つ異なる点が、httpsにはSSL(≒TLS)という手順が追加で用いられています。

    httpはブラウザがサーバと通信する時に、生のデータでやり取りします。

    分かりやすく説明すると、通信するときの信号に通信内容をそのまま記述してやりとりします。

    つまり悪意のある第三者によってその通信を「盗聴」されると、その内容が簡単に解読されてしまいます。

    しかしhttpと違い、httpsは通信内容が暗号化されます。

    つまりhttpsの通信を第三者が傍受したとしても、通信内容が暗号化されているて、その暗号を解読するのには膨大な時間と労力がかかるので、現実的には不可能に近いです。

    他にもhttpだと通信に介入して通信内容を改ざんして送信されるなど、暗号化されないことによって不都合なことが多く生じます。

    それらを阻止するためにSSL(≒TLS)を用いて通信を暗号化しています。

    httpsの見つけ方

    実際にhttpsで通信が暗号化されているサイトは、ブラウザが「鍵のマーク」だったり、「保護された通信」と表記したりします。

    一方でhttp通信のときは「!」マークだったり、「保護されていない通信」と表記されます。

    このように分かりやすくなっています。

    いかがだったしょうか。

    今回は、

    • ブラウザとサーバーの通信について
    • HyperTextが何か
    • httpとhttpsについて
    • httpsのサイトの見分け方

    をざっくりと解説しましたが、理解していただけたでしょうか。

    httpsのサイトはブラウザにそのサインが表示されるので、これを知っていればどのサイトがより安全で、どのサイトがより安全でないか、一目で分かりますね。

    皆さんも是非、身近に潜んでいる疑問をたまには深掘りしてみてはいかがでしょうか。

    では、また別の記事でお会いしましょう。