社内で1年以上、「10分勉強会」という取り組みを続けており、延べ80回以上開催してきました。本記事では、これまで開催したときの発表ネタを一挙公開します（多すぎて書くのが大変なのである程度選抜したうえで、フロントエンド・ネットワーク編として一旦まとめました）。こんな方にぜひ読んでいただきたい記事です。社内で勉強会をやりたいけど、どんなネタを採用すればいいのだろう？弊社の場合はかなりライトなネタで続けています。ぜひ参考にしてください！マナリンクの勉強会にお邪魔してみたい！ありがとうございます！ゲスト参加を常に歓迎しておりますので、本記事を読んでこんなネタ聞きたい、あんな...

マナリンクでは社内で毎週10分勉強会と題する簡単な勉強会を持ち回りで行っているのですが、https://zenn.dev/manalink_dev/articles/manalink-ten-minutes-studyそれと並行して不定期で社外のエンジニアの方をお招きして合同プチ勉強会を開催することがあります。今年だけでも何人もの方にオフィスにお越しいただいたりオンラインで繋ぎながら勉強会ができてとても有り難い限りなのですが、せっかくやっているのに開催レポートのひとつも書いていないのは勿体ないのではと思い、今回簡単に開催レポートを書いてみることにしました。年の瀬に2回勉強会を開催...

マナリンクCTOの名人です。2022年3月頃から社内で実施している「10分勉強会」という取り組みと、実際の内容についてざっくり紹介していきます。 10分勉強会の目的10分勉強会の目的は以下のとおりです。すぐに実務で使えるかは分からないけど、知っておいて損はないことを先に学ぶ機会を作る実務にて学んだことで、他のメンバーにも知ってほしいと思ったことを共有する機会を作る前者については、たとえば「新しいバージョンのPHPについて調べてみた」といった、すぐには役立たないがいずれ使うであろう知識が挙げられます。後者については、たとえば「ある施策の実装をきっかけにCSSの◯◯プロパテ...

マナリンクにおけるTypeScriptライブラリ「aspida」の活用事例について説明します。aspidaとはマナリンクとaspidaの出会いVue(Nuxt.js)での活用React(React Native)での活用aspidaを導入した意義開発メンバーの学習体制今後について aspidaとは以下の記事にaspida入門のための内容をまとめているのでご覧ください。https://zenn.dev/manalink/articles/manalink-intro-aspida マナリンクとaspidaの出会いマナリンクとaspidaの出会いは、2019年...

今回はゆるめのテーマとして、これまでマナリンクが歩んできた開発環境カイゼンの歴史を振り返っていこうと思います。現時点の開発環境だけ見ると、良いところも悪いところも目に付きます。しかし、過去から振り返ってどういうふうにカイゼンしてきたかが分かれば、今見えている問題点も一つひとつ解消していけば前進していける、ということがわかると思い、この観点でまとめてみることにしました。 前提前提として、マナリンクは前身となるサービスとして「NoSchool」という勉強質問サイトを運営している時代がありました。この頃から会社としては自社開発を続けており、サービスをクローズして新しくマナリンクを始めた...

先日、マナリンクで利用しているLaravelのバージョンを6系から8系に上げたので、変更内容や注意事項をレポートします。 前提条件マナリンクはオンライン家庭教師サービスで、LaravelはフロントのNuxt.jsに対するAPIサーバーとして主に運用しています。先生の検索機能や、先生へのお支払い機能などがあります。マナリンク自体は開発を開始して2年弱のサービスなので、世間の大規模なLaravelサービスに比べるとかなり小規模な方だと思われます。 どうして6系から8系に上げたのか モデルファクトリの変更を反映しておきたかったLaravel8系の目玉アップデートといえば、モデ...

マナリンクを運営する株式会社NoSchool社内で、どのようにSlack通知を活用しているかをまとめてみます。社内全体向けの通知エンジニア向けの通知Slack通知をどうやって実装しているか今後やっていきたいことの順番で書いていきます。 マナリンクの概要マナリンクはオンライン家庭教師とご家庭のマッチングサービスを主軸とする事業です。マナリンクの売上は現在保護者さんが先生に支払う指導料金の一定割合をいただく形で成り立っているので、サービスの売上が立つまでには、簡単に言うと以下のような手順をたどることになります。マナリンク上に登録した先生が、各自の指導内容を記した「指...

マナリンクではReact NativeアプリでFirebase認証を採用しており、バックエンドにLaravel製のAPIを使っていることから、Laravel上でFirebaseのID Tokenを使ったユーザーの特定（認証）を行う必要があります。本記事ではLaravelのGuard機能を使ってFirebaseのID Tokenによる認証機能を実装する方法を示します。 実装手順 config/auth.phpauth.phpのguardsに対して、firebaseというドライバを指定します。apiはガード名です。ここを変えた場合は以降のソース中でのapiの指定も置換する必要が...

本記事についてオンライン家庭教師マナリンクで利用しているSentryの入門記事です。マナリンクでは、WebフロントエンドおよびReact NativeアプリにてSentryを活用してエラーを捕捉しています。本記事の内容はほぼそのままREADMEとしてリポジトリに置こうと思っているので、多少前提条件などを飛ばして記載しますがご了承ください。記事として発信しつつREADMEが充実する一石二鳥の施策として取り組んでいます。 Sentryの概要Sentryはアプリケーションで発生したエラーを収集して管理画面上で一覧できるサービスです。Sentryへのエラーの送信は各言語・フレ...

本記事についてオンライン家庭教師マナリンクで利用しているaspidaという TS 製型安全 API クライアントライブラリの入門記事です。マナリンクでもっとも aspida を利用しているのは Nuxt アプリケーションなので、その Nuxt アプリケーションの README.md として aspida の解説を書き加えています。本記事は、その README.md を丸っとコピーして少し修正した記事です。つまり、開発者用の README として解説をストックしつつ、外部発信もしようという取り組みです。スタートアップなので各開発者が広い範囲を開発することになりますので、各範囲に入...

本記事ではオンライン家庭教師マナリンクのシステム開発で活躍しているGitHub Actionsについて一気に解説します。マナリンクは、オンライン家庭教師と生徒（と保護者）を繋ぐプラットフォームを運営している事業です。下図のように、大きく分けて3つの性質の違うプロダクトを開発しています。オンライン家庭教師を集客するメディア保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト宿題やチャットなどの機能でオンライン指導ができるWebアプリおよびネイティブアプリこのようにさまざまなプロダクト、技術要素に支えられています。マナリンクは2020年8月に正式...

オンライン家庭教師マナリンク 開発の Technote です。今回は Laravel で Algolia を利用していくつかのモデルのデータを混ぜて検索する方法を紹介します。 Laravel ScoutAlgolia の導入自体は Laravel Scout を利用すると、モデルの更新・削除の際に検索に必要なデータの同期を自動でやってくれるのでとても簡単です。https://laravel.com/docs/8.x/scoutただ、今回はいくつかのモデルのデータを混ぜて index を作成したいので Laravel Scout だけでは難しいです。 Scout Exte...

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。先日マナリンクのアプリとWebで新機能『宿題機能』がリリースされました。マナリンクのアプリは先生と生徒さん・保護者さんを繋ぐアプリです。今回はその機能の細かいUIの話ではなく（ないんかい）、サービスで使用している色について、どんなところにどうゆう意図で使用したかを言語化しようと思います。色はデザイナーがうっかり感性で選んでしまいがちなところです。それぞれの持つ色のイメージなどはなんとなく把握しているからこそ考えるよりも先に感性で選んでしまい「なんでこの色にしたの？」と突っ込まれた時に意外とすらすらとは答えられないこと...

オンライン家庭教師マナリンク 開発の Technote です。最近 Algolia を利用した検索を導入したのですが、思った以上に短期間で簡単に検索機能が導入できました。今回は Algolia を選ぶまでに検討したことや利用する際の Tips などをまとめました。 要件２種類の検索機能が要件として挙がりました。検索候補を出す機能検索窓への入力に応じてリアルタイムに科目などを検索候補として表示先生に紐づくコースを検索する機能コースのタイトルと本文で全文検索し、検索にヒットしたコースを持つ先生を検索結果に表示検索にヒットしたコースも最大３件まで表示先生...

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。本日、マナリンクの先生紹介ページの改修を行いました。先生紹介ページには指導コースが縦積みに表示されているのですが、これまたスマホで見るとめちゃくちゃ長く…。特に指導コースの長い先生のページは、下部にあるブログや自己紹介エリアにたどり着くのが大変です（私の短い指だと10〜15スクロールくらいかかります笑）。そんなわけで特に大きなリニューアルではない細か〜〜〜い調整を経てシェイプアップされたデザインのビフォーアフターをご覧ください👁 ｶｯ!! 大きすぎるアイコン Before薄々感じていたちょっとデカめのアイ...

オンライン家庭教師マナリンク CTO の名人です。マナリンクは2020年8月に正式リリースした若いサービスということもあり、ユーザーさんからの意見や感想が届きやすいサービスです。家庭教師の先生方がTwitterで新機能の感想をツイートしていただいたり、弊社の営業メンバーが先生にインタビューした際にコメントいただいたり、指導を受けているご家庭の方からも感想をもらったりします。マナリンクではWebサイト上で先生とご家庭がマッチングするだけではなく、そのあと指導を開始した後の指導ツールの提供まで自社開発で行っており、toCでありながらアプリケーションについて感想がもらいやすい方だと思いま...

オンライン家庭教師マナリンク 開発の Technote です。今回は GitHub Actions を利用した開発体験改善の取り組みの一部を紹介します。 背景もともと develop ブランチにマージでステージングに、master ブランチにマージで本番にそれぞれデプロイする workflow が組まれていました。本番でも使用している Docker 環境を使用しているので、各自ローカルで本番に近い環境で開発できていますが、Expo のプッシュ通知や外部からの Webhook の動作などは確認が難しい、もしくはできない場合があります。費用的、開発規模的な面からしばらくはサーバー...

マナリンクCTOの名人です。2021年7月1日に、弊社が運営しているマナリンクTeachersというメディアサイトをリニューアルしました！https://for-teachers.manalink.jp/このメディアサイトはNext.js×microCMSで構築されています。初回リリースは2020年秋ごろだったので、半年以上運用してのリニューアルとなりガッツリ実装を書き換えました。そのため本記事では前回の復習も兼ねて、リニューアルの流れやTipsをまとめてみようと思います。 メディアの概要マナリンクTeachersは、オンライン家庭教師向けの情報をまとめているメディアサイト...

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。先日マナリンクの新LPをリリースしました。今回もデザインとコーディングさせてもらいましたが、コーディングの際にこれまで使っていたCSSの小技をアップデートをしたので書き記しておこうと思います。 背景画像に背景色を重ねる時はlinear-gradientを使う背景画像にさらに色を透過で重ねたいぜ！って時に以前だったらこんな感じで擬似要素を使っていました。.about{ position: relative; background: URL('~assets/img/lp/ad4/about_bg_sp....

オンライン家庭教師マナリンク 開発の Technote です。今回は Vuetify の VAutocomplete を使用して新しく検索機能を追加したときのネタです。 仕様新しく作成した検索機能は以下のような仕様でした。入力に応じて科目などを検索候補として表示ひらがなで入力しても検索候補を出す検索候補を選択すると専用のページに遷移検索候補を選択せず検索アイコンをクリックでキーワード検索 VAutocomplete入力で絞り込めるセレクトのようなコンポーネントです。https://vuetifyjs.com/ja/components/autocomp...