マガジンのカバー画像

Web開発日記

118
Webサービスを作るにあたっての個人的メモ
運営しているクリエイター

記事一覧

Slack用「確認お願いしますボット」をKurocoで作成し(てもらっ)たので解説

Kuroco(クロコ)で作成した、「確認お願いします」ボットの解説です。 「確認お願いしますボット」とは? Slackにて、メッセージの承認や確認リマインドしてくれるbotです。botと連絡したい人にメンションをつけてメッセージを投稿すると、定期的にbotからリマインダーが届きます。 リモートワークが一般的になり、Slackの利用頻度が高まってきています。その中で、メッセージの確認&返信忘れが起きることもあり、それを防ぐ役目を担えるかなと思います。 実際の利用方法や仕様

GitHubでメンションされているプルリクエストを見逃さない方法

GitHubでチーム運用していて、ちょっと利用しにくかったところをハックしました。 課題GitHub運用でよくある課題として、『メンション見落としがち』というのがあります。特に多くのレポジトリ対応している場合いちいちメールを見ないので、見落とすことが多くなってしまうのです。 そうするとどうなるかというと、slack上で「あのプルリクどうなりましたでしょうか...?」と連絡が来て、『ごめんなさーい!見逃してました、すぐ確認します!』のようなやりとりが発生します。 今回はこ

Nuxt.jsとマークダウンで簡単なブログサイトを作成する方法

Nuxt.jsにMarkdownで簡単にブログサイトを作成する方法を記載します。 Nuxt.jsのプロジェクト作成下記参考にNuxt.jsのプロジェクトを作成してください。 ※今回はUI frameworkにVuetify.jsを選択しました。 プロジェクト作成し、Nuxt起動すると下記のような画面が表示されます。 Nuxt/Content を利用する Contentを利用します。 - Contentとは -  nuxt/contentモジュールを使ってNuxtJS

Sourcetreeの使い方を簡単にまとめました

最近Sourcetreeを使う機会が出てきたので、簡単に基本的な使い方まとめました。 ※以下全てMacの場合です。 Sourcetreeインストール まずはSourcetreeをインストールします。 「Download for Mac OS X」をクリックしてダウンロード。その後インストール。 Sourcetreeを開くと下記のような画面が表示されます。 既存のディレクトリを追加上記画像より「ディレクトリをスキャン」をクリックするとローカルのディレクトリが選択できる

GatsbyJS + Netlifyでブログ作成する方法。

この記事についてgatsby-starter-blogとNetlifyを利用して、簡単にブログを作成します。 完成図↑このようなブログが作成されます。 この記事の対象者- フロントエンド初心者 - とりあえずGatsbyjs触ってみたい。 - 最速でブログ作りたい - マークダウン好き GatsbyJSの専門的なことは書いてませんのでご了承ください。 それでは始めます。 GatsbyJSインストールターミナルより下記実行し、GatsbyJSをインストールします。

【超初心者向け】「Micro CMS」のはじめ方。

『Headless CMSとは?』『Micro CMSとは?』『Micro CMSの利用方法』- Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 - Micro CMSとは 日本製のHeadless CMSです。詳しくはサイトご確認ください。 -Micro CMSの利用方法 下記公式のサイトがわかりやすいです。 Micro CMSは日本語であることと、ある程度マニュアルがま

【Drupal 8】node.html.twigにviewsで作成したblockを表示する方法

Drupal8を利用し、node.html.twigにviewsで作成したblockを表示する方法を記載します。 viewsにてblockを作成するまずはviewsにてblockを作成します。 その際に、「viewのシステム名」と「システム内部名称」をメモしておきます。 確認方法としては、viewsの設定画面のURLは下記のようになると思いますが /admin/structure/views/view/content/edit/block_1 この場合、 viewの

さくらレンタルサーバーにComposerをインストールする方法

現在さくらレンタルサーバーにDrupalをインストールして運用しているのですが、そこでComposerを利用する機会がありました。 そもそもさくらレンタルサーバーにComposerをインストールできるの?と疑問だったのですが、問題なくインストールできましたので対応方法を記載します。 さくらレンタルサーバーにSSHでログインまずはさくらレンタルサーバーにSSHでログインします。 ssh あなたのアカウント@あなたのドメイン.sakura.ne.jp ※ あなたのアカウン

LaradockでLaravelの開発環境を構築する方法【Mac編】

今回はLaradockでLaravelの開発環境を構築する方法を記載します。 Laradockについて プログラミングを始めるにあたり一番最初にぶち当たる壁が環境構築だと思います。Laravelの場合、Webサーバーやデータベースなどの環境を構築する必要があります。 早くLaravelの学習に移りたいのに、環境構築で戸惑ってしまい学習をやめてしまう方を多数見てきました。 そんな方にLaradockでの環境構築がおすすめです。 Laradockを利用すると、Webサーバ

Laravel開発で参考にしているサイトまとめ

Laravelで開発をしていく際に、参考になったサイトをまとめます。 Laravel.com 公式ドキュメントです。内容が充実しているので、1度は目を通しておくことをお勧めします。 英語ですが、Google 翻訳等で頑張ればなんとか読めるはず。 ReadDouble ある程度日本語訳されているので理解しやすいです。 Hypertext Candy こちらのサイトのおかげでLaravelを楽しく続けることができています。私のLaravelの恩人のサイト。 Lara

monocrew(モノクル)のトップページ変更しました。

4月にオープンしたmonocrewですが、先日トップページを変更しました。今回はどんな変更をしたかを記載します。 変更前のトップページ イメージ画像のスライドと、ログインボタンのみのシンプルなページ 変更後のトップページ 募集を一覧で表示させる。 改善1:ログインしなくてもどんなサービスかわかるようにした。上記の画像比較で一目瞭然ですが、変更前は画像のスライドとログインボタンしかないシンプルな画面でした。 最初はシンプルな画面で良いかなと思っていたのですが、よくよ

Laravelでデータをランダムで取得する方法

今回はLaravelでデータをランダムで取得する方法を記載します。 ランダムで全件取得する方法$posts = \App\Post::inRandomOrder()->get(); ランダムで10件取得する方法$posts = \App\Post::inRandomOrder()->take(10)->get(); take(10)の10の部分が件数になります。

Nuxt.js + contentfulで作成したサイトにサイトマップを追加し、Google Search Consoleの設定をする方法

今回はNuxt.js + contentful で作成した下サイトに、でサイトマップを追加する方法を記載します。 サイトマップを設置すると検索エンジンにサイトの構成を伝え、検索ヒットしやすくなります。 サイトマップモジュールのインストール下記でインストールします。 yarn add @nuxtjs/sitemap nuxt.config.jsに@nuxtjs/sitemapを追加 次にnuxt.config.jsを修正します。modulesオプションに下記追加します。

GitHubでリポジトリ名を変更する方法。(+Netlifyでの設定)

GitHubのリポジトリ名ですが、作った後に「やっぱり変えたいな。」と思うことありません? 今回はGitHubのリポジトリ名の変更方法を記載します。 GitHubでの操作まずはGitHubで操作します。 GItHubで変更希望のリポジトリを選択し、「Settings」をクリック、「Repository name」に変更後の名前を記入し、「Rename」をクリックします。 .git/config の修正次に、.git/configファイルを修正します。 プロジェクトル