自サイトのバニラJS(javascript)をvue.jsへ書き換えた話.
2024.09.22
おはようございます.先日、友が東京から帰ってきてたみたいでお見上げを貰いました.いつも頂いているばかりでお返ししないといけないなって思うのですが、いつ帰って来るのかがさっぱり分からないのでお返しできないでいる.
さて、今日は自サイトのバニラJS(javascript)をvue.jsへ書き換えた話を書きます.少し前からバニラJSからvue.jsへ変更しようと思っていたのだけど、変更する意味が見いだせずにいた.
先日からReactを仕事で触りだしてなるほど、ちょっと便利かもって思い出したので勉強がてらに自サイトをvue.jsに編集しました.
自サイトの全部を置き換えていないけれど、置き換えたほうが良さげな部分は置き換えた形になります.尚、vue.jsをモジュール呼び出しで使用したい場合は呼び出す参照ファイルに下記のタグを追加すると呼び出せます.またモジュールファイルのインポートの書き方も記載しときます.参考にしてみてください.
<script src="./js/example.js" type="module"></script>
import { ref, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
明日へ続く.
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
createApp, from, gt, import, javascript, JS, js", lt, module", react, ref, script src, script>, type, vue.js, インポート, お見上げ, バニラJs, モジュールファイル, モジュール呼び出し,
Laravelでviteのビルドに苦戦した話。
2024.02.29
おはようございます。laravel-mixからviteに変わっていたのは知っていたのですがビルドしたvue3をbladeファイルで呼び出しても動かなかった事で一日かかった馬しかです。 結論から言えば、vueを参照するじゃなくてvue/dist/vue.esm-bundler.jsで参照する。 これで@vite(‘resources/js/app.js’)呼び出せばビルドした先の参照ファイルを呼び出せる。 尚、ビルドしたファイルはパブリックディレクトリの中にあります😅。
import { createApp } from "vue";//ビルドしてもLaravel側で動かない
import { createApp } from "vue/dist/vue.esm-bundler.js";//こうするとビルドすると動く。
//ブレイド側の呼び出しは@vite('ビルドしたファイル名')
//ビルドするファイルの設定はルートディレクトリにあるvite.config.jsを変更すると良い。
知っている人に取っては簡単な話ですが、そこまでたどり着くのにかなりググりました、因みにchatGPTもGeminiもあまり良いヒントは与えてくれなかったです。
明日へ続く。
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
app.js, bladeファイル, chatGPTもGemini, createApp, dist, import, Laravel-Mix, Laravel側, quot;vue, quot;vue", resources, vite, vite.config.js, vue, vue.esm-bundler.js, vue.esm-bundler.js", vue3, パブリックディレクトリ, ルートディレクトリ, 馬しか,
ReactNativeのボタンがiosとAndroidでは挙動が違うので代替。
2021.11.18
今日はReactNative(リアクトネイティブ)でアプリを制作しながら勉強している中で、ボタンを使ってみたら・・・iosとAndroidでは挙動というか見栄えが違うのですよ、ドキュメントにもそう書いていた?。なので、ボタンじゃなくてこちらを使用するほうが良さげです。
Color of the text (iOS), or background color of the button (Android).
こちら【TouchableOpacity】などを使用してボタンを作成しないといけないみたい。こちらで作るとios、Android同じ見栄え(デザイン)になります。作ってて思うことは師というかメンターがいればもっと効率的に開発できそうです。
師匠がほしい今日此頃・・・。
以上、現場からでした。
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(prevCount => prevCount + 1);
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Android, background, button, color, from, import, iOS, of, OR, quot, react, ReactNative, Text, The, TouchableOpacity, useState, アプリ, こちら, こと, デザイン, ドキュメント, ネイティブ, ボタン, メンター, リアクト, 中, 今日, 今日此頃, 代替, 作成, 使用, 制作, 勉強, 師, 師匠, 挙動, 現場, 見栄え, 開発,
鳴子を機械学習で認識させる事が出来たよ!
2020.09.02
高知県なのでよさこい、よさこいと言えば鳴子を持って踊るがルール。
鳴子を持っているかを判断する機械学習を作ってみようという事で今回の考えが思いつき、早朝から機械学習で鳴子認識させる事に取り組んでみました。
難易度はかなり低いのでそこらへんのITエンジニアなら出来ると思います、出来なければITエンジニアなのかな?と思ってしまうぐらいの難易度かと思います。
大変だったことは教師あり学習なので認識させるのが面倒だった。
鳴子の写真を30枚ぐらい機械学習で認識させました、、、。
今回、使用した機械学習のライブラリはDlib(ディーリブ)というものです、
ググるとインストール方法からプログラム方法まで参考サイトが結構あります。
自分のサイトでは機械学習させた後、静止画を認識させるコードを掲載しときます。
import cv2
import dlib
detector = dlib.simple_object_detector("yosakoi.svm")
image = cv2.imread("yosakoi.jpg.webp")
naruko =detector(image)
for f in naruko:
print("left, top, Right, bottom : ", f.left(), f.top(), f.right(), f.bottom())
cv2.rectangle(image, (f.left(), f.top()), (f.right(), f.bottom()), (255,0,0), 2)
print("{} naruko".format(len(naruko)))
photo = dlib.image_window()
photo.set_image(image)
photo.add_overlay(naruko)
cv2.imwrite("yosakoi-naruko.jpg.webp",image)
因みに動画も認識させてみようと思ったのですが、こちらは上手く認識できなかったです・・・。
鳴子の機械学習モデルを置いときますのでご自由に使用ください。
学習したモデルを読み込んで上記のソースコードで試してみてください、尚、リナックス環境で動作します!!?
鳴子機械学習モデル?ダウンロード?
https://zip358.com/ML/YOSAKOI/yosakoi_Model.zip
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, 30, cv, detector, Dlib, import, IT, object, qu, simple, インストール, エンジニア, かなり, コード, こと, サイト, そこら, ティー, プログラム, べん, もの, よさこい, ライブラリ, リブ, ルール, 事, 今回, 使用, 写真, 判断, 参考, 大変, 学習, 後, 掲載, 教師, 方法, 早朝, 機械, 自分, 認識, 難易, 静止画, 面倒, 高知県, 鳴子,
Yahoo!ニュースをPythonで取得するできました(´・ω・`)v
2020.05.01
早朝、YOUTUBEライブ配信で行ったものはタイトルとリンクが若干異なるところがあったので、修正したソースコードを貼っときます。Python言語少しずつ 少しずつ理解できてきた。
書き方が慣れればPHPより書くのは楽かな。$の記号がPHPの変数を書く場合、絶対必要になるけどPythonは書かなくて良いからね。
import requests
from bs4 import BeautifulSoup
r = requests.get("https://news.yahoo.co.jp/")
soup = BeautifulSoup(r.content, "html.parser")
#ニュース一覧のテキストのみ抽出
f = open("link.csv",mode = "a")
for t,a in zip(soup.find_all("div", "newsFeed_item_title"),soup.find_all("a", "newsFeed_item_link")):
f.write(t.text + "," + a.get('href') + "\n")
f.close()
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
4, BeautifulSoup, bs, co, content, CSV, find, For, from, GET, html, https, import, in, jp, link, mode, News, open, parser, php, Python, quot, requests, soup, v, Yahoo, youtube, zip, コード, ソース, タイトル, テキスト, ところ, ニュース, もの, ライブ, リンク, 一覧, 修正, 取得, 場合, 変数, 必要, 抽出, 早朝, 書き方, 理解, 若干, 言語, 記号, 配信,
Pythonコード:demo
2019.11.05
#!/usr/local/bin/python3
# coding:utf-8
import os
import sys
import MeCab
import gensim
import markovify
import unicodedata
model = gensim.models.KeyedVectors.load_word2vec_format('/var/www/html/model.vec', binary=False)
f = open('merosu.txt')
tagger = MeCab.Tagger("-Owakati")
tagger.parse('')
text0 = tagger.parse(f.read())
text1 = text0
text0 = text0.replace('\n','')
text0 = text0.replace('\r','')
text1x = text0.split(" ")
text2 = []
try:
for item in text1x:
if item.strip():
results = model.most_similar(positive=[item],topn=2)
#"print(results)
for val1 in results:
text2.append(val1[0] + "\n")
#
# print (text1)
# print (" ".join(text2))
model_a = markovify.Text(text1 + "\n")
print(str(model_a.make_sentence()).replace(' ',''))
model_b = markovify.Text(" ".join(text2))
print(str(model_b.make_sentence()).replace(' ',''))
model_combo = markovify.combine([model_a, model_b], [1, 1])
print(str(model_combo.make_sentence()).replace(' ',''))
except Exception as e:
print("動作エラー", e.args)
pass
著者名 @taoka_toshiaki
※この記事は著者が30代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
-Owakati, 'merosu, 0, 1, 2, 3, 39, 8, bin, binary, coding, demo, false, format, gensim, html, import, KeyedVectors, load, local, markovify, Mecab, model, models, open, OS, parse, Python, quot, read, replace, sys, tagger, Text, txt, unicodedata, usr, UTF-, var, Vec, Word, コード,