なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U

技術ブロガー必読！と言える「Technical Blogging, Second Edition - Amplify Your Influence」を読んだ．タイトルにある通り「技術ブログ」にフォーカスした本となる．本書は2012年に出版された歴史のある本で，最新版となる Second Edition が6月末に出版された．なお，Second Edition は今年1月から β として公開されていて，β 1.0 → β 5.0 と進化しながら出版されている． 技術ブロガーとして，今まで10年以上育ててきた暗黙知をうまく整理する機会になった．本書の内容は非常に共感できるし，僕自身新しく気付けたこともあった．何よりも「技術ブログ」に対する様々なアプローチを完璧に言語化されている点が素晴らしく，正直言って「本書って僕が書いたの？」と頭が混乱するほどにシンクロを感じる場面もあった．シンクロ具合を表

議事録の作成はとても大変な作業だが、AIとスマートスピーカーを活用して自動化するシステムに注目が集まっている。東京ビッグサイト 青海展示棟で、4/3〜5まで開催中の「第3回 AI・人工知能EXPO」において、TISインテックグループは「COET Record Meeting」(コエット・レコード・ミーティング)を展示している。3月28日に発表されたばかりで、4月に提供が開始される予定のスマートスピーカーを使ったクラウドサービスだ。

こどもの頃には誰しも、教科書の端っこに「パラパラまんが」を描いていたと思うのだけれど、パラパラまんがって、本格的なアニメーションよりもまったく稚拙なものでも、なんだか凄そうに見えちゃうので不思議ですよね。そんなパラパラまんががWebでもできたらなぁ、というのが「スクロールパラパラ」です:)。 スクロールパラパラのサンプル。

VueComponent間で再利用可能な部品を実装するための機能がmixinです。mixinを使った共通化の例はよく見かけますし、私もしばしばやってきました。ただ、どうも自分の実装方法だと後々不便になったり見通しが悪かったりと、使い勝手の悪いものになってしまうことが多かったです。 そこで今回は自分の過去の実装例を見返しながら、なぜ失敗したのか、mixinをどうを使うべきかについて、現時点の考えをまとめてみます。 この記事で紹介する失敗例は、私が携わったプロダクト開発においてデメリットの方が大きかった実装例です。 便宜上「アンチパターン」「失敗例」といった表現をしていますが、あくまで個人的にやりたくないパターン程度の意味合いです。 失敗例1. Template Methodパターンを意識したmixin 暗黙的挙動の危うさ OverrideではなくMergeしているだけ Classの継承とmi

タイトルで全て言いたいことを言ってしまっているんですが、一応軽く経緯とかも書いてみます。 未だ無職のくせにこの1月の頭からとある所に朝の通勤ラッシュ時間帯に電車に乗っていかなくてはいけなくなったので、その時間を有効活用したいなあと思っていたところ、普段聞いているrebuild.fm関連でmiyagawaさんが以下のエントリを書いていたことを思い出しました。 オススメ Tech Podcast 5選 - Tatsuhiko Miyagawa's blog 文字通りTech系Podcastのオススメが書かれていて、候補も5つとちょうど少なそうだと思い、電車に乗って揺られている時間とかぼうっとして頭が働かないときに音楽代わりに聞き始めています。 「Podcast聞いて技術的なことを吸収する」というよりかは単に「英語リスニングの機会を増やして時たま訪れる英語コミュニケーションの場に活かそう」、くら

VS Code でなるべくマウスを触らない設定 - notebook swfz.hatenablog.com の続きです ショートカットの設定ではターミナル↔エディターなど特定のコンポーネント間の移動だけしか設定できなかったのでショートカット結構覚えないといけないかなーと思っていたのですがそんなことはなかったです。 デフォルトでそれぞれの領域に移動できるショートカットが用意されていました Ctrl + q で一覧が出てくるのでそれだけで移動できます 便利ですね VSCodeVim,Postmanの拡張を入れていたのでその設定とかぶっているので試してみても動作しなかったのですがショートカット設定を見直してみたら競合していたので該当の設定を消してあげれば移動ができるようになりました { "key": "ctrl+q", "command": "-extension.vim_winCtrlQ",

くいなちゃんとは、プログラミング言語Kuinの開発者です。 くいなちゃんには、何かしらのきっかけでくいなちゃんが倒されると、次の世代のくいなちゃんに引き継がれる仕組みがあります。 代々引き継がれており、現在は第20期です。 「くいなちゃん」について - その他 「ところで、何代目のくいなちゃんが人気なのでしょうか？」 ふと気になりましたので、人気投票のフォームを作ってみました。投票のアンケートは以下のURLです。 投票URL： https://linkto.run/p/WU53Z3PN 会員登録は不要です。直感でお好みのくいなちゃんに投票していただければと思いますので、お気軽にご回答ください！ pollmakerによる投票フォームの無料作成 アンケートには「pollmaker」というサービスを使ってます。 https://www.poll-maker.com/ 画像付きの投票が作れるサービ

自分はWrite Blog Every Weekという週に一回ブログを書くコミュニティに所属しています。 コミュニティ内ではRSS Feedに基づいてブログを書いたかを判断するBotが整備されており、ブログ管理者がそのBotに対してRSSのURLを登録するフローを取っています。 しかし現状、1人が登録できるRSSは一つまでという制約があり、ブログとQiita、noteを併用して認識させることが難しくなっています。 正攻法で言えばプルリクエストを出そうという話になります。しかし、AWS LambdaやDynamoDBが使われておりデバッグも面倒なので（自分の登録する）RSSに複数のサイトの情報をまとめるという変則的な方法を取って解決することにしました。 その際に、Gatsbyのgatsby-plugin-feedを使って複数のサイトをまとめたのでその方法を紹介したいと思います。 該当のPul

2017年12月から「ブログを楽しく習慣化して書く」ことを支援するために「ブログメンタリング活動（完全無料）」をしている．既に1年以上継続していて，現在メンタリング中のメンティを含めると，計20名を超えている．「ブログを楽しく習慣化して書く」ことを支援するとは言え，メンタリング希望者は経験値によって違う課題意識を持っている．例えば「習慣化したい」というライフスタイルに課題意識を持っている人もいれば，「もっと多くの人にブログを読んで欲しい」という自己ブランディングに課題意識を持っている人もいる．その中でも特に多いのが「ブログ記事のクオリティを上げたい」という課題意識だったりする． 「ブログ記事のクオリティ」とは？ ブログ記事に「正解」はなく，誰が書いても違った良さがある．むしろ，ブロガーとしてオリジナリティを追求することも大切だと思う．さらに「ブログ記事のクオリティ」という言葉も定量的に表現

Vue.js の slot-scope、なかなか理解できなかったのですが、ようやく得心に至りました。 slot-scope、振舞いを抽出するのに便利なのか。 TODOリストの個々の要素への処理 実行例 完了済の TODO のみ出力 実行例 というわけで TODOリストの個々の要素への処理 たとえば、ここで todo-list というコンポーネントがあるとします。 このコンポーネントの責務は、「個々の TODO をループさせ、その個々の要素に処理をすること」になります。 (デフォルト処理は"出力する"ようにしてます) Vue.component('todo-list', { props: { todos: { type: Array, required: true } }, template: ` <ul> <template v-for="todo in todos"> <slot :to

チーム開発をしていると，プルリクエストを WIP (Work In Progress) として送る場面は多くある．例えば，コードを書く前に設計相談をしたり，レビュー依頼をする前にパッケージ構成など全体感を相談したり，プロトタイプなどを一時的に公開することもある．進捗状況を可視化できたり，根本的な手戻りを減らせるメリットもある． WIP を制御するツール 3選 WIP を積極的に使うとしても，WIP のまま誤ってプルリクエストを merge してしまう可能性もあり，WIP を制御するツールを使うことが多いと思う．僕自身が使っている（使ってきた）WIP 制御ツールを紹介しようと思う．今後は最後に紹介する GitHub 新機能「Draft pull requests」を積極的に使っていこうと思う． Chrome 拡張「Do Not Merge WIP for GitHub」 GitHub App

Electron でとある node のモジュールを使おうと思ったら (snip) hoge.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 45. This version of Node.js requires NODE_MODULE_VERSION 64. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`). というエラーメッセージが出力されてしまったというときの戦いの記録です。 問題の分析 NODE_MODULE_VERSION とは Native Node Module Electron のアーキテクチャ 解決策

WEMにまたまた行ってみました 比較的初心者向けの勉強会を偵察してネット上の知り合いに順次ご挨拶していく作戦を今年も続行…ということで、Web Engineer Meetup略してWEMの『WEBエンジニア勉強会』にまたまた行ってきました。 今回は主催のOSCAさんの配慮で、楽しみにしてくれている人や確実に参加できる人が参加できるよう申込枠を工夫し、先着順だけで申込枠が埋まらないように…とのことで、一般参加枠にブログ枠、お手伝い枠と分けての募集になりました。 WEBエンジニア勉強会は主に渋谷近辺で活動、だいたい1～3年目ぐらいの若手の方も多い、Web技術を総合的に扱った勉強会となっております。2017年から始まり、2018年11月が11回め、2019/2/1開催の今回が第11回。 web-engineer-meetup.connpass.com WEMにまたまた行ってみました 金曜夜の渋谷

なにこれ 以前の記事設定いらずのNode製GraphQLサーバー「Graphpack」の使い方でGraphQLのサーバー側を実装を紹介しました。 Graphpackは備え付けのGraphQL Playground IDEで動作確認できますが、せっかくなので今回はクライアント側も作成してみました。 本記事では**Nuxt.jsとApollo Clientを使って簡単なユーザー管理画面を作成する方法をチュートリアル形式でご紹介します。** 最終的にはQuery, Mutation, Subscription全てを実装しますが、 以下のようにステップを分けて、少しずつ実装していきましょう✨ 🔰 プロジェクトのひな型を作成する 💪 Queryを実装する → ユーザー情報が一覧で表示できる 💖 Mutationを実装する → ユーザーの登録・更新・削除ができる 💎 Subscriptionを

コミュニティである議論やブレストを行うために「6つの帽子」という思考方法を用いることになりました。 この記事では「6つの帽子」について調べ、咀嚼した内容を記載します。もしよろしければ、ご一読・間違い等あれば指摘いただけると助かります！ 「6つの帽子」とは？ 得られる恩恵 複雑な物事の単純化→発散 先入観の排除 時間の短縮 帽子の色 白（事実・情報やデータに基づく） 赤（主観・感情や直感） 黒（警戒） 黄（肯定・補強） 緑（創造） 青（統括・整理） 使い方 単独で使う ローテーションする 参考文献 おわりと所感 「6つの帽子」とは？ 水平思考・並行思考の1つです。 ja.wikipedia.org 「白・赤・黒・黄・緑・青」の帽子、それぞれ異なる視点を定義、その色の帽子を被ることで強制的に視点を切り替えることができ、以下のアイディア発散のための恩恵が得られます。 得られる恩恵 複雑な物事の単

グラフィックレコードのためのイラスト講座 2月を受けてきました。これすごくいいです！エンジニア諸氏が覚えるとエンジニアリングにおける強いブキになると確信しています。是非イラスト講座を受けてみましょう。 講師のNEKOGETさんは、グラフィックファシリテーションや要件定義などの達人で、手早くホワイトボード（や紙やタブレット）に綺麗でカワイイ絵をささっと描いて、ファシリテーションしたり、グラフィックレコーディングをしている方です。 グラレコが強いブキになると確信した理由なぜ僕がエンジニアリングでグラレコが強いブキになると確信したかというと、エンジニアは絵や図よりも文字に固執する傾向があるからです。僕のnoteの記事や技術書籍を見ても画像がほとんど無いなーと気づくでしょう。というか僕自身そう思ってます。 自然言語にせよ人工言語にせよ、文字列は基本的には一次元の情報です。頑張って二次元っぽい配置は

2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上げて、ステートフルなコンポーネントをReact Hooksを使いFunction Compoenentに書き換えてみました。 React Hooksの解説をした記事はたくさんあると思うので、今回は書き換えてどう変わったかを見ていきましょう。 該当する部分はHeaderの検索フォームです。 プルリクエストだけ見たいかたはこちら。 https://github.com/mottox2/website/pull/39 > 書き換えのポイント書き換えのポイント > stateの書き換えstateの書き換え これはいろんな記事で言及されているuseStateを用いて書き換えます。 useStateに初期値