はてなブックマーク

この記事はJavaScript Advent Calendar 2019の6日目の記事です！ 1日遅れてしまってすみません… 最近、クライアントワークで実装した機能を紹介します。 機能としては大きいものではないですが、何回か同じような機能を実装しているので、意外と使うことはあるかもしれないやつをまとめました。 ライブラリやFWは使わずにPure JavaScriptで書いてます ES2015の書き方なので、そのままではIE11で動かない部分などがあります ラジオボタンの選択で活性・非活性が切り替わるセレクトボックス 選択した項目によって、さらに入力したり選択できるようにしたいというケースが結構あります。 See the Pen ラジオボタンで活性・非活性が切り替わるセレクトボックス by daichi (@kandai) on CodePen. これはセレクトボックスを非活性にしていますが

この記事はPWA Advent Calendar 2019の1日目の記事です。 以前、PWA Night vol.9 で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。(当日のスライドはこちら) 作ったもの まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。 QRコードを読み込んで結果を表示するというものですが、これがブラウザで動いています。 実際に公開されていますのでよかったら使ってみてください。 サイト：https://simple-qr.netlify.com/ GitHub：https://github.com/KanDai/simple-qr-reader 確認している対応ブラウザは以下です。 Android Chrome Android Firefox iO

この記事は JavaScript2 Advent Calendar 2018 の14日目の記事です。 JSでカレンダーを表示したくてライブラリを探したのですが、要件に合うライブラリが見つからず、生のJSで書きました。 そしたら、意外とすんなりできたし、良い勉強になりました。 JS勉強中の人とか、とりあえず何か作ってみるときの練習におススメです。 カレンダーは日付処理を学んだり、機能追加がしやすいので課題としてはやりやすいと思いました。 せっかくなので、練習問題としてこんな機能をつけていくと勉強になるんじゃないかという要件を考えて実装してみたので紹介します。 冒頭で言っている要件とは違います。必要になったものはもうちょっと複雑な要件がありました。 考えた要件 空きが出るマスを埋める 数ヶ月分表示する ボタンで次の月や前の月の表示ができる 日付をクリックしたらイベントを発生させる 今回は実装し

この記事はPWA Advent Calendar 2018の10日目の記事です。 6日も遅れてしまいました…すみません。 任意のタイミングでホーム画面への追加をしたい PWAといえばホーム画面に追加で端末にインストールすることが可能ですが、Chrome 68以前は メニューを開いて自分でホーム画面に追加する 下部に表示されるA2HS bannerバナーから追加する しかできませんでした。 とはいえ、たまたま訪問したサイトなどで急にバナーが出てきても、中々インストールしようって気持ちにはならないと思います。 できれば、ユーザーにサイト内のボタンなどを押してもらったタイミングなど、任意のタイミングでインストールできるようにしたいところです。 Chrome68での仕様変更 Chromeのバージョン68で仕様変更があり、 A2HS bannerバナーがミニインフォバーというコンパクトな表示に変更

この記事は Google Apps Script Advent Calendar の1日目です。カレンダー立ち上げたので1日目書きます！ 最近、自分の技術メモをSlackとスプレッドシートを使って整理するという試みを始めたので紹介します！ やっていることは、Slackで自分のDMに作業ログを呟いて、1日1回スプレッドシートに保存しているだけです。 やろうと思った動機 作業中に詰まったところや手順をメモしたりするのですが、これをうまいことまとめたいと思ったのがきっかけです。 僕の場合、ちゃんと整理したわかりやすいメモを残そうとすると、そっちに気を取られて作業の進みが遅くなってしまう。 とはいえ、適当に書いてしまうと後から見てもよくわからない！というのが問題としてありました。 良い方法はないかと考えた結果、 作業したときに雑でも良いのでメモをする その場でメモをわかりやすく整理することは諦める

この記事は Vue.js #2 Advent Calendar 2018 の16日目の記事です。すごく遅れてすみません。 個人の技術メモの話です。 今まで、Kobito・Boostnote・Kibelaなど色々使ってきましたが、 マークダウンファイルで管理 VSCodeで編集 クラウドストレージで共有 という形に落ち着きました。 ツールで管理すると、乗り換えたくなった時にめんどくさいんですよね… ただ、ブラウザで見たくなる時があるので、ちょっと触ってみたいと思っていたVuePressでサイト化することにしました。 インストール 初めて触るのでインストールから # package.json作る。内容は適宜に npm init # VuePressのローカルインストール npm install -D vuepress # docs以下のディレクトリのファイルが使われるようなので作成 mkdir

今まではAngularの1.4とOnsen UIでMonacaアプリを作っていたのですが、新しくMonacaアプリを作る際のフレームワークとしてOnsen UI for Vueを使ってみたかったので、試しに簡単なTODOアプリを作ってみました。 Monaca CLIでプロジェクト作成 Onsen UI for Vueはコードのコンパイルが必要なのでクラウドIDEでは作成できません。 コンパイルが必要なMonacaの新規プロジェクトの作成には、MonacaCLIが便利です！ MonacaCLIの詳しい紹介は省きますが、今回は Onsen UI and Vue.js のミニマムテンプレートをベースに作ってみます。 プロジェクトを作成して monaca preview でプレビューしてみるとこんな画面が表示されます。 ミニマムテンプレートの中身を覗いてみる 何やらたくさんファイルが入ってます。w