Ionicの全体像、React Native・Flutterとの比較 2020年5月
なにこれクロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。Ionic概要...
2020/05/01
もくもく会ならShinjuku Mokumoku Programmingがオススメ
なにこれ一時期いろんな勉強会に行きましたが、「勉強会に参加すると勉強している気になるだけで実際そうじゃない」ので最近はモクモク会にしか顔を出さなくなりました。その中でもShinjuku Mokumoku Programming(通称「新宿も...
2019/06/23
Gatsby + Netlify + ZapierでRSSリーダーを作る
なにこれ自分専用のRSSリーダーをGatsby + Netlify + Zapierを使って作りました。Gatsbyビルド時にRSSとOGPを取得して、Webサイトに表示しています。今回はこのWebサイトのビルドの仕組みと、Gatsbyビル...
2019/06/18
Netlify Formsでファイルを非同期アップロード with React + Formik + Axios
なにこれNetlify FormsはNetlifyにホストしている静的サイトでお問い合わせフォームを作れる機能です。DBを用意しなくても、お問い合わせフォーム送信結果はNetlify側で保持しれくれます。Netlifyの管理画面からCSVダ...
2019/06/01
Gatsbyにおける外部取得画像へのgatsby-image適用方法
なにこれGatsbyで画像を扱う場合gatsby-imageを使うとイイ感じに最適化してくれます。Webサイトのリポジトリ内の画像についてはgatsby-config.jsで簡単に設定できますが、今回はビルド時に動的に取得する外部画像に対し...
2019/06/01
Gatsbyで2種類のマークダウンファイルの区別する方法
なにこれGatsbyでWebサイトを作るときに、ブログや職種紹介など2種類以上のマークダウンファイルを管理する場合があると思います。通常だとMarkdownRemarkNodeのfileAbsolutePathでしか両者のマークダウンファイ...
2019/06/01
GatsbyのルートページにContextを設定する方法
なにこれGatsbyでは、gatsby-node.jsのcreatePagesで以下のようにページを作成できます。ただルートページ（index.jsのページ）はGatsby側で生成されるので通常はContextが設定できません。しかし場合に...
2019/05/31
パスを渡せばgatsby-imageで画像を表示してくれるコンポーネントの作成方法
なにこれこんな感じでgatsby-imageの画像を表示したい。そんなコンポーネントの作成方法です。 const filename = 'filepath/to/myimage.png' return <Image filen...
2019/05/13
Gatsby製ブログにWordCloudを導入
なにこれ前回記事ではNode.jsでWordCloudを出力しました。今回は、前回のサンプルをベースに自分のブログ（Gatsby製のブログ）にWordCloudを取り入れてみたので、その時の実装方法のメモです。※ソースコードは以下です。ht...
2019/05/11
Node.js + kuromoji.js + D3-CloudでWordCloudの画像を出力
なにこれ前回記事ではReactでWordCloudを出力しました。しかし実際は、過去大量データから出力するようなツールとして使えたほうが便利です。そこで前回のサンプルをベースにNode.jsでWordCloudのSVGファイルを出力するサン...
2019/05/04
React + kuromoji.js + D3-CloudでWordCloudをブラウザに描画
なにこれWordCloudをJSだけで生成したい。Pythonとか使わずにフロントエンドだけでやりたい。というモチベーションで、kuromoji.jsとD3-Cloudを使って文字列をインプットにWordCloudを描画するReactアプリ...
2019/05/03
GatsbyでCytoscape.jsを使って記事関連マップを作った
なにこれ以前の記事で紹介したタグとキーワードから関連記事を算出するロジックと、Cytoscape.jsを用いて記事の関連情報を視覚的に確認できるマップを作りました。今回はそのマップの紹介とCytoscape.jsを使ってみた感想です。記事関...
2019/05/01
VuetifyのDataTableとPaginationの状態をVuexで管理する
なにこれVuetifyのDataTableとPaginationを使った検索一覧画面でページングの状態を、ルーティングをまたいで保存しておきたい。という要望を満たすため、ページングの状態をVuexで管理する方法をメモします。DataTabl...
2019/04/28
VuetifyのSnackbarで複数メッセージ表示する方法
なにこれVuetifyのSnackbarはメッセージを1つしか表示できません。こちらGitHubでもissueになっています。ただUIとしてはメッセージを複数表示できたほうが便利なので、今回はVuetifyのSnackbarをベースにメッセ...
2019/04/21
Amplify + Cognito + AppSyncにおいてリゾルバーでユーザのカスタム属性を取得する方法
なにこれAppSync + Cognitoにおける認可制御について以前の記事で説明しました。今回は、ユーザーのカスタム属性を使った認可制御（AppSyncのリゾルバーでカスタム属性を取得する方法）についてご紹介します。TL;DRAppSyn...
2019/04/12
Vuetify + VeeValidate + VueI18nでカスタムバリデーション作成時にロケールごとのエラーメッセージを設定する方法
なにこれVuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する場合に、カスタムバリデーションのエラーメッセージをロケールごとに設定する方法について紹介します。実装方法...
2019/04/06
VuetifyでSelectタグを使う時の注意点
なにこれ最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。ただSel...
2019/03/24
AppSync + Cognitoによる認可制御
なにこれAppSyncはCognitoと連携して認可制御ができます。今回はそのやり方についてご紹介します。ざっくりいうと以下のようなことが実現可能です。✨スキーマ定義におけるQueryやMutationごとの認可制御（ユーザーグループ）💎...
2019/03/17
AppSync + Serverless Frameworkによるソースコードの構成管理
なにこれAWSのGraphQLマネージドサービス「AppSync」はGUIで簡単に設定ができて便利ですが、本格的に開発を進めていくとGUIポチポチでソースコードを管理するのはつらくなってきます。Serverless Frameworkという...
2019/03/03
Vuetify + VeeValidate + VueI18nでエラーメッセージ共通化
なにこれVuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する方法について紹介します。定義方法VeeValidateVeeValidateであらかじめ言語毎にエラーメ...
2019/03/01
AWS AppSyncで入力チェックエラーを複数返す方法
なにこれAppSyncのリゾルバーでDynamoDBのデータを更新する場合、更新処理の前に入力チェックは必ず実施すると思います。この時、入力チェックエラーを見つけた時点で1つのエラーメッセージを返すより、すべてのチェック実施後にまとめてエラ...
2019/02/25
VueI18nをscriptタグやJSファイル内で使う方法
なにこれVueI18nはVue.jsの多言語対応ライブラリです。vueファイルのtemplateタグでは、<p>{{$t('message.hello')}}</p>のように使います。ただvueファイルのscriptタグ...
2019/02/20
AWS AppSyncのPipeline Resolverで複数データリソースを扱う場合のVTLの書き方
なにこれAWSのGraphQLフルマネージドサービス「AppSync」で複数のデータリソースを扱う場合は「Pipeline Resolver」という機能を使います。これは、1つのデータリソースを扱うファンクションを定義し、それらを組み合わせ...
2019/02/18
Nuxt.js＋Apollo ClientでCRUD操作 / ユーザー管理画面でQuery, Mutation, Subscriptionを実装
なにこれ以前の記事設定いらずのNode製GraphQLサーバー「Graphpack」の使い方でGraphQLのサーバー側を実装を紹介しました。Graphpackは備え付けのGraphQL Playground IDEで動作確認できますが、せ...
2019/02/11
GatsbyでRelated Content(関連記事)を表示する / Hugoの関連記事機能をGatsbyに移植した
なにこれブログでよく見かけるUIのひとつに関連記事リンクあります。記事下部に関連記事リンクを設けておくと、記事を読み終えたユーザーが、また別の記事を見てくれる可能性が上がるので、回遊率向上という観点で非常に効果的なUIです。そんな関連記事リ...
2019/02/09
WEBエンジニア勉強会 初LT感想と参加レポート / 「MDX-DeckとCode Surferでスライドを作ろう！」補足情報
なにこれ2019/2/1(金)、WEBエンジニア勉強会 #11でLTしてきました。本記事では自分のLTスライドと、10分の枠では伝えきれなかった補足情報を紹介します。また他の方のLTの様子や、勉強会の雰囲気なども参加レポートとして書いていま...
2019/02/03
設定いらずのNode製GraphQLサーバー「Graphpack」の使い方 / Query, Mutation, Subscriptionを試す
なにこれ「とりあえずクライアント側と同じJavaScriptで手っ取り早くGraphQLサーバー立てたい！」このようなユースケースにGraphpackはピッタリです。設定いらずのNode製GraphQLサーバーで 「GraphQLのスキーマ...
2019/01/23
懇親会で飛び込みLTに参加した / 「JavaScriptつまみ食い LT 会 ～ つまみ食い LT 大会！」の感想
なにこれ2019/1/19(土)、JavaScriptつまみ食い LT 会 #4 ～ つまみ食い LT 大会！で懇親会にて飛び込みLTに参加しました。勉強会の様子も含めLTの感想を書きます。どんな勉強会だったか今回で開催5回目となり、4回目...
2019/01/20
Gatsbyショーケースに自分のWebサイトを登録する方法
なにこれGatsbyの公式サイトにはショーケースなるものがあって、世の中に公開されているGatsby製のWebサイトを一覧で見ることができます。実はこのショーケース、けっこう簡単に自分のWebサイトを登録できるということに最近気づきました。...
2019/01/15
ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方
なにこれSNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。ただTwitterやYouTubeなどの埋め込...
2019/01/11
Nuxt.js＋Apollo＋GraphQLをサクッと学べた /「Hello, GraphQL for client-side!」を読んだ
なにこれNuxt.js＋GraphQLの知識がこれから必要になるので「Hello, GraphQL for client-side!」を読んだところ、非常にサクっと学ぶことができたので感想を書きます。GraphQLでサーバーと通信するには「...
2019/01/07
「いちばんやさしいGit&GitHubの教本」を読んだ
なにこれいままで雰囲気でGitを使ってたので、ちゃんと勉強するために読みました。感想タイトルの通り、かなり「やさしい」です。新人さんでOfficeは触ったことあるけどプログラミングは触ったことないって人でも、2～3日で読破でき、GitHub...
2018/12/31
パソコンで肩こりに悩んでいる人はデュアルキーボードを試してみよう
なにこれパソコンで肩こりに悩まされている方は比較的多いと思います。その要因の1つがキーボードです。自分に合わないキーボードを使い続けていると、手首、肩、腰など体に負担がかかり、肩こりの原因になるといわれています。市場には楽にタイピングができ...
2018/12/28
mdx-deckとcode-surferでスライドを作ろう！
なにこれmdx-deckとcode-surferを使って、mdxファイルで簡単にリッチなスライドが作れるので試してみました。作ったスライドは下記、またはGitHub Pagesをご覧ください。スマホだと小っちゃいのでPCで見てください:di...
2018/12/23
JJUG CCC 2018 Fallに行ってきました
なにこれJava CCC 2018 Fallに参加してきました。見てきたセッションは以下の通りです。【JJUG基調講演】Javaの未来を考えよう セッション概要#ccc_e1マネーフォワードのアカウントアグリゲーションの現状と課題点について...
2018/12/16
Reactコンポーネントをnpmで公開する（GitHub Pages付き、Babel7、webpack4）
なにこれTIS Advent Calendar 2018の13日目の記事です。よろしくお願いします！最近Reactコンポーネントをnpm公開してみました（参考記事：CSSのclip-pathでSlit Animationを実現する）。そこで...
2018/12/11
Vimを始める時に取り組んだ４つのこと
なにこれ最近DockerまわりをやっていてLinux上でDockerfileなどを編集するのがつらいので、ちゃんとVimを覚えようと思い立ち、とっかかりとして下記４点取り組みました。整理もかねて本記事にまとめます。vimtutor実施Vim...
2018/12/09
CSSのclip-pathでSlit Animationを実現する
なにこれSlit Animationを実現するReactコンポーネントをCSSのclip-pathを使って作りました。Slit Animation(スリットアニメーション)は下記のようなものです。コマ画像を縞々にして合成した画像に、スリット...
2018/12/01
Gatsby themeを使ってみる
なにこれ下記の記事を読んで、実験的に追加されたGatsby themeで何ができるのかサンプル作って試してみました。そのときのメモです。Gatsby themeはどんな問題を解決してくれるかGatsbyはスキャフォールド機能があって初期導入...
2018/11/24
ファイル名を指定して実行（windows + r）をランチャーとして使う
なにこれ便利なランチャーは色々ありますが、Windows PCだと僕はファイル名を指定して実行（windows + r）をランチャー代わりにしています。この方法は、どんなWindows PCでもすぐに使えるというのが最大の利点です。PCリプ...
2018/11/17
GatsbyでQiitaから記事を取得する(gatsby-source-qiita)
なにこれGatsbyにQiitaの記事を取り込めるプラグイン(gatsby-source-qiita)を作りましたQiitaからGatsbyに乗り換えようと考えている方で、Qiitaの記事を引き継ぎたい場合に便利なプラグインです。サンプル(...
2018/11/11
Gatsby PluginでGraphQLデータ追加
なにこれ前回のunifiedでMarkdownをHTMLに変換 & ReactでQiitaっぽい目次を作るで、GraphQLで取得したヘッダー情報をReactコンポーネントで加工していましたが、あらかじめGraphQLのデータとし...
2018/11/03
unifiedでMarkdownをHTMLに変換 & ReactでQiitaっぽい目次を作る
なにこれ自分のブログの目次をQiitaっぽくしたい...現在表示中の章をハイライトする目次を作りたい...ということで作りました。マークダウンをHTMLに変換するのにunifiedという構文解析ライブラリを使っています。メモ用にReactサ...
2018/10/28
Gatsbyプラグイン45選
なにこれGatsbyのプラグインは、公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあります。（2018/10/21現在）今回はその中でもおすすめプラグイン45個をユースケース別にご紹介します。ユースケース別目次※クリッ...
2018/10/21
Gatsbyプラグインの使い方･作り方･公開方法
なにこれGatsby公式サイトのプラグインの章のまとめ。プラグイン概要Gatsbyプラグインは、Gatsbyの全処理を拡張および修正可能です。例えば下記のようなことができます。外部コンテンツ（CMS、ファイル、REST APIなど）を追加し...
2018/10/20
Gatsbyにおけるコンポーネント分割とCSS Module
なにこれGatsbyでブログを作っていて、機能拡張とともにテンプレートが肥大化してきたので、下記図の青枠単位でコンポーネント分割しました。あわせてCSS Moduleも採用しました。そのときのメモです。CSSをコンポーネントスコープにする方...
2018/10/14
Gatsby2系の新機能
なにこれGatsby（React製の静的サイトジェネレーター）が2018年9月に2系にアップデートしたそうです。2系の新機能について、公式ブログ(Announcing Gatsby 2.0.0)を参考に、主要な部分をピックアップして紹介しま...
2018/10/12
GatsbyでPWA対応
なにこれスマホでネイティブアプリっぽいUXを実現するため、GatsbyでPWA対応した時のメモです。以下の4つが可能になりました。前提ServiceWorkerを利用するため、SSL化が必須です。そのためブログはhttpsでアクセスできるよ...
2018/10/08
GatsbyでYouTubeとTwitter埋め込み
なにこれブログに良くあるYouTubeやTwitterの埋め込みをGatsbyでやる方法のメモです。こんな感じで埋め込めるようになります。YouTubeyoutube:https://www.youtube.com/embed/z8Kt1g...
2018/10/07
Reactで構造化データマークアップ（JSON-LD対応）
なにこれググった時に自分のブログ(React製)でパンくずを表示させたいということでJSON-LD対応しました。JSON+LDについてググると色々良い記事がでてきて一通り学ぶことができました。ここでは、それら記事の紹介を兼ねて、構造化データ...
2018/09/29
ReactでSNS対応（Gatsby製ブログでSNSシェアボタン、OGPタグ追加）
なにこれGatsby製ブログ(Reactアプリ)でSNS対応した時のメモです。(1) SNSシェアボタンと(2) 自分のSNSへのリンクを設置して、ブログの記事をSNSでシェアできるように、、、また、(3) OGPタグを設定し、SNSでシェ...
2018/09/16
GitHub Pagesを独自ドメイン化 + Https化
なにこれGitHub Pagesでブログを開設した後、どうせならURLも短く覚えてもらいやすいものにしようと思い独自ドメインに切り替えました。その方法のメモです。 ※（注意）独自ドメイン取得はお金がかかります！！！手順1. 独自ドメインを取...
2018/09/12
Gatsby製ブログ開設手順
ブログ開設手順Gatsbyってなにって状態から30分程度でブログを開設できました。下記にそのときの手順をメモしておきます。0. 前提条件Git、Node、npmは事前にインストールしておいてください。1. ブログのスターターキットを起動Ga...
2018/09/10
Gatsbyでブログ始めました。
ブログをやろうと思った理由Qiitaは、誰得な作業メモは載せられないしはてなブログは、見た目が好きじゃない...一時期、WikiHub日報とかもやっていたんですが、なかなか続かず...そのせいか、やったことを3ヶ月後には忘れてしまう状況がコ...
2018/09/09
10分でできる！ @ngrx/storeチュートリアル with @ngrx/schematics
なにこれAngularで状態管理する方法をざっくり把握するためのチュートリアルです。@ngrx/storeベースの簡単なアプリ（数をカウントするアプリ）を作成します。作るだけなら10分程度で出来上がるので、とりあえず手を動かしてngrxを最...
2018/07/30
GitBucketのissueで作業量を設定できるプラグイン
== 2018/4/7 追記 ==========================================本記事ではChrome拡張とDockerによって実現していましたが、その後GitBucket Plugin化しました。gitb...
2017/12/31
TypeScriptで簡単にChrome Extensionを作る方法
Githubで草を生やす活動は楽しいですね!増えてきて芝みたいになると達成感があって、モチベーションも上がります。ところで、この前の10/30に草がハロウィン仕様になっていたのを見て、草を自分の好みの色を変更できればもっと楽しくなるのでは?...
2017/12/19
フロントエンド初心者がMEANスタック(MongoDB+Express+Angular+Node.js)でアプリを作ってみて躓いたこと
FUJITSU Advent Calendar 2017 12日目の記事です。リッチでイマドキなデザインのアプリが作りたくて、ここ４ヶ月ほどMEANスタック(MongoDB+Express+Angular+Node.js)でブログアプリを作...
2017/12/11
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その２. テスト編
やりたいことAngular CLI使って、MEANスタック(MongoDB + Express + Angular + NodeJS)のアプリを作りたい。どうせならサーバ側もTypeScriptで作りたい。フロント側とサーバ側の両方をweb...
2017/07/23
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その１. ビルド編
やりたいことAngular CLI使って、MEANスタック(MongoDB + Express + Angular + NodeJS)のアプリを作りたい。どうせならサーバ側もTypeScriptで作りたい。フロント側とサーバ側の両方をweb...
2017/07/18
Fessを使用して、Asciidoctorで簡単に全文検索できるようにする
Asciidoctorを使うと、技術文書や手順書などのドキュメントを簡単にHTMLで公開できますが、ドキュメントが多くなると自分の調べたいキーワードが、どのドキュメントに載っているのか探すのが困難になってきます。そこで今回は、Dockerで...
2017/06/25
Jenkins PipelineでYamlを設定ファイルとして使う方法
Jenkins PipelineのJenkinsfileを作っていて、設定ファイル(Gradleでいう、gradle.propertiesのような感じ)が欲しいと思う時があります。今回はYamlファイルをJnekinsfileから読み込んで...
2017/06/16
Asciidoc文法クイックリファレンスの日本語訳
概要AsciiDoc Syntax Quick Reference を日本語訳したものです。ところどころ意訳したり、補足説明を追加したりしています。これからAsciidoctorを使ってみようという方々のお役に立てれば幸いです。ドキュメント...
2017/05/28
Declarative PipelineでJenkinsfileを書いてみた(Checkstyle,Findbugs,PMD,CPDとか)
GradleのJavaアプリをJenkinsで１人CIするためのJenkinsfileを書いてみた。Githubにプッシュ時に、AWS上のJenkinsのパイプラインジョブが動いて、テストが成功したら同じくAWS上のTomcatにデプロイす...
2017/04/06
Java SE8 Gold取りました。
先日Java SE 8 Programmer II(Java SE8 Gold)に合格しました。そのために自分がやったことと受験した感想をメモします。▼試験結果勉強期間 ：3カ月得点率 ： 73％（ボーダー65％） 結構ギリギリ(>...
2017/03/12