Django REST framework with Vue.js - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
89b18c608dc7dd2b946b
なにをしたいか フロントエンドにはVue.jsを用いたシングルページアプリケーションを、バックエンドにはDjangoとDjango REST frameworkを使ったWeb APIを用意して、組み合わせてみます。 先駆者様が既にいらっしゃいますが、ちょっと異なるアプローチを試したので記事にしました。 Django + Webpack を使ってVueを動かす Django REST framework with Vue.js どうやって？ Djangoプロジェクトでは通常htmlファイルはテンプレートとして解釈されてレンダリングされますが、そのテンプレート構文がVueと丸かぶり。そのためにVue的なテンプレート構文を持ったhtmlはDjangoテンプレートと共存できません。 そこで、webpackを利用してフロントエンドをVueの単一ファイルコンポーネントに分割しながら書いていくことでこの
GitHub - tokibito/note-app-django-vue-javascript: An example of a note application using django and vue.js
テキストを編集、保存できるシンプルなウェブアプリケーションです。 バックエンドとなるAPIサーバーにはDjangoフレームワーク(Python)、フロントエンドにはVue.js(JavaScript)を使っています。 DjangoフレームワークとJavaScriptでアプリケーションを作るサンプルコードとして作成しました。 このリポジトリのコードではVuexを使っていません。Vuex対応版はnote-app-django-vuexになります。 以下の要素を含んでいます: バックエンド Python3 venv プロジェクトで使うPython環境を作成します Djangoフレームワーク Django REST Framework REST APIを作るのに便利な機能がたくさん含まれるモジュール django-debug-toolbar 各種デバッグ情報をサイドバーで表示します フロントエンド
Vue.jsでSSR（サーバサイドレンダリング）する - Qiita
Vue.jsでSSR（サーバサイドレンダリング）する はじめに この記事はなにかの Advent Calendar 2016の23日目の記事です. Vue.jsは２系がリリースされてそこそこたちました. 日本語ドキュメントもそろっています. フロントの取りかかりとして簡単でスケールもしやすく良いのではないでしょうか. そこで今回はVue.js２系の大きな特徴であるサーバサイドレンダリングを行ったアプリケーションの制作をしてみたいと思います. 最終的に APIコールをして動的ページのSSRを行う 初期表示以後はSPAとして動く こんなアプリケーションを目指します. 完成版は以下です ソースコード Github 使う物 vuejs vue-router vuex このあたりを使います. 詳しくはソースコードのpackage.jsonを... Step1 静的ページのSSR さぁ作成していきます
君は2クリックでVue appを立ち上げたことがあるか!!<CodeSandboxを世の中に広めなければと思った件> - Studio Andy
www.youtube.com ちょっと時間が経ってしまったのですが、2月にアムステルダムで行われたVue conf AmsterdamとFrontend Developer Love conferenceに参加してきました。 初めての技術カンファレンス&海外でのイベントということで学ぶことばかりの数日間だったのですが、今回はその中でも特に印象に残ったセッションをご紹介します。この記事を読んで「CodeSandboxおもしろそう！」「使ってみたい！！」という方が1人でも増えると嬉しいです。 CodeSandboxとは CodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。 codesandbox.io GitHubでオープンに開発が行われているのですが、なにより驚いたのがプロジェ
Vue.jsミニハンズオン（TODOリスト作成） - Qiita
Vue.jsミニハンズオン（TODOリスト作成） AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオンです。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標はシンプルなTODOリストの作成です。 WebStorageに保存してリロードしてもデータを保持できるようにしてます。 Chromeの拡張機能を入れる デベロッパーツールでデータを見やすくするためChromeの拡
iPadでプログラミングしてる人、今まで馬鹿にしててすみませんでしたァァァァ!!!! - Qiita
こちらの記事内容は3年以上前のものなので、記事内にあるアプリケーションなどの動作やUIは実際と異なる可能性があるのでご注意ください。 (2023/01/04追記) iPadでプログラミングwwwアホちゃうかwww ワイ「え？お前全部iPadでプログラミングしてんの？そんなん効率悪いに決まっとるやんw」 ワイ「せいぜいでっかい画面でGithubのコード眺めるくらいしかできないやろwてかハイライトすらないんじゃn」 ?!(Monokaiで表示されとるやんけ...) ワイ「おっ、おう。シンタックスハイライトくらいはできるんやな。」 ワイ「まあ、考えてみればそのくらいは余裕だわなwでもな〜wコードだけ書けてもプレビューは？流石にそれが出来ないことには使えるとはいえn」 ?!?!(localhostで立ててくれるんか...これならCDN使えば簡単なサイトくらいやったらiPadだけで楽に作れるやんけ.
【2024年更新版】Google検索結果の一覧をCSVでダウンロードするブックマークレット - Qiita
2024年5月6日、現状のGoogle検索結果で動作するように更新しました。 ニュースタブ・動画タブ・画像タブで動作します。 Googleの検索結果を手軽に一覧でCSV保存したい Google検索はとても便利なので、日常的に利用しているのですが、 検索結果をまとめて一覧化したいことがありますよね。 検索画面に表示されるサイト名やページタイトル、URLをCSVファイルとして一覧で取得できれば、 ExcelやNumbers、Calcなどで使えて便利です。 スクレイピングやAPIで取得するなどの方法もありますが、 画面に表示されている検索結果を取得したい用途があるので、 ブラウザから誰でも利用できる、ブックマークレットを作りました。 ただし、最新のブラウザでなければ動作しません。 使い方 ブラウザで新しいブックマークを作り、次の内容をURL欄に貼り付けます。 ブックマークの名前は、Google検
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts（GAS）です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう？ と思ったあなた！ このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
PWAでwebプッシュ通知を作る (4) - FirebaseとCurlを使用して特定の端末に通知を送る - 朝日ネット 技術者ブログ
はじめに watanabeです。 前回の記事ではデバッグ機能からプッシュ通知を送信して受け取ったときの処理を実装しましたが 今回は受信する端末ごとに異なるトークンを取得して、特定の端末にプッシュ通知を送れるようにします。 はじめに 実装の手順 1.Firebase Cloud Messagingで必要な値を取得する 2.端末ごとのトークンを取得して表示する仕組みを作る index.html（メインのHTML） main.js(メインページで読み込むjs) manifest.json（PWA化に必要なManifestファイル） firebase-messaging-sw.js（新たに作成したService Worker） 3.コマンドをCurlで送信してプッシュ通知を受け取る 次回予告 採用情報 実装の手順 Firebase Cloud Messaging（FCM）で必要な値を取得する 端末
Google Cloud Platformの支払い情報をBigQueryにエクスポートしてSlackに飛ばすまで - Qiita
概要 スクリプトを使って，支払い情報の取得設定や通知できるようにするためにはどうすれば良いかを説明します。 Google Cloud Platform(以下GCP)の支払い情報をBigQueryにエクスポートして，GCFで集計してSlackに通知するスクリプトを作りました． 下のような通知が日時でSlackに届きます．かっこの中身は前日の金額との差（昨日より増えてるか減ってるか）です． オプション設定によりプロジェクトの内訳も表示できるようになります。（一番下を参照） デプロイコマンドも同封しているので、slack api tokenとBigQueryのエクスポート設定をすれば任意のチャネルに通知を飛ばせるようにできます。 スクリプトはこちら（Github） 使用するもの ・BigQuery ・Google Scheduler ・Google Cloud Functions ( Node.
WebAssemblyでゴリゴリ閲覧履歴とかを検索するChrome Extensionを作ってみつつ、WebAssemblyの現状報告もしてみる - Qiita
こんにちは、kamyknです。 今回はWebAssemblyの力を試してみたかったので、履歴、ブックマーク、タブ検索ができるChrome Extensionを作ってみました。今回は記事中コードはほぼ出てきませんが、開発の際に得たWebAssemblyの知見などをメインに書いていってみたいと思います。 なお、今回作成したChrome Extensionの特徴は下記のような感じです。 技術的な概要 検索ロジック部分はfzf風に作っていてWebAssemblyによるものです。 (まだ自分用の段階ですが、WebAssemblyをnpm package化したりしてます) 処理はWebWorkerで別スレッドに逃がしています 表示部分などの実装はJS、特にVue.jsによるものです 検索対象のデータはすべてChromeのAPIで提供されるデータを利用します これらについては記事内で順に説明していきたい
【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ -
どうも、まさとらん（@0310lan）です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います！ 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください！ ■Webページとしても公開できる実用的なエディタ！ 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える
ブラウザ上にAngular,React,Vue等の環境を一発構築＆開発できる「CodeSandbox」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、面倒な開発環境を一瞬で構築してブラウザ上からWebアプリを気軽に開発＆公開できる無料のWebサービスをご紹介します！ 完全なオープンソースで開発が進められており、React / Angular / Vueなどのプロジェクトを誰でも簡単にプログラミングできる高度なエディタを搭載しているのが特徴です。 【 CodeSandbox 】 ■「CodeSandbox」の使い方 それでは、まず最初に「CodeSandbox」の使い方から見ていきましょう！ サイトにアクセスしたら、画面右上にあるボタンをクリックします。 次に、「React」「Vue」「Angular」などのプロジェクトを選択する画面が開きます。 ここで好きなフレームワークを選んだり、素のJavaScript（Vanilla JS）やCLIツール、GitHubからリポジトリを読み込んだ
クリック1発でFirebaseにデプロイ！無料のクラウドIDE「Glitch」の新機能を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でJavaScript / Node.jsの開発環境を構築できる無料のクラウドIDE「Glitch」の新機能をご紹介しようと思います！ その新機能というのは、Glitchから直接Firebaseにプロジェクトを1発でデプロイできる機能のことで、面倒な作業はすべてGlitchが自動的にしてくれるので非常に重宝します。 これにより誰でも簡単にFirebaseプロジェクトをブラウザだけで構築できるようになるので、ぜひ参考にしてみてください！ 【 Glitch 】 記事後半で、Glitchのコードエディタについて詳細を解説しているので合わせて参考にしてみてください。 ■「Glitch」を使ったFirebaseのデプロイ機能について それでは、クラウドIDE「Glitch」が提供するFirebaseのデプロイ機能がどのようなものなのかを実
ぼっち対策として、ポートフォリオを作る。（TrelloとVue.jsでプロトタイピング） - Qiita
※現在、当サンプルは動作しません。追記を参照して下さい。 大き目の勉強会に参加すると、たいていぼっちになってしまいます。ピザとチューハイ片手に、邪魔にならない位置にいるしかありません。 自己アピールさえできればなんとかなる場合も多かったと思います。じゃああれですね。ポートフォリオの出番です。作りましょう。 CMSに対する最新の気持ち 書き下すとこんな感じでしょうか。そこは面倒臭がるなよって箇所もありますが。 とりあえずWordPressは嫌 GitHub pages上にホスティングできると、お金かからないし、しかもURLもかっこいい jekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。 だから管理画面がほしいなぁ。 Markdownで書きたい。 画像アップローダもほしい（しかし作りたくはない）。 というか自
はてなブックマークのタグを一括置換するコマンドラインツールを書いた
追記(2020-12-16): 公式で再実装されたようです。 「タグの一括編集機能」をPCのブラウザで再提供いたします - はてなブックマーク開発ブログ はてなブックマークで自分のブックマークの既存のタグ名を変更した時に一括置換したいことがあります。 以前は公式のタグの一括置換/削除機能の追加がありましたが、ブックマーク一覧ページのリニューアル時に消えてしまったようです。 ユーザーのブックマーク一覧ページのシステムリニューアルを行いました - はてなブックマーク開発ブログ Firefoxのアドオン版でも同様の機能がありましたが、もう動かなくなっているので、はてなブックマークのタグを一括置換するコマンドラインツールを書きました。 azu/hatenabookmark-rename-tags: A CLI that replace all hatena bookmark tags. haten
CodeSandbox : Playground 感覚な GitHub も使える Desktop PWAs 対応までしてるいいやつ - kondoumh のブログ
最近、CodeSandbox を使ってる人を見かけるようになりました codesandbox.io 以前取り上げた CodePen はデザイナーも使う cool な JS Playground という感じで、ブログにデモとコードを一緒に貼り付けたりするのに便利でした。 blog.kondoumh.com CodeSandbox はもう少しデベロッパー寄りのサービスのようです。 CodeSandbox のトップページの Create Soundbbox をクリックすると表示されるテンプレート選択ページで Sign in with GitHub ボタンからサインアップできます。 最近流行っているフロントエンドのフレームワークを数多くカバーしています。 コードエディタ + プレビューをブラウザの 1タブで使えます。 プレビューは別タブに出すこともできますので、Chrome DevTools など
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Django + Webpack を使ってVueを動かす - Qiita
GitHub - vvye/romaji-converter: A converter of Romaji to Hiragana/Katakana and back
