DjangoとVueでカンバンアプリケーションを作る(1)
PyConJP 2018の発表用に作成したDjangoDeKanbanを作成するチュートリアル記事です。 最終的に以下のようなアプリケーションが構築できることを目指します。 いいから完成形よこせよ、って方は以下のリポジトリからどうぞ。 注意事項 本チュートリアルではDjango,Vue,PostgreSQL、Redis等を扱います。これらの初歩・インストール・環境構築は扱いませんが、チュートリアルではこれらの知識がなくても始められるようにDockerのテンプレートを用意しています。そのため、docker-composeが実行できる環境であれば始められます。 DockerComposeの環境構築については様々な記事が出ていますので別途お探しください。なお、ドキュメントも十分わかりやすいかと思います。 環境の準備 事前確認 本チュートリアルではDockerを使用した環境上でアプリケーションを構
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 長々としたタイトル通りのブツを作りました。 その技術内容を紹介をします。 ブログサイト STUDIO Blog | Webデザインのための、クリエイティブメディア Studio Designのマーケティングブログです。 元々Mediumを使っていたところから新規に作ることになったのですが、「じゃあ当然headless CMSでCDNでPWAなサイトですよね！？」と自分なりのフロント技術観を振りかざしてしまいました。 パフォーマンス キャッシュなしのファーストページはまあまあ及第点でしょうか。 遷移時や再訪時だとキャッシュ優先でネットワー
Nuxt.jsでポートフォリオサイトを作製する - Qiita
フロントエンドについての学習のため、Nuxt.jsでポートフォリオサイトを作製してみました。 fmatzy.github.io GitHub Pagesで (お金をかけずに) ホスティングしつつ、多少動的なこともしてみました。Vue.js、Nuxt.jsについてほぼ知識のないところから作製したのでかなり荒削りです。 fmatzy/fmatzy.github.io-dev 工夫した点は以下の通りです。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得して表示した。 トップページはMarkdown形式で書くようにした。 Nuxt.jsで静的なページを生成してGitHub Pagesでホスティングした。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得 せっかくSPAのフレームワークを使用するので、なにかのAPIを叩いて動的にコンテンツを生成することにしました。
Goで定期的にTweetするTwitter Botを作ってみる - Qiita
概要 土曜の昼下がり、特に何をするでもなく、やる気が出なかったので、手元の日めくりカレンダーを毎日1回つぶやいてくれるTwitterBotでも作ろうかなと考えて、Goで作ってみました。ただ、そこらへんのbotサービスに登録するのではつまらないので、自分でロジックも考えてみようという意図です。あと、個人的に1時間に一回とか呟くbotは自分のタイムラインがうまってしまってノイズになるので、毎日1回ツイートするくらいのゆるゆるbotにしました。TwitterのAPIを処理してくれるGoのパッケージanacondaを使うとともに、tickerで時間の概念を導入してみました。 Twitter APIの取得 TwitterでTweetしたり、タイムラインを取得したりするためには、APIキーとアクセストークンが必要になります。Twitterアカウントを作ったら、APIを使うために次のリンクから登録しまし
FCM メッセージについて | Firebase Cloud Messaging
Firebase Cloud Messaging（FCM）には、広範なメッセージング オプションと機能が用意されています。このページの情報は、さまざまなタイプの FCM メッセージについて理解し、そのようなメッセージを何に使用できるかを把握するために提供されています。 メッセージのタイプ FCM では、次の 2 つのタイプのメッセージをクライアントに送信できます。 通知メッセージ。「表示メッセージ」と見なされることもあります。FCM SDK によって自動的に処理されます。 データ メッセージ。クライアント アプリによって処理されます。 通知メッセージには、ユーザーに表示される事前定義キーが含まれます。一方、データ メッセージにはユーザー定義の Key-Value ペアだけが含まれます。通知メッセージには、オプションのデータ ペイロードを含めることができます。どちらのメッセージ タイプも最大
非SPAな自サイトにVue.jsを導入した時にがんばったところ - Qiita
Qiita離れしつつあるので凄く久しぶりなんですけど、最近Vueが楽しいのでまとめ系の記事を書くことにしようかと思います。 現状の非SPAなサイト構成からあまり手を加えないで Vue.js を組み込むのにがんばったところをまとめます。 同じようにサーバーサイドで DOM を描画していたり、静的サイトに Vue 組み込みたいけど SPA 化はつらいーという方へ参考になったらうれしいです。 VueとPjaxを一緒に動かす ブログの記事本文でVueコンポーネントを使えるように 非SPAでもVue-cliのホットリロード機能を使えるように なにをしたかったのか 私が趣味で作っている個人サイトは MODX という PHP の CMS を使っているんですけど、この CMS とても軽くて大好きなんですが WebAPI に関してデフォルトの機能がほとんど無いので今からの SPA 化はちょっと面倒くさいです
初めてのVue.js（jQuery脳からの移行をメインに） - Qiita
記事概要 jQueryベースでWebブラウザベースのアプリ書いている人がVue.jsに手を出すとしたら、「こんな風にやってみると分かりやすいかも？」と言う話。ES5 前提です。 Vue.jsの特徴として、他のフレームワークとの混在が容易、ってのがある。なのでjQueryとの共存も可能。今回の例では「inputタグなどの入力インターフェースにのみVue.jsを適用し、設定パネルのスライドダウン／アップなどの表示系DOMの操作はjQueryでのコードをそのまま流用」という方針で組んでみた。 「Vue.jsとは何ぞや？」は下記の公式ガイドを参照のこと。 https://jp.vuejs.org/v2/guide/ Vue (発音は / v j u ? / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolith
vue イベントハンドリング - Google 検索
v-on ディレクティブを使用することで、 DOM イベントの購読やイベント発火時にいくつかの JavaScript を実行します。これは通常 @ に省略することができます。使い方は v- ...
Vue.js
Listening to Events We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v-on:click="handler" or with the shortcut, @click="handler". The handler value can be one of the following: Inline handlers: Inline JavaScript to be executed when the event is triggered (similar to the native oncl
メソッドとイベントハンドリング - vue.js
インラインメソッドハンドラメソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます: <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) 結果: 時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます: <button v-on:click=
Vue.js
Reactivity in Depth One of Vue’s most distinctive features is the unobtrusive reactivity system. Component state consists of reactive JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of
リアクティブの探求 — Vue.js
最終更新日: 2020年3月31日 さらに深く見ていきましょう！Vue の最大の特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。これは状態管理を非常にシンプルかつ直感的にしますが、よくある問題を避けるためにその仕組みを理解することも重要です。このセクションでは、Vue のリアクティブシステムの低レベルの詳細の一部について掘り下げていきます。 変更の追跡方法プレーンな JavaScript オブジェクトを data オプションとして Vue インスタンスに渡すとき、Vue はその全てのプロパティを渡り歩いて、それらを Object.defineProperty を使用して getter/setter に変換します。これは ES5 だけの、シム (shim) ができない機能で、Vue が
筋トレしながらわかる💪Vue.js入門 - Qiita
Vue.jsとは？ Vue.jsは多機能で、少しずつ適用していくことが出来るクライアント側のJavaScriptフレームワークです。これは筋トレも同じ。筋トレも多機能（様々な鍛え方がある）で、日常にトレーニングを少しずつ組み入れていくことができます。 こんな似ているモノ同士を同時に説明し、相乗効果（？）を高めて見ようという画期的な試みがこの記事です。 何を説明するのか？ Vue.jsには様々な機能がありますが、コア&基本となる以下の３つを取り上げます。 リアクティブ リストレンダリング イベントハンドリング リアクティブ Vue.jsはデータとDOMが関連付けられリアクティブになっています。これは筋肉に例えると腹直筋です。体の中心に位置し、体を支える重要な筋肉の様にリアクティブであることはVue.jsにとってとても重要です。Vue.jsはリアクティブによって成り立ち、故に便利なのです。腹直
Vue.jsでもお手軽にアコーディオンを導入したい！ - Qiita
動機 Vue.js大好き！ですが、毎回面倒なのがアコーディオンの実装。 他の方が作ったコンポーネントもたくさんあげられているのですが、ページ内に複数のアコーディオンを設置したい場合に、いちいちjs側をいじる必要があるものがほとんどです。（本来そうあるべき、なのかもしれませんが…） エンジニアさんはjs、デザイナーさんはhtml側などと気軽に分担して書けるのは、Vue.jsの利点でもあるので、一度Vue.jsに読んでおけば複数のアコーディオンもhtml側の編集だけで対応できる実装をしました。 実装 js var accordion = { data: function () { return { openedAccordions: [] }; }, components: { accordion: { props: ['opened', 'duration', 'closedHeight']
「停電」に関するツイートをpythonで収集して、WordCloudで可視化してみた - Qiita
Twitterデータを使って、何か面白いことができないか調べていきたいと思います。 今回は、Twitterデータの収集・分析方法について情報をまとめ、 先日の関西地方での台風による「停電」、北海道での地震による「停電」に関するツイートを簡単に収集・分析してみました。 ※この記事は2018/09/15に執筆しました。関西地方に大型台風が上陸したのは9/4、北海道の胆振地方で震度7の地震が発生したのは9/6です。 Twitterデータって、どうやったら収集できるの？ 時代により変わりそうですが、2018年9月時点現在では、参考[1]～[5]のサイトの情報が役に立ちます。 以下の流れで収集することができます。 開発者用のTwitterアカウントを登録する（参考[1]） 通常のTwitterアカウントを利用することができる 登録に際しては、英語で簡単な説明を記入する必要あり（特別な用意は不要） T
Webページの高速化/最適化まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? おはこんばんちは、渋谷でお掃除してる人です。 はじめに 自社サービス、ランディングページ、企業ホームページのようなWebサイト（Webページ）において何が一番大切かと聞かれれば、その答えは表示速度です。 ええ、仰りたいことは大いにわかります。もちろんコンテンツも大事です。 ですが、どれだけコンテンツが良くて魅力的な商品だったとしても、表示されなければ意味がありません。 人間という生き物は、Webページが表示されるまでたったの2秒しか待てません。 ウルトラマンでさえ3分間も待てるこのご時世に、たったの2秒です。 その2秒によって、汗水流し
実はデメリットが多い!? リモートワークのメリット&デメリットを解説 - フリーランス/副業/業務委託 案件獲得メディア Workship MAGAZINE
コロナ禍の影響で、急速に普及したリモートワーク。 リモートワーク導入の効果が話題になる一方、問題点も浮かびあがっています。 そこで、今回はリモートワークとはどのような働き方なのかを確認しつつ、リモートワークのメリットとデメリットをまとめました。 リモートワークを検討している方、会社でリモートワークを導入するかお悩みの方は是非参考にしてください。 Remote（遠隔）でWork（仕事する）のがリモートワーク リモートワークとは、「オフィスに行かず、自宅やコワーキングスペースなどで働くこと」。英語では、Remote(遠隔) Work(仕事する)と書きます。 ノマドワーク、在宅勤務、テレワーク、クラウドソーシングとの違いは？ リモートワークと似た言葉に、ノマドワークや在宅勤務、テレワーク、クラウドソーシングがあります。これらとリモートワークとの違いは何でしょうか？ リモートワークとノマドワークの
Workship（ワークシップ） | フリーランス・副業向けマッチングサービス
アカウントを作成する このサイトはreCAPTCHAとGoogleによって保護されています。 プライバシーポリシーと 利用規約が適用されます。
フリーランスエンジニアに関する5つの誤解 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日投稿したプログラミングが大好きなWeb系エンジニアの50代以降のキャリアに関する考察という記事は、かなり拡散して色々な方に読んで頂いたようなのですが、ネット上の反応を見る限り、フリーランスエンジニアというワークスタイルに良くも悪くも歪んだイメージを持ってしまっている方が多いというか、実体験を伴わない聞きかじりの情報に影響されて誤った認識を持ってしまっている方がかなり多いという印象でしたので、こちらの記事ではそういった誤解に対する私なりの反論というか見解を述べさせて頂こうと思います。 誤解1：案件や顧客は全て自分で探さなければならない
マラソンを支える技術 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに エンジニアの健康を支えているのは筋トレという説が優勢な気がしまして、ランニングも良いよ！というランニングクラスタからも情報発信したいと思います。 私の健康と肩こりはランニングによって守られていますが（走らないと肩こりで死ぬ！）、そんなランニングのモチベーションの一つとなるのがマラソン大会です。 本稿では、エンジニア視点からマラソンを支える技術・サービスを紹介したいと思います。 自己紹介 株式会社アールビーズにて、マラソン大会における様々なサービス等を開発しているエンジニアです。 日本ではマラソンのデファクトに近いサービスを提供
React開発環境構築2018 - Qiita
この記事について この記事では実際にReactの開発環境をセットアップする方法を説明します。ReactなどのSPAでネックになる速度を改善するための手法としてサーバーサイドレンダリングも行います。 出来る限り短く説明するReact.js入門 | Reactとは？を解説してくれている良記事 フロントエンド開発についてまだよく知らないという人は下の記事を読んでおきましょう。 今時のフロントエンド開発2017 (1. 愚痴編) 2018年の最先端フロントエンドエンジニアになろう フロントエンドとはいえ、今回は静的サイトではなく動的サイト（サーバーサイドレンダリングを行うため）を作成するのでサーバー側の話がメインとなります。 ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点 実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのかではブラウ
Qiitaでいいねが付くとLINE通知してくれる優しい世界を構築した - Qiita
はじめに Qiitaにはメール通知機能がありますが、「いいね」された時にメール通知してくれる機能がありません。 これはQiita中毒者としては、なかなか厳しい仕様です ということで今回は、負荷が掛からない程度にスクレイピングを行い、LINE通知をするプログラムを作成したいと思います。 構成図 draw.io3分クッキング 手順 Lambdaの環境構築 headless chromeでログイン後画面を開く 通知数と最新の通知メッセージを取得する 取得データをDynamoDBに保存 IFTTTのWebhooksにリクエスト送信 LINE通知 定期実行の設定 1. Lambdaの環境構築 Qiitaの通知数はReactで動的に生成しているようで、ソースコードをそのまま取得しても通知数が空の状態でした。そのためSeleniumを使ってブラウザからアクセスを行い、最終的に生成されるhtmlを取得した
PyGameでシンプルなゲームの作成（Python） - Qiita
概要 PyGameという便利なライブラリを用いて、簡単なゲームを作りました。 ゲームのルールは簡単で、プレイヤー（白と緑の玉）が緑の線と赤いドットを避けながらできるだけ長い時間サバイブする、というものです。たまにプレイヤーがジャンプをして（面積が大きくなっている時です）いますが、こうすることで線を無傷でまたぐことができます。 また今までのハイスコアを記録する機能もついているため、ゲームオーバー時にそれを表示します。 ソースコード ソースコードはGitHubのこちらのページにあります。初めは単純な縄跳びのゲームを作るつもりだったので、クラス名などにその名残があります。 簡単な仕組み GitHubにソースコード全体がありますが、ここでは一部をかいつまんで説明します。 プレイヤーの定義 プレイヤーの画像はなんでもよかったので、なんとなくOctocatにしました。そのためクラス名がOcto_Cat
ある規約違反 iOS アプリが削除されるまでの4日間 - Qiita
先日、ある iOS アプリが Apple Developer Enterprise Program (ADEP) の規約に違反していたため、Apple により削除されました。これは社内向けのアプリを Web サイトから不特定多数に対して配布するという典型的な違反事例でした。 この記事では規約違反を犯したアプリが削除されるまでの経緯と、規約違反にならないためにはどうするべきだったのかを解説します。 Day 1 - 発端 ある日、社内で使用している Slack にメッセージの着信を表すバッジがつきます。 ちょうど作業もひと段落したところだったので、私は着信のあった Slack チャンネルを開いてメッセージを確認します。 そんなメッセージとともに URL が添付されています。 さっそくその URL を開いてみると、表示されたのはとある海外用 SIM カードの Web サイトでした。サービス内容の
「機械学習」は本当に使えるの？「立ちはだかる壁」は？【「成果」を出すために、あなたができる３つのこと】 - Qiita
「機械学習」は本当に使えるの？「立ちはだかる壁」は？【「成果」を出すために、あなたができる３つのこと】 本記事では、 １．そもそも「機械学習」とは？ ２．人類の「第４次産業革命」？人間の「存在」「知能」が脅かされる？ ３．機械学習の「５つの具体的な活用事例」 ４．機械学習導入に「立ちはだかる３つの壁」 ５．機械学習導入で陥りがちな「６つのパターン」 ６．機械学習は「手段の１つ」にすぎない ７．「成果」を出すために「あなたができる３つのこと」 まとめ おまけ（いつもの） について、「現時点で、私の頭の中にある情報」を できるだけわかりやすく徹底解説します。 ↓【注意！】これ以降は、「論文風」な言い切りの形にしています↓ １．そもそも「機械学習」とは？ （１）人間が自然に行っている学習能力と同様の機能をコンピュータで実現しようとする技術・手法のこと 「人間の脳の神経伝達の仕組み」を模したものを
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
[2018] 個人でも使える！おすすめAPI一覧
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? コメント欄にも他の方のおすすめAPIを書いてくれているので是非見てください！ Google Sheets API 公式：https://developers.google.com/sheets/api/reference/rest/ 数万行のGoogleスプレッドシートの読み取り・書き込み処理などができます 読み取りだけであればAPIkeyの発行だけでできますが、書き込みにはOAuth認証が必要です 参考：PythonとSheets API v4でGoogleスプレッドシートを読み書きする Google YouTube Data API
![[2018] 個人でも使える！おすすめAPI一覧](https://cdn-ak-scissors.b.st-hatena.com/image/square/92fcf32e0cd9435ff9d7c761b9cc67607f5906fd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU1JTgwJThCJUU0JUJBJUJBJUUzJTgxJUE3JUUzJTgyJTgyJUU0JUJEJUJGJUUzJTgxJTg4JUUzJTgyJThCJUVGJUJDJTgxJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxQVBJJUU0JUI4JTgwJUU4JUE2JUE3JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kZDI1ODYyY2ZkMGFjODIwYzk5MGI2YTllNDhjNDliOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtaWthbjNyZCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjFmNzQyZDJiN2Y2MzI0OWJkNzI5NmNhNGUwOTIxNWM%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-WkVOS0lHRU4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D4f7458aa017f5c438e85e79c83702784)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Netlify】Forms機能を利用して問い合わせフォームを作成する - Qiita
Firebase Cloud Messaging
FCM で FirebaseInstanceIdService の Deprecated を解消する - Qiita
Ionic 4でVue.jsを使ってみた - Qiita
react、firebaseでブラウザからcloud storageに音声ファイルアップロード - Qiita
GitHub - react-dropzone/react-dropzone: Simple HTML5 drag-drop zone with React.js.
Google Search
Vue.js
TheWorld for TwitterでCustom CK/CSを使用する - Qiita
JavaScript初心者にclassを伝える - Qiita
Google Search