Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
作った経緯 これまでスプレッドシートを使って社内チームの工数管理を行なっていたが、 「もう少し細かい工数管理がしたい。」 「集計がしずらい」 「残業管理もできれば」 みたいな話が上がってきたので、 元々スプレッドシートを使っていたので、 GASでフォームを使ってスプレッドーシートに情報が入っていくようなシステムをVueで作った。 技術的には GAS,Vue,スプレッドシート関数 と言ったところ。 現時点で実装が出来たこと スプレッドシートでクライアント、プロジェクト、案件を管理 ユーザーが投稿するフォームにはスプレッドシートのクライアント、プロジェクト、案件が選んだ内容でプルダウンが切り替わる。 ユーザーは1日ごとに行なったクライアントプロジェクト案件_かかった時間をフォームから入力 フォームがSUBMITされた内容を計算用シートにぶち込む。 気をつけたところ 機密情報もあるので、基本クロ
はじめに GASのHtmlServiceを使ってSPAライクなWEBアプリケーションを書くことになったのでその時のメモです。 こちらの記事の続きとなります。 前回までの記事 GAS+Vue.jsでサーバレスなWebアプリ① GAS+Vue.jsでサーバレスなWebアプリ② 本記事では、サーバサイド側のGASから取得したスプレッドシートのデータをVueインスタンスを用いて描画してみたいと思います。 今回のアウトライン GAS関数呼び出しの基本 クライアントサイド実装 サーバサイド実装 終わりに それではさっそく書いてみるよ。 1. GAS関数呼び出しの基本 クライアントサイドからのGAS関数の呼び出しは大きく2つの方法があります。 一つは前回の記事でも少しだけ触れたのですが、テンプレートタグを用いる方法です。 <?!= yourServerSideFunction() ?> こんな感じのタグ
Vue.jsを使ってカレンダーっぽいものを作ってみました。 全てが祝日かつ大安の素晴らしいカレンダーです。 なるほどHOLIDAYじゃねーの ちなみに画面レイアウトはcssでdivにdisplay:flexを適用していい感じに並ぶようにしてます。 Vue.jsについて 調べるとMVVMフレームワークだとかの話が色々出てきますが、とりあえず今のところは 簡単にデータバインディングができたりカスタムタグっぽいもの(component)が作れたりするので javascriptで動的なWebページを作りたい時とかに便利 ぐらいの認識です。 基本的な使い方は公式のガイドを読んだほうが早そうです。 Vue.jsを使ったところ HTML側 <div id="calendar"> <div class="flex main"> <!-- 前月移動ボタン --> <div class="headerItem
<template> <div id="main"> <mavon-editor v-model="value" language="en" /> </div> </template> <script> import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) new Vue({ 'el': '#main', data() { return { value: '' } } }) </script> 開発者が中国の方のようでデフォルトの設定が中国語となっているのでlanguage="en"のアトリビュートを設定しましょう。すると英語表記になって使い勝手が良くなります。 ツールバーのカスタマイズ デフォルトだ
2024-09-07 プログラミングを独学で学ぶのは無理じゃない!経験者が解説 最近、パソコンだけでなくタブレットやスマートフォンの普及がすすみ、様座生アプリも開発され、プログラミングに興味を持つ人も増えているのではないでしょうか。 2020年からは小学校でプログラミングの授業も開始されます。 しかしプログラミングといっても、どのように勉強すればいいのか。 プログラミングを学びたいけれどスクールはお金がかかるし時間もないしまずどこから手を付けていいのかわからないという人も多い […] 2024-09-07 【実体験から語る!】エンジニアのリモートワーク、やり方やポイントは? リモートワークという仕事の手段を知っていますか? 最近話題の働き方改革でも推進されているリモートワークは、注目されている働き方であり、大手企業でも取り入れて実践しているところは多くあります。 このリモートワークは、エン
v-forをnestするために おつかれさまです。先日のVue.js meetup#6はお疲れ様でした。ピンクの髪色のイケメンさんすごく楽しかったです。 記事に間違いがあればPRでもください〜〜〜!!! Vue.js アドベントカレンダー2 15日目の記事です。 https://qiita.com/advent-calendar/2017/vue2 やりたいこと <div v-for> <div v-for> <div v-for> v-forをネストしてデータをすべて出力したい。 </div> </div> </div> 今回扱うデータ ブログのカテゴリごとに記事を出力する。 データ:カテゴリ(数:0以上)ごとにブログ(数:0~3)をもたせています。 ブログにはタイトルと画像URLを持たせています。 v-forをnestするには同じ名前を使うだけ 同じ変数名を使ってやればデータにアクセス
Nuxt.js とは Nuxt.js は「ユニバーサルな Vue.js アプリケーションを構築するためのフレームワーク」です。 ユニバーサルという言葉を辞書で引くと、「すべてに共通であること」、「普遍的・一般的」という意味になります。 ここで言う「ユニバーサル」とは、「サーバサイドとクライアントサイドの違いを抽象化することで無視して、一貫した方法でUIレンダリングすること」です。 公式ドキュメント を見れば最も理解が進むと思います。 Nuxt.js はコンポーネントとルートをマッピングするための vue-router や、Vue.jsで状態管理するためのライブラリである Vuex を内包しています。 Nuxt.jsの利用シーンについて Nuxt.jsの主な機能は以下のようになっています(公式ドキュメントより引用)。 Vue ファイルで記述できること コードを自動的に分割すること サーバ
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
こんにちはJJです。今回はVue.jsの機能の1つであるcomputedとmethodsの使い分けを意識して簡単な検索機能を題材として説明したいと思います。 Vue.jsとは 公式サイトでは、このように記述されております。 Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 引用: https://jp.
概要 サーバ側しかほぼ実装しない自分が、仕事上Vue.jsを触る必要が出てきたので簡単な一覧画面を作ってみる。 あくまでチュートリアルレベルなのであしからず。。。 出来上がったもの: jsFiddle github 参考サイト様はこちら データを表示させてみる まずはHTMLに値を表示させてみます。 vueインスタンスを生成し、表示させたいデータをdataに格納し、インスタンスを適用させたい要素をelに指定します。 HTML側ではそのプロパティから値をレンダリングする仕組みになっています。 const items = [ {'Id':'1', 'Name':'Tanaka', 'Age':'20'}, {'Id':'2', 'Name':'Suzuki', 'Age':'30'}, {'Id':'3', 'Name':'Takahasi', 'Age':'40'} ]; const ids
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね!! 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって? Backend as
背景 こんなサイトを作りました https://meatup.love/ 🍖 どうやっていい感じにデータを取得してきたのか気になる、という方がいたので、ここに書いてみます! 概要 Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る ほとんどは上記の記事の内容です。 ただこの記事では、「GoogleスプレッドシートをAPIサーバー化し」てフロントでデータを受け取るところまで記載します。 この記事に書いてあること こんなデータが こんなデータ形式に変換され [ { "title": "1973年のピンボール", "review": "ウイスキー飲みたくなる", "rate": 4 }, { "title": "風の歌を聴け", "review": "忘れた", "rate": 3 }, { "title": "ノルウェイの森", "re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く