はてなブックマーク

Minecraft(統合版)を自宅サーバーで遊んでみた！Ubuntuによる構築に挑戦 初めまして、新人の薄です。初めてブログの更新で不慣れな箇所もあるとは思いますが、よろしくお願いします！ みんな大好き、Minecraft Minecraft 一度プレイしたら、 時間が溶けることで有名な「Minecraft」。「テトリス」の販売数を超え世界一売れたゲームになったとか。動画サイトのゲーム実況では、必ずといっていいほどにMinecraftの文字をみます。 Minecraftは一人でも楽しいですが、友人や家族と一緒にやるとさらに楽しくなります。しかし、マルチプレイを行うにはいくつかの条件があります。 この記事ではマルチプレイをお金をかけずに楽しむことを目的にサーバーの構築について紹介していきます。 マルチプレイ マルチプレイを複数人の仲間のみが入れるワールドで行うのは、少々面倒です。マルチプレイ

VSCode拡張機能「Fabulous」でCSS記述を時短！高速コーディングのお供に CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追加していて、事あるごとにEmmetショートコードを書いたりスニペットを表示させたりして時短を試みている。 さて前述のものが、かなり優秀だからこれ以上はなさそうなのだけれど、GUI操作でCSSプロパティを挿入してくれるVSCode拡張機能がある。 このエントリーでは、VSCode拡張機能「Fabulous」を紹介したい。 Fabulous について Fabulousは、Visual Studio CodeでCSS記述をサポートする。アクティブにするとサイドバーが現れてGUIを操作できる。 f

JWT(JsonWebToken)を使った認証付きGraphQL APIを作る 以前にGraphQL+MongoDB+graphql-composeという構成のGraphQL APIの実装についてご紹介させていただきました。 [kanren postid=”559″] この構成のGraphQL APIにユーザ認証が必要になりましたのでJWT(JsonWebToken)を使った認証機構を追加しました。 JWT認証を作る JWTのパッケージをインストールします。 $ yarn add jsonwebtoken auth.jsを作成しJWT認証を実装していきます。 import jwt from 'jsonwebtoken'; const authentication = (app) => { app.use(/^(?!\/login).*$/, async (req, res, next) =

【React】スライダープラグイン「slick」のReact版「react-slick」の使い方 slickのことをjQueryプラグインとして覚えている人も多いと思う。slickは、スライダー＆カルーセルを実装するプラグインでカスタマイズオプションも豊富に用意されていて使い勝手がよい。 わたしも多くの案件でスライダー実装には、slickを使ったものだ。いまでも静的サイトコーディングでスライダー実装が必要ならば、真っ先にslickを検討するはずだ。 そんなslickだが、jQueryプラグインであることから、昨今のSPAやSSR案件では使う機会が遠のいているのも事実。ReactやVue、Angularといったライブラリにもスライダー＆カルーセルを実装するライブラリがあるからだ。そんな環境にわざわざjQueryを入れようとは思わない。 ところが、React用にモジュール化されたslickがあ

React Hooksに対応した複数のonChangeハンドラを処理する書き方 Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理

Next.jsでSassファイルを使う！node-sassモジュール設定方法 Next.jsでSassモジュールを使えるようにしたい？その手続き、私がお手伝いしましょう。 Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。 コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。 そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。 それが、このエントリーの動機です。あなたも

ログインShellをfishにして作業効率を改善する こんにちは、ソリューションの五十嵐です。 ログインShellとしてzshを使用しているのですがイマイチzshを使いこなせておらず、bashと比べても作業効率が良くなっているようには思えませんでした。 そんな中fishの記事を拝見して興味を持ったので試してみました。 ちなみにGoogleでfishについて調べるとfishがなんとなく良いものだとわかります。 インストール 私はMac環境ですのでHomebrewでインストールします。 $ brew install fish ログインShellに設定できるように/etc/shellsの末尾に/usr/local/bin/fishを追加します。 $ sudo vi /etc/shells /usr/local/bin/fish 以下のコマンドでログインShellに設定します。 $ chsh -s

パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal

Gmailエイリアス機能で別名アドレスを作る方法 私は、メールのやり取りに「Gmail」を利用している。仕事、プライベートともにである。そしてこの記事をご覧になるあなたもGmailを日々活用していることだろう。 そんななか、つぎのような必要に迫られたことはないだろうか？ 「SNSアカウント作成ごとにメールアドレスを変えたい」 「ラベル・フィルタの分類を楽にしたい」 「新たにメールアドレスが欲しいけど、アカウントは作りたくない」 などに該当する場合は、有効な手段になり得るエイリアス機能を紹介したい。 引き続きご覧いただけると幸いだ。 Gmailエイリアス機能とは？ まずエイリアス機能について解説しよう。Gmailを使うにあたり、Googleアカウントを開設している訳だが、Gmailアドレスは１アカウントにつき１アドレス発行される。 また同一アカウントでサブアカウントは開設できない。つまり「[

ホームテクノロジーAWS Lambda で Python みたいな関数型言語 Coconut を動かすぞ！！！！！！！（非カスタムランタイム） AWS Lambda で Python みたいな関数型言語 Coconut を動かすぞ！！！！！！！（非カスタムランタイム）みなさんはじめまして！！！！！！！！！！！！ 会津ラボで主にバックエンドの開発を担当している吉原です。他にブロックチェーン等もやってます。好きな言語は Haskell、趣味はクイズゲームです。以後お見知りおきを。 ※ ちなみに弊社には吉の字がつくバックエンド担当が２人おり、度々間違われます。当ブログをご覧になる場合はご留意ください。 さて、今日（注：執筆開始時点）はお盆です。 ……お盆も働いていたやつらだ。面構えが違う。 というのは冗談で、お盆休みをずらして取得しているため、その代わりに出勤しています。こういったことができる所

ホームテクノロジー【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう 【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう Electronデスクトップアプリのレンダラープロセス設計において、求められるスキルセットはWebアプリ案件とそれほど違うところはない。 静的コンテンツで済むのであれば、HTML&CSSとわずかなJavaScript(jQuery)があればよい。コンテンツ更新が頻発するのなら、SPAを考慮したい。ReactやVue.js、Angularなどが候補になるだろう。 SSRフレームワークで知られるNext.jsやNuxt.jsを得意とするなら、十分に活用できるはずだ。ただしレンダラープロセスのウインドウ生成には、起点となるHTML

mainフォルダにメインプロセスの起点となるindex.jsを配置rendererフォルダにレンダラープロセスの起点となるindex.htmlを配置 プロジェクトフォルダ内の画像を表示 Documentsフォルダの「aizulab_logo.png」を読み込む 例外 webpack-dev-serverの簡易Webサーバーを必要とするケースも考えられる。たとえばSSR開発をサポートするNext.jsやNuxt.jsは、そもそも起点とするHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちで、ページが生成されるためである。したがって、Electronの開発時には簡易Webサーバーを参照するようにして、ビルド時にはエクスポートした静的ファイルを参照させる。 開発時に簡易Webサーバーを設ける必要がある場合、PC内ローカルフォルダ参照がルートパスであるため簡

[Mac]環境変数PATHを削除する こんにちは、ソリューションの五十嵐です。 普段はMac純正のターミナルアプリを使用していますが、Hyperというターミナルアプリがおしゃれで気になっていました。 https://hyper.is/ 試しにインストールしてみましたが、Hyper上で起動したvimが重い。。。 調べたところによると「.bash_profileで不要なexportが多くなるとlsコマンドが遅くなる」との記事を発見。 これが原因かも、と思いPATHを確認・・・ $ source ~/.bash_profile $ env | grep PATH PATH=/Users/igarashi/.cargo/bin:/Users/igarashi/go/bin:/Users/igarashi/Documents/scala/scala-2.12.7/bin:/usr/local/opt

Markdownエディタ「Typora」「boostnote」どっち使ったらいい？比較してみた 私はいま、Typoraかboostnoteかで悩んでいる。これらはMarkdownエディタあるが、より使い勝手のいいツールを求めてエディタ沼にハマってしまっているわけだ。 このところライティングするようになって、Markdownエディタの重要性を再認識している。Markdownエディタを使う理由は、なんといっても骨子を組み立てる段階で意味付けできることだろう。 マークアップエンジニアにとって慣用語の「セマンティックWeb」に似ていなくもない。アウトラインを構成し、コンテンツに意味をもたせ、書き手読み手に正しく理解してもらう思想は馴染み深く感じてしまう。 Markdownエディタに求めることは、効率がよく記述を続けられて、意識を妨げないことだろう。操作に意識が割かれてアイデアが遮られるようであって

CSSフレームワークBootstrapのダイアログを秒速で実装する「bootbox.js」が超便利 CSSフレームワークといえば、Bootstrapといえるほどのネームバリューを誇ります。使用を検討する場合は筆頭候補といえるでしょう。次の画像は「npm trends 」でトレンド調査した結果です。 圧倒的といえるほどのダウンロード数です。新進気鋭の有望なCSSフレームワークがリリースされても、Bootstrapが依然としてトップに立っていることがわかります。 なぜこれほどまでに人気であり続けられるのでしょうか？それには次のようなことが挙げられます。 効率がいい開発を図れる洗練されたCSS設計（アーキテクチャ）の採用HTMLモックをすばやく作成できるルールに沿った使い方で開発速度アップを見込めるHTMLにクラス付与するのみの簡単実装充実したユーザーインターフェースが魅力トレンドをおさえたアッ

プログラミング初心者がAndroidアプリを作成するまでの話 全くの初心者が、簡単なAndroidアプリを作成するまでの記録です。 以前は異業種の事務員でした。あるときプログラマーを目指し、37歳で入社。日々勉強中です。 きっかけ ゲームが好きな息子達のために、アプリを作りたいと漠然と考えていました。 なぜなら彼らは手作りクッキーのように手を加えたものが好きだから、自作のアプリで遊んで欲しいという思いがありました。 ゲームのある環境に行くと、夢中になって遊んでいます。宿題をせずに、約束の時間である一時間をオーバーして熱中することもあります。食事中、団欒の時間などにゲームの話を始め、盛り上がっています。本当にゲームが好きなんだなと感じます。 私がAndroidを所有していたこともあり、Androidアプリについて勉強しようと思いました。そこで初心者向けの書籍を購入しました(はじめてのAndr

AndroidでFirebaseを使ったPush通知(FCM)を実装する 初めまして 会津ラボでAndroid開発を担当している横山です AndroidでPush通知と言ったらFCM（Firebase Cloud Messaging）ですよね 今回はそんなおなじみの機能を Firebase の設定からテストまで備忘録として記載しようと思います

入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ よい入稿データとは、どのようなものだろうか？ マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。 それでは「コーディングしやすい」とは、どのようなものか？ 私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、HTML/CSSが最適化しやすい。ソースコードの構造化ができれば、セマンティックWebに関わる定義に矛盾が生じにくい。さらにコンポーネント・ベースの UI 開発を取り入れることで、運用性があがる。つまりメンテナンス性の担保につながるわけだ。 私はフリーランス時代に、多くのコーディング案件を

Adobe Premiere cs5.5 が使えなくなったのでiMovieで動画編集してみた こんにちは、日々心の平穏を求め続けているikaidaです。 さて突然ですが、皆さんは動画編集にどんなソフトを使用していますか？ 動画編集は難しそうなのでやった事ないって方向けとは言いにくいですが、何かのきっかけになれば幸いです。 さて、いつも私は自由度が高くて慣れると使いやすいAdobeさんの Premiere cs5.5 を使用していたのですが、macOS Mojave にアップデートしたばかりに起動はするけど使い物にならないポンコツ状態になってしまいました。 Mojave アップデートによるAdobe cs系の不具合 何が起きたかを簡単に言いますとmacOS Mojave自体が Java 6をサポートしておらず、Adobe CSシリーズが使えない状態となります。 (サポート外で動かす方法はGo

【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る 「2019年にわざわざ学ばなくてもいい言語」 が発表されました。 https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x CoffeeScriptを抑えて堂々の１位はElmとなりました。 残念なニュースではありますが、個人的には好きな言語ですのでElmで簡単なTodoリストアプリを作成してみます。 2019/07/01更新 コメントでご指摘頂きました。ありがとうございます！ モジュールを分割せず１ファイルに修正し、GitHubにpushしましたのでこちらを参照するようにしてください。 ABAB↑↓BA より: 2019年6月28日 9:35 PM このモジュールの分割の分け方は公式ガイドで悪手とされています。1ファイルにまとめていただけると、混乱す

[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法 みなさんは普段どのようにgitignoreを作成していますか？ 手作業で設定したり、GitHubのテンプレートから持ってきたり、前に使ったものを流用したりなど、様々な方法があるかと思いますが、 もしこのような方法で作成している方には「gibo」というツールをオススメします。 https://github.com/simonwhitaker/gibo インストール Mac環境であればHomebrewでインストールできます。 $ brew install gibo $ gibo -v gibo 2.2.1 by Simon Whitaker <[email protected]> https://github.com/simonwhitaker/gibo Fetches gitignore boilerplates from

【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.j