サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
qiita.com/howdy39
Nuxt.js、Google Apps Script、スプレッドシート(DB)を組み合わせて検索アプリケーションを作ってみたJavaScriptGoogleAppsScriptVue.jsclaspNuxt Google Apps Script(GAS)で Nuxt 動かしてみたら面白いのでは? と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました! Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec そして Google サイトで上記 URL を埋め込んで完成です。(GAS の 分かりづらい URL を隠
Googleスライドで作られたLT用スライドや社内の資料をみることがありますが、Googleスライドの強みを活かせてない作り方をしている方がとても多いです。 今回は私がGoogleスライドを書く上で意識しているテクニックを紹介します。 Qiitaなので 勉強会などで使う登壇用資料としてGoogleスライドを使う場合 という観点で書いてみました。 先日 Laravel/Vue.js勉強会#10 - connpass というイベントで筆者が実際に作ったスライドを元に解説していきます。 ※@jnchito さんが書かれた【動画付き・プレゼン初心者向け】忙しいITエンジニアのためのKeynote講座 という記事がとても良かったのも、本記事を書こうと思った理由のひとつだったりもします。 マスターを活用する 基本的に文字サイズや色や位置の調整は、スライド側ではなくマスター機能を使います。 マスター機能
GoogleスプレッドシートはSheets APIを使用してプログラムから操作することが可能です。 APIにはセル値を取得する方法が 3種類 用意されています。 本記事はそれぞれの[使用方法] [違い] [どれを使えばいいか]などをまとめた記事です。 前提条件 Sheets APIの基本的な使い方を理解していること。 知らない方は以下の記事を参照。 Googleスプレッドシートをプログラムから操作 - Qiita 方法その1 spreadsheets.get Method: spreadsheets.get | Sheets API | Google Developers {spreadsheetId}をパスに指定するリクエストです。 GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId} includeG
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイントJavaScriptsentryFirebaseNetlifyNuxt 技術構成はこんな感じで作りました。 Nuxtというよりかは個人開発における技術選定のポイントを主体に解説した記事です。 これから個人開発をやろうとしている人の参考になれば幸いです。 どんなWebサービス? Google Calendar の表示/非表示を一括で切り替えるWebサービス。 ※ゲームとかでよくある装備マイセットのGoogleカレンダー版です。 G Suite を導入している企業だとカレンダー画面が会議室や他のユーザーの予定で溢れてしまいます。 TV会議ができる会議室のセットや同じチームメンバーのカレンダーセットをつくり、セットごとの予定をカレンダーのTOP画面で目視で確認できるようになります! 触っ
Nuxt, ElementUI, Storybook 構成で始めようとしたときに、StorybookにElementUIを適用させるのにちょっと手こずったので手順を残しておきます。 最終的なソースです。 howdy39/nuxt-storybook-element-boilerplate: Nuxt, Storybook, ElementUI, Boilerplate Nuxtプロジェクトを element-ui で作成
const puppeteer = require('puppeteer'); let page; async function getBrowserPage() { // Launch headless Chrome. Turn off sandbox so Chrome can run under root. const browser = await puppeteer.launch({ args: ['--no-sandbox'] }); return browser.newPage(); } exports.getTrends = async (req, res) => { if (!page) { page = await getBrowserPage(); } await page.goto('https://qiita.com'); const result = await
スプレッドシートを Web API 化するアプローチとして Google Apps Script を使ったやり方があります。 最近、人気記事になっているのがまさにそのパターンですね。 3分で API を作って世の中にデプロイするライブコーディング〜今日から君もスピードスターエンジニア〜 しかし、Google Apps Script を使った手法には次のような弱点があるため、簡易的なものにしか使えません。1 URLを自由に設定できない リクエスト数など各種制限 本記事では、サーバーやクライアントなど好きな環境からスプレッドシートを読み込む手法の解説と、スプレッドシートをWebAPI化するサービスの作り方について記載します。 スプレッドシートの読み込みは、GAS使わなくても簡単にできますよ! Web API を動かしてみよう 読込対象のスプレッドシート デモ用として次のスプレッドシートを用意し
技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の3つを解説します。 1. Console の便利機能 2. 実際に Qiita の画面を解析する手順 3. リアルタイムで評価結果を返す Eager Evaluation (Google IO 2018 で発表されました) 便利機能(コマンド
GitHubでトレンド入りしているJavaScriptライブラリGranim.jsの紹介記事です。 デモ画面が用意されているのでどんなのか見てみてください。 ※執筆時点(2016/09/15)のバージョンはv1.0.5です。 公開されて間もないため、かなりの頻度で更新されています。 バグフィックスや機能追加等の変更が入ると思います。 使い方 基本的にはデモ画面やAPIを見てください。 本記事ではそこを見ても分かりづらかった点を記載していきます。 ライブラリはzipをダウンロードした方が手軽です。(npmでも提供されています) https://github.com/sarcadass/granim.js/releases 上記から最新版を落としておきます。 最小構成は以下の様になります。 <canvas>タグを用意 granim.jsを読み込む new Granim({});でグラデーション
次の記事でGASをローカル環境で開発するためのテンプレートを作りました。 Google Apps Script をローカル環境で快適に開発するためのテンプレートを作りました - Qiita ローカル開発ができるようになったら、次にほしいのはCI/CD環境ですよね。 テストが通らないコードをマージしたくないですよね。 マージされたと同時に自動でデプロイしたいですよね。 上記のテンプレートに Circle CI を設定したサンプルリポジトリを作ったので参考にしてみてください。 howdy39/gas-clasp-library ※このリポジトリはGASのライブラリ使用時のサンプルでもあります。(SlackAppを使っています) 本記事では Circle CI 使用時のCI/CD環境の構築手順を解説をしていきます。 clasp の仕組み 設定する前にまず clasp の仕組みを理解しましょう。
gas-clasp-starter という Google Apps Script を ローカル環境で開発するためのテンプレートを作りました。 2018年に登場した、google/clasp をベースに webpack, TypeScript, TSLint, Prettier, Jest を利用したテンプレートになっています。 GAS って新しい構文で書けないしソース管理もできないから微妙 もっと便利に利用できないかな みたいな方に読んでもらえれば幸いです。 本記事では、gas-clasp-starter を使うことによるメリットや、利用する際の流れを解説します。 ブラウザ上のスクリプトエディタで開発するのではだめなの? 小さなコードならスクリプトエディタで十分です。 ただし、ある程度のコードになる場合はローカル環境に切り替えたほうが良いでしょう。 GAS は JavaScript ベース
February 26, 2018 Calendar event triggers are now available. You can use these triggers in conjunction with the Calendar advanced service to discover recently changed calendar events via regular sync operations. GAS にGoogleカレンダーのイベント変更検知機能が実装されました。 これを使うことで、自分のカレンダーに予定が書き込まれたときだったり、(G Suite利用時の)会議室カレンダーに予定が登録されたとき、なんかにも応用できるかと思います。 サンプルのGASを書いてみたので参考までにどうぞ。 サービスの有効化 まず Caledar Service を使うので有効にしておく
Chrome 拡張機能を作っているのだが、コンテキストメニューに追加するときのオプションがちょっとややこしかったのでメモがてらまとめておく。 コンテキストメニューというのは、右クリックしたときにでてくるやつです。 使い方 background.js 内で次のコードを書く。 title がメニューに表示される内容で、contexts に ContextType を指定する。 type に ItemType を指定するだけ。 chrome.contextMenus.create({ title: "コンテキストメニューを追加", contexts: ["all"], type: "normal", onclick: function (info) { console.log(info); } }); 使い方としては2種類あって contexts に複数の ContextType を指定するか、
Apps Script Advent Calendar 2017に App Maker 記事ばっかり書いてきたけど最後の日なので GAS ネタを書く。 以前 GAS のログ出力方法について記事を書いたのだけれど、このときは Stackdriver についてよく知らなかったので、Googleドキュメントに出力するというやり方で書いた。 Google Apps Scriptのログ設計 #gasja - Qiita 上記記事を書いた後に Stackdriver を使う機会があって、こいつはかなり便利 というのがわかったので Stackdriver と連携させるとどんな感じなるのかを解説する。 Stackdriver には3種類ある。 Stackdriver Logging Stackdriver Error Reporting Stackdriver Monitoring 本記事では Loggi
Path parameters spreadsheetIdをパスに含めてスプレッドシートを指定します。 Request body 書き込む内容はUpdateCellsRequest形式で送ります。 ここではUpdateCellRequestの各々のプロパティについて解説していきます。 { "rows": [ { object(RowData) } ], "fields": string, // Union field area can be only one of the following: "start": { object(GridCoordinate) }, "range": { object(GridRange) }, // End of list of possible types for union field area. } startプロパティ GridCoordinat
Google Apps Script(以降はGASと記述する)を使うとGoogle スプレッドシート・Google ドキュメント・Google フォームに独自のメニューを追加する事ができます。 また、メニューから自身で定義したGASの処理を動かせます。 本記事では独自メニューの作り方を解説します。 以下の手順でおこないます。 Uiクラスを取得する Uiクラスからメニューを作成する メニューにアイテムを追加する メニューをUiクラスに追加する コードの記述 まずはスプレッドシートでのやり方を解説します。 スクリプトエディタを開いて以下のコードを記述します。 ファイルが開かれたら自動でメニューが追加されるようになります。 /** * ファイルを開いたときのイベントハンドラ */ function onOpen() { var ui = SpreadsheetApp.getUi(); // Ui
先日 Google Domains が日本でも解禁されました。 このGoogle DomainsとGoogleが提供しているメールサービス(オフィススイート)である G Suite を使うことで、 設定不要で簡単に独自ドメインのメールアドレスが作れるようになりました。 今まではMXレコードの設定などが初心者キラーでしたが、この面倒な部分を自動でやってくれるのでとても簡単に作ることができます。 本記事では作成方法を画面キャプチャーを添えて紹介します。 前提条件 Google Domainsを契約済みであること G Suiteは未契約であること G Suiteメールアドレスの作成 メールの画面から G Suite のカスタムメールを作成していく 次へ 管理者アカウントとバックアップメールアドレスを入力 バックアップメールアドレスに初期パスワードが送られます。 金額の確認 デフォルトはベーシック
2017-12-30 新しく記事を書きました、こっちのほうがおすすめです。 GAS と Stackdriver(Logging, Error Reporting) を連携させる - Qiita 最近Google Apps Script(以降はGASと記載)を始めました@howdy39です。 GASを使い始めてまず思ったのは ログ出力(デバッグ)が辛い ということです。 この辛いログ出力をなんとかしようというのがこの記事の内容です。 Logger.log() GASのログ出力はLogger.log()が基本になると思うのですが、 1. 処理実行 2. スクリプトエディタを開いて[表示]->[ログ](Command + Enter) とか面倒すぎて辛い。 Browser.msgBox() Broser.msgBox()を使えば実行時にすぐ確認できますが、閉じるのも面倒です。 そもそも画面がない
クラス クラスは学校のクラスと同じ感覚でいいと思います。 教師と生徒を含み、お知らせや課題のやり取りを行います。 クラスを作る(担任) https://classroom.google.comにアクセスしてクラスを作成します。 クラス名等を聞かれるので適宜入力します。 テーマを変える(教師) 画面右のテーマを選択や写真をアップロードからクラスのテーマを切り替えることができます。 クラスに教師(副担任)を追加する(教師) クラスには副担任を追加することが可能です。 概要タブを選択し、教師の招待から招待メールを送ります。 招待に応じると教師(副担任)が追加されます。 クラスに生徒を追加する 2パターンあります。 教師(副担任)を追加した場合と同様に、教師が生徒に招待メールを送るパターン クラスに設定されたクラスコードを生徒が入力して参加するパターン 教師が生徒に招待メールを送る 生徒タブを選択
本日(日本時間3月9日)GoogleがVideo Intelligence APIをプライベートベータで公開しました。 ニュース記事 Google、ビデオ中の対象を認識する機械学習API公開―Cloud Next 2017 | TechCrunch Japan [速報]Google、動画になにが映っているかを自動的に判断する「Video Intelligence API」発表。Google Cloud Next'17 | Publickey 公式Blog Announcing Google Cloud Video Intelligence API, and more Cloud Machine Learning updates Video Intelligence APIはプライベートベータのため使うには申請が必要ですが、誰でもすぐに試せるデモが用意されています。 本記事の内容はデモの解説
本日(2017/2/1)、GitHubにトピック機能が追加されました。 Introducing Topics | 公式Blog TL;DR GitHubのリポジトリにトピック(タグ)がつけられる トピックは自由に設定可能 トピックで検索可能 トピックを設定する Add topicsというリンクが追加されているのでクリック トピックの設定 スペース区切りで入力していく 自動でタグが提案されるのでこれを選ぶと楽。 ただし機械学習で提案しているみたいでまだ賢くない。 提案されたもの以外も自由に設定可能。 登録後 トピックで検索する トピックをクリックすることで検索ができる ※topic: トピック名で手動検索もOK 検索後 さっき設定したやつは? スターが低いので2ページ目に表示されてました。
筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」 と思っていた機能をChrome拡張機能として実装しました。 ぜひインストールしてみてください。 Q Acceleratorと名付けました。 Qiitaでの活動を加速させるもの、といった感じです。 ※Accelerator(アクセラレーター)は「加速装置」「加速器」などの意味があります。 2017/03/03 時点ユーザー数 910ユーザーの方が使われています。 TL;DR インストールはChrome ウェブストアから https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/ 現在(2018/4/29)提供している機能 行番号を表示 記事の更新時間を表示 コピーアイコンを表示 自動いいね/自動ストック ヘッダー固定機能 新規投稿時のテ
ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう! JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu
日本時間 2016/11/10 にGoogleスライド(プレゼンテーション)を操作するAPIが公開されました。 Google Slides API ニュース記事 Google、さまざまなデータソースを統合したプレゼンを自動的に作成できる「Google Slides API」 本記事では以下の4点を記載しています。 Googleスライドとは API実装例の紹介 ブラウザ上で動くデモ リファレンスを読む前に知っておいたほうが良いこと Googleスライドとは 一言で言うとGoogle版PowerPointです。 Googleスライド 特徴は以下のような点です。 PCブラウザやスマホで操作が出来る 共有機能が充実している(Webへの全公開やメールアドレスを指定した共有。また書き込み・読み取り権限など細かい共有) 変更がリアルタイムで反映される(複数人での同時編集が可能) エクスポート機能によるP
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか? 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
GitHubでトレンド入りしていたChrome拡張機能Falconの紹介記事です。 特徴としては Webサイトの中身まで検索対象とするところです。 この前見た○○の記事どこだっけか、みたいな探し方をする人にはとても良い拡張機能だと思います。 ※執筆時点(2016/09/19)のバージョンはv0.1.4です。 使い方 まずはインストールしましょう。 https://chrome.google.com/webstore/detail/falcon/mmifbbohghecjloeklpbinkjpbplfalb インストールが終わったら 適当にWebサイトを巡回しましょう。 ブラウザのオムニボックス(アドレスバー)に 「f 検索したい文字列」を入れます。 以下はReactで検索した例です。 「URL 日付 タイトル」の形式で履歴から検索&表示されます。 オプション デフォルトは現在から2週間以
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext(PostCSS)の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化(PostCSS) playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか? 筆者はどこかで聞いたことあるぐらいで 次のCSS? またSassみたいなやつ作ったのか もうSassで終わりにしようぜ(覚えるの辛い) といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも?と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
次のページ
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く