-
[Mac]デスクトップ整理で仕事効率UP!一瞬で片付ける魔法のコマンド
こんにちは、ソリューションの五十嵐です。ブログの記事を書く際に画面のスクリーンショットを撮影する事がありますが、外部に漏らしてはいけない情報を写さないように気をつけて撮影しています。 中でもデスクトップのスクリーンショットを撮影する際には、デスクトップにある書類を退避してから撮影するなど手間になります。。。 ところが、Macユーザーであればこの手間を軽減することができます。 defaultsコマンド Macにはdefaultsというコマンドが用意されています。このコマンドはシステムの設定値を取得、変更するコマンドなのですが、その設定値の1つにデスクトップのアイコンを表示するか否かの設定があります。 こちらがコマンド実行前の私のデスクトップです。 ではdefaultsコマンドで設定値を変更してみましょう。 設定値を変更することができましたがFinderを再起動しないと設定は反映されません。 以下のコマンドで設定を反映しましょう。 これでデスクトップが真っさらになったと思います。 元に戻す場合は以下で設定値をtrueにしましょう。 Finderの再起動も忘れずに。 コマンドが長い・・・ コマンドでデスクトップを綺麗にすることはできましたがご覧の通り、コマンドが長いです。。。毎日切り替えるわけでもないので、いざ使おうと思う時にはコマンドを忘れてしまっています。 そこで、この手順をShellScriptにしてみます。さきほどの設定値はreadオプションを指定することで0,1で取得できます。 これを判定して設定を逆転するようにします。 desktop_clear.sh 現在の設定を見て、設定を逆転しFinderを再起動するShellの完成です。 ShellScriptはchmodコマンドで権限を変更しないと実行することができません。 以下のように755権限に変更しましょう。 エイリアス化 私はShellScriptを~/Shells以下にディレクトリを作って保存していますので、今回のShellScriptのパスは~/Shells/DesktopClear/desktop_clear.shとなります。 つまりデスクトップをクリアするためのShellScript実行コマンドは以下の通りです。 コマンドが長いのでShellScriptにまとめたはずが、結局呼び出しコマンドが長くなってしまっています。 そこでこのShellScriptをエイリアスとして登録したいと思います。 .bashrcを開いて以下の通りにエイリアスを追加しましょう。 .bashrcを変更したら$ source .bashrcで変更を反映します。これでエイリアス設定ができましたのでdclearコマンドでデスクトップアイコンの表示を切り替えることができます。 まとめ 今回はデスクトップアイコンの非表示を方法をご紹介しました。 後半にご紹介したShellScript化、エイリアス設定はデスクトップアイコンの表示に限らず様々な便利機能を設定することができます 普段使用していて、もっと手軽に実行できるようにならないかな。と思っているコマンドがあれば、試してみてはいかがでしょうか。
-
[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法
みなさんは普段どのようにgitignoreを作成していますか? 手作業で設定したり、GitHubのテンプレートから持ってきたり、前に使ったものを流用したりなど、様々な方法があるかと思いますが、 もしこのような方法で作成している方には「gibo」というツールをオススメします。 https://github.com/simonwhitaker/gibo インストール Mac環境であればHomebrewでインストールできます。 使い方 gibo listを実行すると対応する言語、フレームワークが表示されます。 だいたいの言語やメジャーなフレームワークであればリストに含まれているかと思います。 gitignoreを作成するにはdumpコマンドを使います。 以前はdump無しで良かったのですがアップデートで変更されたようです。 gibo dump NodeとするとNode.jsのgitignoreを出力します。 Railsであればgibo dump Railsのように使用する言語、フレームワークを指定しましょう。 これを.gitignoreファイルに書き込みます。 これでNodeの.gitignoreファイルが作成できます。 まとめ giboは https://github.com/github/gitignore を参照してgitignoreを作成しているようなのでgitignoreの内容も問題ないと思います。 私は以前から使用していたのですがあまりメジャーではないようでしたので紹介させて頂きました。 今まで手作業でgitignoreを作成していた方は、ぜひ使用されてみてはいかがでしょうか。
-
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する
こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.js Express MongoDB Mongoose GraphQL Express まずは必要なパッケージをインストールし、Expressのアプリケーションを作成します。 メインとなるserver.jsを実装していきましょう。 server.jsを実行し、http://localhost:8080/helloにアクセスするとHello Worldが表示されます。 MongoDB MongoDBとの接続を行います。 Mongooseを使用したいので、以下のコマンドで必要なパッケージをインストールしましょう。 次にutilsディレクトリを作成し、その中にDBとの接続を行うdatabase.jsを作成します。 utils/database.js database.jsをimportし、DB.connect()を実行することでMongoDBに接続されるようになりました。 GraphQL GraphQLを実装していきます。 まずはGraphQL関連の必要パッケージをインストールします。 スキーマとモデルのディレクトリを作成します。 今回はサンプルとして本のタイトルと著者のデータとします。 タイトルと著者をString型として定義したモデルを作成します。 models/book.js さらにスキーマも作成します。 ここで本記事の主役であるgraphql-composeを使用します。 graphql-composeはGraphQLのスキーマを作成するToolkitとのことで、 簡単にスキーマを作成することができます。 schemata/book.js これだけでCRUDのGraphQL APIになります。 最後にserver.jsを修正してGraphQLを有効にします。 server.js 再度server.jsを実行して以下のURLを開いてみましょう、GraphQLの実行環境が表示されます。 http://localhost:8080/graphql DBにデータが存在していないのでGraphQLでデータを新規登録してみます。 【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する実行環境の左上に以下のmutationを入力します。 さらに左下のQUERY VARIABLESの部分に以下を入力し実行しましょう。 作成されたデータのIDがレスポンスとして返却されます。 データが作成できましたのでGraphQLでデータを取得してみます。 実行環境の左上に以下のqueryを入力して実行してみます。…
-
Macのターミナルで連番のテストデータを作る
実務の中で以下のようなテストデータが必要になりました。 このようなデータを手作業で作成するのは非合理的なので、ターミナルから簡単に作成してみます。 テストデータの作成 まずディレクトリを作成します。 mkdirコマンドは-pオプションを指定することでディレクトリが存在しない場合に自動的に作成してくれます。 今回のケースではDataディレクトリを作成し、TextDataディレクトリを作成し…という形です。 その後はcd $_で作成したディレクトリに移動しますので、 $ cd Data/TextData/2019/0501のようにわざわざパスを指定して移動する手間がなくなります。 テスト用のテキストファイルを作成するためにtruncateコマンドを使用します。 Macではデフォルトでは使用できませんのでbrewでインストールしましょう。 truncateコマンドをインストールできたらサイズを指定してファイルを作成します。(とりあえず10kbのテキストとします。) このテキストファイルが50件欲しいので連番でコピーします。 printf “%02d”とすることで2桁のゼロ埋めした数値となります。 同じようにディレクトリも連番コピーします。 これで最初に提示した構造のテストデータが作成できました。 手順さえ覚えれば何千件、何万件のデータでも作成できますので覚えておくと役に立つかもしれません。
-
2019子どもの夢とおいしいもの祭りに参加します
5/18(土)、5/19(日)に道の駅あいづ湯川・会津坂下で、ふくしま産業賞受賞企業プレゼンツ「2019子どもの夢とおいしいもの祭り」が開催されます。 ふくしま産業賞は、 福島県内で「独自の光る技術」を持つ企業や「伝統を守り、地域性豊かなものづくり」を続ける人材などに、社会的な評価を与えることを目的とします。また、その活動の情報を発信する中で、新たな市場開拓につなげるなど、県内の企業活動・ものづくりを応援し、人材育成等を通して経済の活性化を図ります。 福島民報 「2019子どもの夢とおいしいもの祭り」には、ふくしま産業賞受賞企業が参加します。最新技術を駆使した先進性を評価された企業・団体によるブースで、子どもに夢を与える企画や魅力的なものづくりを体験できます。また地元の新たな産品や伝統的な味を堪能できるイベントです。 会津ラボは、動物ぬりえAR無料体験をご用意しています。子どもから大人まで楽しんでいただけます。家族連れでお越しください。お待ちしております。
-
MacでLinuxのブータブルUSBを作る
サーバにLinuxをインストールする際にブータブルUSBを作成するのですが、いつも手順を忘れてしまうため備忘録として記事に残します。 ブータブルUSBとは USBメモリからLinuxを起動する仕組みです。 起動したLiveイメージからHDDへのインストールを行う他、 USBメモリを接続するだけでほとんどのPCでLinux環境を起動できるので「WindowsPCにブータブルUSBを刺してLinuxを起動し、CUIでHDDのファイルをコピーする」というような使い方もできます。 ブータブルUSBを作る 「UNetbootin」というGUIのツールで作成することもできますが、私はコマンドラインで作成したい派なのでCUIでの作成手順をまとめます。 https://unetbootin.github.io/ まず作成するUSBメモリを接続し、diskutilコマンドでディスク情報を確認します。 今回使用するUSBメモリは4Gのものですので/dev/disk2が該当のディスクということが分かりました。 USBメモリにイメージの書き込みを行うため、アンマウントします。 USBメモリをアンマウントできたら、メモリに書き込むLinuxのイメージを作成します。 今回はCentOSを使用したいのでCentOSのisoファイルをダウンロードしました。 ダウンロードしたisoファイルをimg形式に変換します。 変換が完了したらimgファイルをUSBメモリ(/dev/disk2)に書き込みます。 少々時間がかかりますが、完了するとブータブルUSBの作成は終わりです。 あとは作成したUSBを対象のPCに接続し起動するとLinuxのLive環境を起動できます。(BIOSの設定が必要な場合もあります。)
-
Node.js + Babelで「ReferenceError: regeneratorRuntime is not defined」となる場合
ES6で開発し、Babelでトランスパイルしたものをnode transpiled.jsの形で実行していますが、 「ReferenceError: regeneratorRuntime is not defined」のエラーが表示されるようになりました。。。 環境 package.json .babelrc 原因 await-aysncが原因らしいです。 Webpackの設定などで解決する情報はありましたがNode.js + Babelで解決するのに手間取ったので備忘録として。 対策1 調べたところによると.babelrcを以下のようにすると良いと発見したので早速変更 .babelrc Error: Cannot find module ‘@babel/preset-env’ もちろんインストールしていないのでエラー yarn add @babelとしても同じエラーが。。。 yarn add @babel/preset-envでインストール? と試してみるが次は以下のエラー Error: Cannot find module ‘@babel/core’ yarn add @babel/coreと不足しているパッケージをインストールし続けるのは違う、と思ったので別の方法を模索。。。 対策2 babel-polyfillをインストールしてトランスパイル対象のファイルにimport babel-polyfill;を記述することで解決。 という情報を発見。 そんなにシンプルに解決するのか半信半疑でしたが試してみることに。 yarn add –dev babel-polyfillとしエントリーファイルにimport babel-polyfillを追加してyarn build 以外と呆気なく解決。。。
-
Node.jsのHeadlessCMS「Strapi」を試す
こんにちは、ソリューションの五十嵐です。 Netlify CMS + GatsbyのようなJAMStackなブログが話題になっています。 弊社のブログもJAMStackな構成にしたいと思っていますが、Netlifyなどのサービスを利用するよりは自社のサーバにHeadlessCMSを構築したいと考えています。 調べたところによるとNode.jsで構築できる「Strapi」というオープンソースのHeadlessCMSがありましたので試してみようと思います。 https://strapi.io/ Strapi Strapiのインストールはnpmで行います。 公式のチュートリアル通りに以下のコマンドを実行しましょう。 インストールが完了したらstrapiコマンドでプロジェクトディレクトリを作成します。 公式ではMongoDBを推奨していますが、MySQL、PostgreSQLなども使用できるようです。 今回はMySQLで設定してみましょう。 DBはプロジェクト作成時に設定でき、MySQLの設定も簡単に行うことができました。 プロジェクトディレクトリが作成されたらそのディレクトリに移動しstartコマンドでstrapiを起動します。 無事起動すると以下のページで管理画面を開くことができます。 http://localhost:1337/admin Post作成 管理画面でユーザーを作成、ログインできたらブログ記事を投稿するためのコンテンツを作成しましょう。 コンテンツタイプの項目を選択します。 コンテンツタイプの追加を選び「Post」と入力し、記事コンテンツを作成します。 今回はサンプルなので記事コンテンツはString型のTitleとText型のDetailのみとします。 コンテンツは作成できましたがこのままではAPIで取得できませんので「ロールと権限 > public」から以下のようにチェックを入れ、権限を設定します。 これで記事の公開ができましたので実際にGETで取得してみましょう。 ブラウザでhttp://localhost:1337/postsにアクセスするとJSON形式のPostデータが取得できます GraphQL 最後にGraphQLでデータを取得できるようにします。 デフォルトでREST APIが有効になっているのでそのままでも良いのですが、今回はGatsbyのGraphQLからデータを取得する予定ですのでGraphQLを有効にします。 GraphQLを有効にするにはStrapiにプラグインを追加する必要がありますので、以下のコマンドでプラグインを追加しましょう。 これでGraphQLが有効になりましたので再度Strapiを起動し、http://localhost:1337/graphqlにアクセスしましょう。 GraphQLの実行環境が表示されるはずです。 まとめ Node.jsのHeadlessCMSであるStrapiを試してみましたが、思った以上に簡単に構築でき、GraphQLの有効化もプラグインのインストールだけで済みました。 手軽に構築できる点は良いと思うのですが、カテゴリやタグなどの設定を入れたり、マークダウンの記事エディタを入れたりすることは可能なのでしょうか。。。 その辺りは機会があれば検証してみたいと思います。
-
Node.jsで河川の水位データをスクレイピングする
こんにちは、ソリューションの五十嵐です。 私は釣りが好きで、休日はよく釣りに出かけています。 その際に国土交通省が提供している河川の水位情報をチェックして釣りのポイント選びなどに役立てています。 http://www1.river.go.jp/ この水位情報をもっと手軽に確認できるようにしたいのでNode.jsでスクレイピングして水位データを提供するAPIを作成してみます。 Node.jsによるWebスクレイピング まずNode.jsによるWebスクレイピングのライブラリとしてcheerioをインストールします。 インストールしたcheerioで試しにYahooのトップページをスクレイピングしてみます。 YahooのHTMLソースを取得することができました。 河川の水量データをWebスクレイピングしてみる 指定URLをスクレイピングできることが確認できましたので水位データのページも試してみます。 水位データのページはTopページと詳細ページに分かれており、目標のデータは詳細ページにあります。 しかし、詳細ページのURLとなるデータID?は随時更新されるため、Topページにアクセスし今のデータIDを取得する必要があります。 まずはTopページのスクレイピングを始めましょう。 このページに詳細ページのデータIDが含まれていますのでスクレイピングした結果から抽出します。 データIDを抽出する スクレイピングしたHTMLソースはjQueryのセレクタのような形で操作できますので以下のようにリンクのaタグにデータIDが含まれるかを判定します。 データIDの取得ができましたので詳細ページのスクレイピングを行います。 詳細ページのスクレイピング 取得したデータIDで再度スクレイピングを行います。 無事水位データを取得することができました。 ちなみに水位データは日付,時刻,水位(m)のようです。 まとめ 取得したデータをカンマ区切りで整形し、最終的に以下のようなJSON形式のデータになるように修正しました。 今回はデータの整形までを行いましたので次回はこのデータを提供するAPIと、それを利用するアプリケーションを作成したいと思います。
-
【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る
「2019年にわざわざ学ばなくてもいい言語」 が発表されました。 https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x CoffeeScriptを抑えて堂々の1位はElmとなりました。 残念なニュースではありますが、個人的には好きな言語ですのでElmで簡単なTodoリストアプリを作成してみます。 2019/07/01更新 コメントでご指摘頂きました。ありがとうございます!モジュールを分割せず1ファイルに修正し、GitHubにpushしましたのでこちらを参照するようにしてください。 ABAB↑↓BA より: 2019年6月28日 9:35 PM このモジュールの分割の分け方は公式ガイドで悪手とされています。1ファイルにまとめていただけると、混乱する方が減って嬉しいかもしれません。 https://guide.elm-lang.jp/webapps/modules.html Elmとは Elmは、コンパイルすることでWebアプリケーションを作成することができる純粋関数型言語です。 The Elm ArchitectureというアーキテクチャでWebアプリをModel-View-Updateという形にパターン化しています。 例えばユーザーのInputによって画面が更新されるWebアプリはThe Elm Architectureでは以下のようにパターン化されます。 環境構築 Elmのインストールはnpmで行います。 これだけでelmのインストールは終わりです。 次に作業ディレクトリを作りましょう。 ディレクトリを作成しその中でelm initコマンドを実行します。 以下のようにelm.jsonとsrcディレクトリが作成されれば完了です。 この状態でelm reactorコマンドを実行してみましょう。 elmのWebサーバが起動したらhttp://localhost:8000にアクセスするとElmの画面が表示されます。 実装 The Elm ArchitectureではModel-View-Updateの形でパターン化されますのでsrcディレクトリ以下にそれぞれのファイルと、エントリーポイントとなるMain.elmを作成します。 Model まずはModelから作成します。 Todoデータを格納するTodo型を作成します。 Todo型はString型のタイトルと詳細を持ちます。 Modelは複数のTodoデータを持ちますのでList型のtodosを宣言します。 初期値を設定します。 Todoリストの初期値は空にしたいので空のリストを設定します。 さらにTodo項目を追加するためのメッセージ(Msg)も作成します。 最終的にModelはこのようになります。 Update UpdateはMsgとModelを受け取って新しいModelを返します。 これはReduxのReducerがactionとstateを受け取って新しいstateを返す動きに似ていますね。 AddイベントはModelにTodo型のデータを追加します。 今回はサンプルなのでタイトルが「Todoタイトル」、詳細が「Todo詳細」となるTodo型のデータをModelに追加するようにしています。 View 次にViewを作成します。 Todoリストの項目をテーブルで表示しましょう。 viewTebleはModelのtodos(Todoリスト)を受け取ってテーブルを返す関数です。 elmではHaskellのような記述で関数定義を行います。…