サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
engineer-blog.ajike.co.jp
Node.js 2022.04.21 teshima 初めまして、iOSエンジニアの手嶋です。 弊社のエンジニアチームで共通のフロントエンド環境を作成するにあたり、iOSエンジニアの私もnodenvを使用してNode.jsを導入することになったため、今回はその導入手順について紹介しようと思います。 nodenvについて nodenvとはNode.jsのバージョンを管理するためのバージョン管理ツールです。 これを導入することにより、チーム開発をする上でバージョンを揃えた環境を構築することが可能になります。 導入方法 今回はmac環境での導入の説明となります。 また、前提としてhomebrewが入っているものとします。 現在のNode.jsのバージョンを確認 まずは現在設定されているNode.jsのバージョンを確認します。 既にNode.jsがインストールされている場合はインストールされている
JavaScript 2020.08.07 kito 今回はwebpack導入から共通HTMLのテンプレート化を実装していきたいと思います。 webpackとは webpackとは、複数のモジュールを1つにまとめて出力することができる、モジュールバンドラのことです。 webpackを導入することによって jsファイル間での依存関係の解消 コード記述量の減少 サーバーへのリクエスト数の減少 などのメリットがあります。 ディレクトリの構成 今回はこちらのディレクトリ構成で進めて行きます。 dist/以下は、ビルドした後に生成されるファイルです。 webpack-sample/ ┗dist/ ┗bundle.js ┗html/ ┗index.html ┗sample.html ┗src/ ┗js/ ┗index.js ┗html/ ┗index.html ┗sample.html ┗common
API 2020.09.18 mine こんにちは、フロントエンドエンジニアの峯です。 突然ですがみなさん、フロントエンド開発を行う際、どのくらいバックエンド側の事を意識してますか? バックエンド側の経験が無いとなかなか難しいところだと思います。 きっとフロントエンド、バックエンド双方で「こうだったら良いのにな…」なんて呟きながら仕事してたりするんじゃないでしょうか?笑 そこで、フレームワーク等を使った開発を行えば、担当領域の線引きがしっかりとできて、双方楽だったりします。 しかし、その場合フロント側でAPI設計を行う必要が出てきたり、どんなデータ欲しい?なんて問い合わせを受けたりするかと思います。 今回は、そんなAPI設計を行う場面で、最低限どんなところを意識して設計を行っていけばいいのかを紹介していきます。 0. APIについて理解する必要性 React、Vue.js、Angularな
GAS 2020.04.30 mine こんにちは、フロントエンドエンジニアの峯です。 今回は、前回の「祝日対応Slackボットを作る!」に引き続き、Slack Botを作成します。 時間管理ツールの「Toggl」APIを使って、タスク情報を取得してSlackに昨日実施タスクを投稿してくれるBotを作成します。 テレワークで仕事をこなしていると、こんな事はないでしょうか? 自分が担当しているタスクをチームに共有することが難しい そんな時に!Slackにメンバーのタスクが共有されてくれば、多少の双方の環境は改善するのではないでしょうか。 是非、参考にしてみて下さい。 ポイント 今回は、毎朝、前日のタスク一覧を投稿するBotを作成します。 ご都合に合わせてアレンジしてみて下さい。 個人の識別を可能にする(Botアイコン、Bot名を個別に設定) 前日のタスクのみまとめて投稿 準備 Toggl A
GAS 2020.03.16 mine こんにちは、フロントエンドエンジニアの峯です。 業務でSlackボットを活用しているところは多くあるかと思います。 作ったボットを平日のみに動かしたいのに、「祝日にも出ちゃう…」そんな事ないでしょうか? 今回は、Slackの「Incoming Webhook」アプリと「Google Apps Script」を使って、祝日対応したボットを作ってみました。 Slackで「Incomin Webhook」アプリを有効化 まず、Slackでボット用のチャンネルを作成してくだい。 SlackのAppディレクトリから「Incoming Webhook」を検索してSlackに追加します。 チャンネル選択画面が表示されるので、ボットのチャンネルを指定してください。 Webhook URLが発行されます!(キャプチャでは白塗りしてます。) このURLを使って、ボットに
JavaScript 2019.05.10 matsunaga PHPプログラマーの松永です。 今回は、jQueryを使用し、パスワード表示時にマスキング有無を選択できるようにする方法をご紹介します。 パスワードを管理しているサービスでは必須の機能ですが、簡単に実装することができ、導入にハードルがないのでおすすめです。 前提 今回はjsfiddleを使用し、サンプルを作成しています。 簡易的に作成していますので、Pタグなど使用し改行を行っています。 業務ではしっかりとCSSでレイアウトの調整を行っていただければと思います。 HTML HTMLはとてもシンプルで、 パスワードを入力するインプット パスワードに対してマスキング有無を選択するチェックボックス のみです。 <p> <input type="password" id="js-password" class="password" />
git 2017.10.06 yamamoto フロントエンドやバックエンドを担当することがあります、山本です。 今回は、gitアカウントをリポジトリごとに自動で変更されるようにした時の作業内容を共有します。 使用したのは、 git version 2.14.1 です。 gitアカウントを複数切り替えて使用されている方に見てもらえるとお役に立てるのではないかと思います。 まずはgitのバージョンが2.13以上になっているか確認 今回、アカウントの切り分けに includeIf を使用するのですが、gitのバージョンが2.13より古いとそのコマンドが存在していないため、エラーは出ないものの、設定が完了しないという現象に陥ります。ちなみに私はここで30分ほど詰まっておりました。 公式リファレンス: Git - git-config Documentation 私のgitはバージョン2.14.1
JavaScript 2018.10.15 komatsu どうも、フロントエンドエンジニアの小松です。 エンジニアブログなのに非エンジニア向けの記事になり恐縮ですが、最近社内で 『このプロジェクトはJSフレームワークを導入した方がいいの?』 『どのフレームワークがオススメなの?』 『そもそもどんなときに必要なの?』 的なやり取りをする機会が増えたので、エンジニア目線でそこらへんの認識を記事にしてみようかと思います。 あくまでエンジニアでない方々にわかりやすく伝えるために相当乱暴な表現をしてますが、 ギークでジェントルマンなエンジニアな方々はどうぞ見過ごしてやってください… まず「JavaScriptフレームワーク」ってなに 「JavaScriptフレームワーク」と聞いて真っ先に何を思い浮かべましたか? 先に個人的見解になりますが、2018~2019年を生きる皆さんはReact/Vue/A
Webフォント 2018.08.23 ichikawa こんにちは!フロントエンドエンジニアの市川です。 今回はWebフォントについてのお話です。Webフォント=重いというイメージがあるかもしれませんが、高速で表示させる為のテクニックをご紹介したいと思います。 Webフォントとは? Webフォントが無かった時代、サイト上の文字はユーザの端末内に収録されているフォントでしか表示することができませんでした。 しかし、Webフォントの登場により、サーバ上に置かれたフォントデータをユーザが読み込むことで、ユーザの環境に左右されることなく、任意のフォントを表示させることができるようになりました。 フォント1つでサイトのイメージもガラッと変わるので、どんな環境でも同じデザインが表示されるのは、ユーザにとっても制作者にとっても嬉しいですよね! Webフォントのサービスで有名なのは、やはり「Google
PWAウェブプッシュ 2018.02.08 yamamoto エンジニアの山本です。 Progressive Web Applicationの入門記事『PWA対応をするためにやった最低限のこと』に続きまして、プッシュ通知を実装していきたいのですが、その前にWebプッシュの仕組みを理解する必要があると感じたため、本投稿ではどのようにWebプッシュが機能しているのかについて、説明します。 Webプッシュの登録から送信まで Webプッシュに関して、大きく分けて2つの段階があります。 登録が完了するまでの準備段階 プッシュ通知を送信する実行段階 この仕組みを段階的に確認しながら、プッシュ通知の理解を深めていただければと思います。 (準備段階)Webプッシュの登録が完了するまでのフロー まずは、Webプッシュの登録が完了するまでのフローをみていきます。 全体像はこんな感じです。 ステップ1 ユーザー
D3.js 2017.11.23 komatsu こんにちは、食戟のソーマにどハマりしているフロントエンドの小松です。 今回はタイトル通りD3.jsを一行ずつ読み解きながらグラフ実装を進めていきます! 「D3.jsってなんだろう?」という方はこのぜひこの記事を最後まで読んで頂ければと思います。 ※ちなみにD3のversionは4系で進めます D3.jsとは D3.js(以下D3)のD3は、「Data-Driven Documents」の頭文字をとって命名されているようです。 日本語で言うなら「データ駆動型ドキュメント」的な…日本語だとちょっとよくわからないのですが、とりあえずJavaScript製のデータ可視化ライブラリになります。 この2年間くらいのトレンドを見てみると熱心なユーザーとコミュニティのおかげで衰退することなく使われ続けているようです。 なので、今から学習しておいて損はしない
PWA 2017.12.15 yamamoto エンジニアの山本です。 Progressive Web Applicationの入門編として、最低限対応するためにすべきことをメモとしてまとめました。 まずは、PWAに対応することを目的にしております。プッシュ通知の実装は次回のブログに書く予定です。 さっそく、説明に入りたいと思います。 PWAとは PWA( Progressive Web Application )とは、簡単にいうとスマートフォンでWebサイトをアプリのように使うことができるものです。 詳細な説明はこちら Your First Progressive Web App | Web | Google Developers 以前からスマートフォンブラウザには、『ホーム画面に追加』という機能がありました。 以前の機能は、ホーム画面にアイコンが追加され、そのアイコンをクリックするとブ
このページを最初にブックマークしてみませんか?
『エンジニアブログ – デザイン会社アジケが運営するUXエンジニアのためのブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く