鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

vuetify.js v-toolbar 画面サイズを小さくした時にボタンが消えるので何とかしたい

vuetify.jsのv-toolbarサンプルでは画面の横幅を小さくして行くと ボタンが消えてしまい。操作できなくなる。 ハンバーガーボタンで選べるようにしたいのですが・・・vuetifyjs.comググりましたら、下記のサンプルを発見しました。 Vue Router + Vuetify JS …

vuetify.js v-containerで左右のマージンが大きいとき

v-containerで包むと左右のマージンが大きくて画面を有効活用できない。 v-container fluidとしたらマージンが小さくなっていい感じになった。 これを採用しよう。

Vue-i18n safariでlanguage取得の挙動がja-JP

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Vuetify from 'vu…

ケチなおじさんがWebアプリを作ってみた

こんにちは。 dokechinといいます。HNの名前にもしているように家族からケチと呼ばれています。 私は、2012年からケチを卒業すべくWebアプリを書いている 理系エンジニアの40代の冴えないおじさんです。(クソブロガー)未だに出したアプリは全くヒッ…

vuetify.jsツールバーで選択したボタンの状態をトグル状態にしたくない場合

vueのルーターを使って,vuetify.jsでツールバーを作成。 ロゴ部分はイメージを使ったボタンにしました。 ロゴを選択した場合はボタンをトグル状態にしたくない。以下だとカッコ悪い。そんな場合には,active-classを無指定にすればいいとのことです。Buttons …

Vuetify.jsでかっこいいWebトップ画面を作りたい

vuetify.jsにはフリーでかっこいいシームが用意されている vuetifyjs.comvue-routerとともに経由のアプリで使うときには注意が必要で <v-parallax src="assets/hero.jpeg" height="600"> 以下のように修正したら動いた。 <v-parallax :src="require('assets/hero.jpeg')" height="600"> github.com</v-parallax></v-parallax>

vuetifyでv-dialog起動ボタンの配置方法

v-dialogの中にダイアログ起動用ボタンを書くこともできる。 v-dialogの外に書くこともできる。外に定義する方法 github.com中に定義する方法 github.com微妙に異なるので注意が必要と思いました。

data objectの中でvue-i18nを使う方法

vueのdata()の中でi18nしたい時あります。 そんな時には$tではなくて、this.$tを使うといいみたい。やってみよう。github.com

Vuetity.jsのボタン表示が全部大文字になる挙動を変えたい

挙動を変える変数があるのではなくて、vuetifyのソースをいじってビルドし直して使わないといけない模様。https://github.com/vuetifyjs/vuetify/pull/2858none, uppercase,lowercase,capitalizedなどが設定できます。ただし、npm_modules/vuetify以下のソー…

YAPC::Okinawaに行ってきた

昼まで働き、羽田からANA477便に乗って那覇へ向かった。 機内ではグラム単価アプリを実装を進めてゴリゴリ動かしたりしていた。 前夜祭はチケットを取ろうか迷っていたら売り切れてしまったので、スーパーでおみあげ をゆっくり見る計画を立てた。那覇に着い…

旅の前に色々と調べる

金曜日の食事、金曜泊のホテルから近いし24時間営業のようだし。ここにするか retty.me

Vue.jsで入力しやすいUIを作りたい

グラム単価アプリを作ろうとしていて、 入力しやすいUIになんとかしようとしています。vueで。ここに沢山サンプルがあるので、ソースを見ながら勉強していくのがいいかも・・・・ Todo - Vue.js Examples

safari vuerity.jsのフォームバリデーションでボタンが常に活性化されてしまう

でも、クローズされているけど、よく読んでみよう。[Bug Report] Problem with form validation in Safari · Issue #2907 · vuetifyjs/vuetify · GitHub 自分のsafariのバージョンは バージョン10.0 (12602.1.50.0.10)だったんだけど・・

vuexを使ってlocalstorageへ保存する

要件は コンポーネントA,Bがあり、コンポーネントBが設定画面とします。 コンポーネントBの保存ボタンを押すと、storeに格納されて コンポーネントAでも保存した値が参照できるようにしたい。 保存ボタンではローカルストレージに格納する こうするといいか…

vuetifyjsのレイアウトのexampleソースを見る

App.vueのサンプルソースが見たい! のにどこ行けばあるのか彷徨ってしまったが。 docsに格納されていたdocs/examples/layouts at master · vuetifyjs/docs · GitHub

Vueでマテリアルデザイン

今度はこれにチャレンジしてみよう。 またまた百人一首アプリをこれで動かす。 vuetifyjs.com 既存vueのPWAプロジェクトをvuetify化する vue-cliのPWAテンプレートから作った既存プロジェクトをvuetify化してみる。 ライブラリインストール package.jsonにも…

vueでマテリアルデザイン

まだまだ、vue.jsを使いこなせていない感が半端ないので、百人一首アプリを改造して、 もっと遊ぼうと思う。ボタンが小さいしカッコ悪いのでそこから着手してみようと思いますhttps://medium.com/codingthesmartway-com-blog/using-material-design-with-vue…

百人一首読み上げアプリをvue-cli PWAにしてみる

vue-cliのpwaのテンプレートで作るだけなので特に変わったことはしていませんが。 実運用はhttps化しなくてはいけないのでそこは苦労しました。小倉という名前にしてみました。ogura PWAの長所ランチャーに組み込めるというところに着目してトライしました。

アプリ用のアイコンを一括して作りたい

1つの画像から任意のアイコンを一括して作ってくれるコマンド(Webアプリ)が欲しい。vue-cli(PWA)のアイコンフォルダには以下のファイルが格納されているので これらを一括して作成したい。 favicongeneratorというアプリ realfavicongenerator.net 結構惜…

HTTPS化にチャレンジ

ググりまくり、letencryptが無料とのことでやってみることにした。 CentOS6+Nginxで設定する python2.7をインストール rootユーザでpyenvをインストールする GitHub - pyenv/pyenv: Simple Python version management python2.7.8をインストール pyenv insta…

vue-cliでE2Eテスト、PageObject Patternをどう使うんだろう

vue-cliのe2eテストはnightwatch.jsを使っている E2EテストはPageObjectパターンでテストをしたいので 調べる。以下に詳細な手順がありました。padcom13.blogspot.jp簡単にできました! Firefoxでのテストができない vue-cliのデフォルトのテストはchromeで…

vue-cliを使って百人一首読み上げアプリを作る

いつの間にかブラウザが日本語を喋れるようになっているのでvueを使ってWebアプリで読み上げアプリ「からくれない」を作るのを 冬休みの宿題にした Web Speech APIで実際にしゃべる環境を調べてみた - Qiita新しいこと、なかなか踏み出せなかった、vue-cliを…

YAPC::Okinawa ホテルについて調べる

リザンシーパークホテル谷茶ベイ 沖縄科学技術大学院大学から1.8kmの距離にあります。徒歩でも移動できそう。 14日前になるとシングルで安く泊まれるようになる。 普通に今からシングル予約だと19824円となります。http://www.booking.com/Share-98W6qg 沖…

Pythonのオブジェクトをdictの値に詰めてmapでごにょると動かない

これは普通に動く。>>> dict={0:1,1:2,2:3,3:4,4:5,5:6,6:7,7:8,8:9,9:10} >>> print(list(map(lambda x:dict[x], range(10)))) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]でも、resourcesというdictの値はObjectのケースがなんか変。 list(map(lambda x: resources[r…

ダンドリーキッチンが優秀作品に選ばれました

会社として取り組みました「ダンドリーキッチン」で KIAアプリコンテスト2017で優秀3作品に選ばれました。 5万円獲得決定やりました!!!www.kia.or.jpプレゼンに使用したスライドはこちらです。 食Techでは端折ったスライドも含まれる「完全版」となりま…

食TechでLTしてきました

食に関するWebアプリ(料理の段取りを自動的に計画してくれるアプリ)をコンテスト向けに制作していたので ちょうどいいので発表してきました。こう言った業務という括りで勉強会は新鮮でいい感じですし 普段交流しない新たな出会いがありました。gaiax.conn…

Flask(Python3)でJSONを受け取ってごにょごにょしたい

get_json()でdict型で取得可能 @app.route('/schedule', methods=['POST']) def schedule(): data = request.get_json() if isinstance(data, dict): print('dict型です') dict型でドット演算子は使えない。object型は使える ドットの方は属性参照と呼び、「…

JSON文字列を日本語でPython

素晴らしいPython の json.dumps() で日本語が文字化けする場合のメモ - 牌語備忘録 -pygoでも、結局のところpython2系の場合 unicodeで扱う必要ありとのことでtwitter - Working with unicode keys in a python dictionary - Stack Overflowdict[u'test']と…

Bulmaをカスタマイズしたいが・・

https://bulma.io/documentation/overview/customize/ここに方法が書いてあるのですが、Set your variablesでカスタマイズするとあるけれど どのファイルをカスタマイズするのかさっぱりわからないし。 どんなファイル名をつけたらいいのかもわからない。ど…

Pythonのリストから式を作りたい

['a','b','c'] リストからセットを組み立てたい。 { 'a' | 'b' | 'c'}こちらに答えっぽいものを発見 python - bitwise operations between elements in a list - Stack Overflow array = ['a','b','c'] set = {} for a in array: