#tips💡

2024年8月2日(金) 2時17分3秒 | 331 view

iLovePDFなど、便利なツールがありますがどうしてもオンラインではなくローカルだけでPDFをそれぞれ画像化したいときってありますよね。例えば個人情報とか、アップロードしたくはないのでローカルでできればベストです。 chatGPTに聞いたところpdftkとimagemagickを組み合わせればできるとのことだったのですが、現行のImageMagick 7.1.1-36ではconvertコマンドに変わりmagickコマンドを利用せよとのことでした WARNING: The convert command is deprecated in IMv7, use "magick" instead of "convert" or "magick convert" ただドキュメントを見る限りmagickコマンドにはこれまでconvertコマンドで利用できていたようなpdfからjpg変換するようなものが見つからず困っていました 最終的にcubepdfを使い位置枚ずつjpeg化して対応しました。これならpdftkを利用する必要もなくGUIだけでできるのでベストかもしれません

2023年11月28日(火) 16時48分34秒 | 129 view

novel markdownエディタにnovelを採用し、ローカルに構築してみました ※テキストは Good Morning #01 inowayさんの章を拝借しています リポジトリ デプロイしてみた novel novelはvercelの方たちが中心となって開発したオープンソースのnotionライクなmarkdownエディタです。ライブデモで動作を確認できます。 notionライクな書き味とlocalStorageを利用したリアルタイムセーブなんかが良いです。 現在ライブデモとVSCode拡張で提供されていますが、ライブデモはmarkdownエクスポートができなかったり、VSCodeは見た目が小さかったり画像のアップができなかったりと、色々残念なポイントがあります。 今回はnovelのブランチをフォークして自前の環境を作り、markdownエクスポートを実現したので共有します。 markdown export \novel\packages\core\src\ui\editor\index.tsxに機能的な処理が記載されています onUpdate()がアップデートされたときに呼ばれるコールバックとなっていて、そちらにエクスポート機能を追加します。 エクスポートのトリガは /saveと入力した際にされるようにします。 const lastFive = getPrevText(e.editor, { chars: 5 }) if (lastFive === "/save" && !isLoading ){ const id = Math.random().toString(32).substring(2); e.editor.commands.deleteRange({ from: selection.from - 5, to: selection.from, }); let editorContent = e.editor.storage.markdown.getMarkdown(); const blob = new Blob([editorContent], {type: 'text/plain'}); // Blob オブジェクトの作成 const link = document.createElement('a'); link.download = 'novel-'+id+'.md'; // ダウンロードファイル名称 link.href = URL.createObjectURL(blob); // オブジェクト URL を生成 link.click(); // クリックイベントを発生させる } これで/saveコマンドを打つとmarkdownがダウンロードされるようになります。 base64化解除 ただ上記の状態だと、埋め込まれた画像が全てbase64化され本文に記述されているため、容量が非常に多くなっています。 画像ファイルはbase64からpngデータに変更して単一のファイルとして保存されるように以下の処理を追加します。 let req = /\(data:image.*?\)/g //base64化された画像のみ()ごと抜き出す let imgs = editorContent.match(req); for(let i in imgs){ var a = document.createElement("a"); //Create <a> let base64 = imgs[i].slice(1); base64 = base64.slice(0,-1) a.href = base64 //Image Base64 Goes here a.download = i + "-" + id +".png"; //File name Here a.click(); //Downloaded file editorContent = editorContent.replace(base64,i+ "-"+id+".png") } これでエクスポート時に画像ファイルがダウンロードされるようになり、markdownには画像ファイル名が記述されるようになりました。 課題 本当はJSZipなんかでzip化したほうがいいんだと思います。めんどくさくてやってません localstorageに残っているデータは現状デベロッパーツールで消すかすべて選択して消すかしかないので/deleteなんかを定義してもいいのかもしれません。事故が怖いですが。 novelのせいなのか私の書いたコードのせいなのかたまにオートセーブが効かなくなります。エラーを見る限りローカルストレージに保存する際のパースエラーっぽいんですが、続けて書いていれば消えて問題なく保存再開されるので現状無視してます update()の返り値のeから最終的にmarkdownが平文で取得できるので、頑張ればchrome拡張なんかでも提供できそうです そもそも書こうと思っていた記事があったのに環境構築から始めたせいで結局執筆は一ミリも進んでおらずこんな時間です 続報 スラッシュメニュー化＆json形式でのセーブ・ロードを実装しました。 公式ではフルスタックアプリ化を避けるためこういった機能はマージしないそうなのでissueにて展開済み 参考

2023年11月1日(水) 8時29分10秒 | 3442 view

#3DGaussianSplatting✨#PlayCanvas#tips💡

3D Gaussian Splatting超楽しい 3D Gaussian Splatting 楽しいですね、気づけば動画を取りまくってしまいます。 {{bench}} ただ一点、作成した際に対象物の周りに、意図しない点群データがあるせいで視界がモヤモヤしてしまうことがあります 上記サンプルでいうと、ベンチだけで良いのに周辺データがモヤモヤ入ってしまっています。 この問題を修正するにはplyデータが編集できる環境が必要でした（無料のものでいうとblenderなど） ただこの方法だとblenderのインストールが必要ですしそこそこスキルが要求されるので面倒でした SuperSplat WebGLゲームエンジンのPlayCanvasがここ最近splat対応をゴリゴリ進めていて、その中でSuperSplatなるプロジェクトを開始しました こちらを利用するとブラウザでplyの表示ができるだけでなく、編集もできてしまいます もやもやも取ることができるので、ブラウザ環境だけで3D Gaussian Splattingで作成したデータの修正ができます！ 今回はその方法を紹介します SuperSplatライブデモ SuperSplatは以下のURLにライブデモとして公開されています。アカウント作成など不要で誰でも無料で使うことが出来ます。 Luma AIなどで作成したplyデータをドラッグアンドドロップでアップロードします アップロードが終わると点群データが表示されます 青く表示されているのが点群データです。 モヤモヤが多くあることがわかりますね 対象物を中心に球状にくり抜く まず対象物（今回はベンチ）だけ中心に周囲を不要なものとして球状にくり抜いてしまいます。 左のメニューから Selection > SphereのラジオボタンをONにします するとこのように球が表示されます 左側メニューのSphere横のパラメーターから自分がほしい範囲にかさなる用にSphereのサイズを変更します こんなふうにほしい位置に球が重なればOKです。 次にSet, Add, Remove..とボタンが並んでいる箇所から「Set」を押します すると球内に入っている点群が選択され黄色になります そして次に「Invert」ボタンを押して選択範囲を逆転させます。 これで球外にある点群が全て選択された状態になりました これらは全て不要なので、Scene > Delete Selected Splatsを選択してすべて削除します するとこのように指定の範囲だけの点群のみになりました 範囲指定して点群を取り除く 範囲指定内にくり抜いてもまだもやもやが残っています。 その倍は「Rect」ボタンを押して範囲指定削除を行います 削除したい範囲（今回は上部黄色い点群）だけが独立しその他の点群と重ならない状態にカメラを移動します 「Rect」ボタンを押下すると矩形選択モードになります。マウスをドラッグして削除したい範囲を枠で囲みます 矩形に含まれる部分が選択されるので「Delete Selected Splats」を押下して削除します この作業を繰り返して不要なもやもやを削除します ダウンロード 完成したらExport to > Ply fileからplyデータでダウンロードできます ダウンロードしたplyファイルはPlayCanvas Viewer で表示できます これでブラウザで完結して3D Gaussian Splattingが作製、編集、表示ができるようになりました！ 個人的にはこれでHubサービスでも作ってみたいなと思います。

2023年10月18日(水) 14時5分18秒 | 465 view

#3DGaussianSplatting✨#PlayCanvas#tips💡

近所の公園にて娘ちゃんを撮影 エモい

2023年6月14日(水) 12時57分6秒 | 307 view

#nuxt.js#開発👨‍💻#tips💡

なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的Webサイトが作りたくなったのでNuxt3の勉強がてら作ってみます。 システム コンテンツ 利用イメージ nuxt3-blogtest-systemの方でNuxt3製Webシステムを構築、contentディレクトリをnuxt3-blogtest-contentからgit submoduleで引っ張ってくる、著者はnuxt3-blogtest-contentだけを操作するイメージ。 手順 Nuxt3の導入 > npx nuxi init nuxt3-blogtest-system > cd nuxt3-blogtest-system > npm install @nuxt/contentの導入 > npm install --save-dev @nuxt/contentnuxt.config.tsを編集 export default defineNuxtConfig({ modules: [ '@nuxt/content' ], dir :{ public: "content/public" } }) pagesフォルダを作成 > mkdir pages > cd pages > touch index.vue > mkdir posts > cd posts > touch [...slug].vue index.vue / [...slug].vueをそれぞれ作成 index.vue <template> <div> <p> here is index.vue</p> </div> </template> [...slug].vue <template> <main> <ContentDoc /> </main> </template> content用ディレクトリを作成 // systemとは別階層で作成する > mkdir nuxt3-blogtest-content > cd nuxt3-blogtest-content > mkdir public > mkdir content > cd content > mkdir posts nuxt3-blogtest-content/content/postsディレクトリにmarkdownファイルを追加 > touch hello.md hello.md # here is hello.md 画像を利用する  //画像を使う場合はpublic/img フォルダにimg.pngという名前で画像を保存 nuxt3-blogtest-system側でnuxt3-blogtest-contentをsubmodule化 > git submodule add content コンテンツを更新した場合は、submoduleをupdate > git submodule update --remote これでnpm run dev もしくは npm run generateするとコンテンツがレンダリングされます。

2023年6月9日(金) 23時55分47秒 | 103 view

#PlayCanvas#tips💡#開発👨‍💻

demo 実施手順 Looking Glass Portraitの準備 Looking Glass Portraitを用意し、電源とHDMIを接続します。電源をONにすると、LookingGlassのLEDが青色に点滅します。 Looking Glass Bridgeのインストール Looking Glass BridgeはLooking Glass Factoryのウェブサイトからダウンロードしてインストールします。インストール後、タスクバーのLooking Glass Bridge iconをクリックしてLookingGlassをリセットし、デスクトップを表示します。 LookingGlass用のPlayCanvasプロジェクトの作成 PlayCanvasで新しいプロジェクトを作成します。プロジェクトのテンプレートとして、Model Viewer Starter Kitを推奨します。 プロジェクト内でのスクリプトとHTMLの作成 プロジェクト内で、スクリプト(LG.js)とHTML(LG.html)を作成します。 LG.htmlの作成 LG.htmlを以下のように記述します。 import { LookingGlassWebXRPolyfill, LookingGlassConfig } from " const config = LookingGlassConfig config.tileHeight = 256 config.numViews = 20 config.targetY = 0 config.targetZ = 0 config.targetDiam = 3 config.fovy = (14 * Math.PI) / 180 new LookingGlassWebXRPolyfill()LG.jsの作成 LG.jsを以下のように書き換えます。 var Lg = pc.createScript('lg'); Lg.prototype.initialize = function() { pc.app.xr._available["immersive-vr"] = true; var htmlAsset = this.app.assets.find('LG.html'); var div = document.createElement('script'); div.type = "module" div.innerHTML = htmlAsset.resource; document.body.appendChild(div); htmlAsset.on('load', function () { div.innerHTML = htmlAsset.resource; }); }; Lg.prototype.update = function(dt) { if(this.app.keyboard.wasPressed(pc.KEY_ENTER)){ this.camera.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR); } };アプリケーションの実行 アプリケーションを実行し、エンターキーを押すとLookingGlass用のコンテンツが別ウィンドウで再生されます。そのウィンドウをLookingGlassに移動させ、F11キーを押します。 以上で、LookingGlass用のPlayCanvasアプリケーションが実行されます。 動作原理 webxr.jsはWeb標準のWebXR APIをラップし、オープンソースで提供されています。このライブラリは3Dエンジンに依存せず、カメラの位置を取得し、複数のレンダリングを立体視可能な画像に変換して出力します。 LookingGlass用のウィンドウはマウスイベントの受け取りと最終レンダリングを行います。実質的には、このウィンドウはPlayCanvasのLaunchタブそのものです。そのため、タブを閉じたりバックグラウンドに移動すると、動作が停止します。また、複数のレンダリングを行うため、描画負荷が増大する点には注意が必要です。 問題点 PlayCanvasでアプリケーションを実行すると、webxr.jsにより定義されたcanvasのサイズ変更アルゴリズムがBufferの問題で誤った数値を出力する可能性があります。その結果、画像が意図せずにトリミングされる可能性があります。立体視画像の生成には複数の画像が必要なので、一部の画像が欠落したり黒くなったりすると、立体視が一部見えなくなる欠点があります。この問題は、canvasのサイズをオーバーライドすることで一時的に対処可能です。 まとめ 裸眼立体視技術は以前から存在していましたが、その技術を5万円程度の手頃な価格で利用できるポータブルデバイスに組み込み、しかもWeb技術のみで実行可能という点で、その革新性を感じます。Bridgeの導入などまだ一部制限はありますが、Webとの接続性により、環境構築の手間が減少し、さまざまなAPIとの接続によるコンテンツ開発が進むでしょう。

2023年4月20日(木) 2時36分43秒 | 12258 view

stable-diffusion-webuiではpython3.10.6の利用が推奨されています。GitHub issueによると3.11.xでは動作しないようです。また3.10.x未満のバージョンでも動作するようですがxformersが使えなかったりといろいろ制限があったので3.10.6にpythonのバージョンを合わせ変更したところ、ハマったので共有します。 原因 最初のlaunch.py実行時にtorchなどの依存関係をまとめてインストールしますがその際に別バージョンでのインストールしたものが残っている場合、pythonのバージョン変更をするとエラーが出てしまうようでした。 対処法 stable-diffusion-webui\venv を全削除し、再度webui.batを実行することで現在指定されているpythonのバージョンで再度構築してくれます。 ※ venvの中身はなかなかに大きくバックアップを取りたくなりますが基本的に環境に合わせて生成されたファイルなので怖がらず消してOKでした。 手順 pythonのアンインストール > choco uninstall python3 python3.10.6のインストール > choco install -y python3 -version 3.10.6 pythonバージョンの確認 > python -V // Python 3.10.6 venv フォルダをすべて削除 > rm ./venv webui.batを実行 > webui.bat 参考

2023年4月6日(木) 8時18分33秒 | 158 view

#tips💡#chatGPT

ChatGPTに質問したいと思った際に、chat.openai.comにアクセスしてメッセージを送るまでの手間が少し面倒だと感じることがあります。そこで、キーボードを6回押すだけで簡単にChatGPTにアクセスできる環境を作成しました。以下でその方法を紹介します。 完成イメージ Windowsキー + Rキーを押して「ファイル名を指定して実行」を起動 「gpt」と入力 ChatGPTのウィンドウが開く 手順 1.ChatGPTのWebページにアクセスし、右上の3点リーダから「その他のツール」＞「ショートカットを作成」をクリックします 2.ショートカット名に「gpt」と入力して保存します。 3.任意のフォルダを作成し、その中に「gpt」のショートカットを入れます。 ここでは、C:\Users\[username]\Documents\shortcutに保存しました。 4.Windowsメニューから「環境変数」と入力し、「コントロールパネル」の「環境変数を編集」をクリックします。 5.変数「Path」を選択し、「編集」をクリックします。 6.「新規」をクリックし、先程作成したショートカットのパスを追加します。 これで設定が完了しました。 参考

2023年3月7日(火) 7時32分11秒 | 5777 view

2022年8月に新型シエンタを契約し、2023年2月に納車してからかれこれ半月ほど乗っています。 すでに500km弱走行しての感想としては、体感としては乗りやすく燃費もいいので非常に良いクルマだなと思います。 今回はオプションでHDMIを選択して、そこにChrome Castを接続して使っているので、その方法について解説します。

2023年2月27日(月) 10時7分43秒 | 369 view

#PlayCanvas#開発👨‍💻#tips💡

PlayCanvasのStarter Kitで用意されている「Model Viewer Starter Kit」では360°ビューワーを簡単に作る事ができますが、常にインプット情報からカメラ位置を制御しているため、スクリプトやボタンで指定位置にカメラを移動する方法にやや癖があります。 この記事ではスクリプトからorbit-camera.jsを利用した状態で指定位置にカメラを移動する方法を説明します。 これを使うとコンフィギュレーターなどを開発する際に、基本は自由移動でボタンを押したときだけ特定の部品に寄るなどの処理ができるようになります。

2023年2月16日(木) 3時33分4秒 | 366 view

備忘録です。 やり方は様々な方がすでに書かれているので、自分はハマったポイントを中心に記事化します。

2022年12月6日(火) 4時50分5秒 | 184 view

11/28でHerokuの無料プランがなくなりました。 いままで動かしていたHerokuアプリが動かなくなったので自分の運営しているアプリも影響を受けていました。 本来であれば11/28までにやらなければいけなかったのですが、少し遅れてしまったので急ぎ対応した記録です。 Step1.Ecoプランに加入する 月額5USDです account > Billingからいけます Step2.ダッシュボードからDynoタイプを変更する 有償にした時点でEcoが選択されていると思います。 Step3. 停止を解除してアプリを再開する こちらのトグルをクリックして再開できます。 これでアプリを復旧できました。

2022年9月12日(月) 7時53分11秒 | 13815 view

Googleホームアプリ 便利ですよね。 家も照明やエアコンのIoT化をNatureで、後は子供の見守りカメラをNest Cameraでやっていたりします。 とても便利なのですが、夜仕事をしていたりすると、PCでこの画面が見えたらいいのになって思うことがあります。 いくつかの方法があるのですが、いろいろ調べて良いと思った方法、悪いと思った方法をそれぞれ紹介します。

2022年4月25日(月) 2時20分44秒 | 8021 view

#PowerAutomateDesktop#tips💡#開発👨‍💻

Power Automate Desktopが最高に便利です 無料版でだいたいのことができるので重宝しています。 ただ無料版だと時間指定実行が出来ないのですが、力技で時間指定実行を実装することが出来ます。 ですがその方法を取ったときに問題が起きたので記事にします

2022年4月18日(月) 6時39分30秒 | 199 view

#PlayCanvas#tips💡

この記事は「PlayCanvas | GWアドベントカレンダー」8日目の記事です。 PlayCanvas Editor APIが便利です。 ユーザーマニュアル（触りはこちら） ドキュメント（詳しく調べる場合はこちら） 本記事ではGUIでやると超大変だけどEditor APIでやると楽勝になることを紹介します

2022年4月14日(木) 16時40分33秒 | 983 view

#Github#tips💡#VScode

過去記事 症状と背景 パスフレーズ聞かれる、VScodeだと動かない、pushできない、などなど不具合多数 Windows10 -> 11 に変えたけど、それが原因...? 原因 ssh-agentが死んでいた 対応 Powershell管理者権限 Set-Service -Name ssh-agent -StartupType Manual Start-Service ssh-agent ssh-add再登録 C:\Users\ajishixo>ssh-add C:\Users\<username>\id_rsa Enter passphrase for C:\Users\<username>\id_rsa: Identity added: C:\Users\<username>\id_rsa (C:\Users\<username>\id_rsa) 参考記事

2022年2月24日(木) 12時49分57秒 | 192 view

Windows11で色設定からダークモードを選択した際に、ブラウザ側でもその情報を読み取りダークモード表示してくれる仕様があります。 TwitterなどでもWebアプリ側に設定はなく、OSでのカラーモードが継承されています。 ただ、Webサイトによっては以下のようにダークモードで背景色や文字色が勝手に書き換えられ、たいへん見づらくなる現象があります 左：ダークモードでCSSが書き換えられ黒背景になっている 右：通常の表示 選択すると正しく表示されるため、テキストが消えたわけではない事がわかります。 Chromeで別アカウントであれば起きない問題なのに、特定のアカウントだけ起きる原因は、Adobe Acrobatのchrome拡張が原因でした。 おそらくPDFビューワーとして機能する際にstyleが書き換えられるのが原因かと思います。 拡張機能を無効にすることで普通の表示に戻すことができます。

2021年11月25日(木) 2時30分15秒 | 3117 view

#Github#tips💡#VScode

結論 環境 OS : Windows 10 Git client : Visual Studio Code Git remote：Github via ssh CUI：PowerShell ssh.exe：openssh from chocolatey 背景 2020年のアップデートからhttpsでのGithubへの接続が制限されたので、ssh接続に切り替えてローカルにリポジトリをクローンして運用していた ssh-addで鍵の登録まで終えた 事象 git clone git@github.com:xxxx としてクローンすると、ssh-addで登録したはずなのにパスフレーズを聞かれる(パスが通ると問題なくクローンされる) ssh git@github.com -T を実行すると問題なくGithubと接続できている クローン後のディレクトリをVSCodeのGUIからpushを行ってもPermission deniedになる(パスフレーズも聞かれない) VScode上のターミナルからgit push origin mainを実行するとパスフレーズが聞かれた後に正しくプッシュされる .ssh/configをいくら書き換えても動かない 原因 sshコマンドとgitコマンド内部で呼ばれるsshコマンドが実行ファイルが違うためssh-addされた鍵が共有されない VSCodeのGit Client GUIはパスフレーズを聞く機構がない（鍵が保存されていないと必ずPermission deniedになる） 解決策 gitコマンド内部で呼ぶsshコマンドを、ssh単体で読んだ際の実行ファイルに明示的にパスを当てる C:\Users\<username>\.gitconfigに以下を記述。 [core] sshCommand = C:/Windows/System32/OpenSSH/ssh.exe これでgit cloneでパスフレーズは聞かれず、GUIからのプッシュも問題なく動いた 参考

2021年9月6日(月) 14時33分9秒 | 233 view

#開発👨‍💻#nuxt.js#tips💡#imagekit.io#microCMS#ブログ開発

Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです 動的OGPを作成する手続きとしてはいくつかあるんですが、大きく分けでサーバーサイドで画像を作成するもの、image CDNを利用していい感じに作ってもらうものの2種類があります。 VOXELCANVASなんかはモデル作成後にphpで画像化してimage CDNに保存して、最後にimage CDNでロゴとblendするというハイブリッドな方法をとっています。 このブログも今まで記事ページは動的OGPを噛ませていなかったので、そういえばimgixとmicroCMSがパートナーとなったことだし、もしかしたら超簡単にできるんじゃね？ってことで挑戦してみました 手順を解説します。 まず最初に動的OGPのベースとなる画像を作成してmicroCMSにアップロードします アップロードした時点でimgixの機能が使えるようになるので、テキストなんかを自由に入力できます {{image}} あとはこれをOGPとしてNuxtで設定してあげるだけです。 head (){ return { title : this.title + " | ", meta: [ { hid: 'description', name: 'description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, { hid: 'og:title', property: 'og:title', content: this.title + ' | 空想は世界を包み込む' }, { hid : 'og:image', property: 'og:image', content: " { hid: 'og:url', property: 'og:url', content: ' + this.$route.path + "/" }, { hid: 'og:description', property: 'og:description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, ] } } 以上で動的OGPが設定できます。 imgix周りの環境構築をすべてmicroCMSがやってくれるのでとても楽でした。 今回は1行で実現したので楽でしたが複数行にする場合は少しややこしくなるようです。 →対応したので追記しました また、このブログでも何回か紹介しているimagekit.ioでは選べるフォントが少なめなのでまだimgixのほうが良さそうです。 2022/08/10追記：複数行に対応しました blendで複数行もワンラインでできることに気づき、対応しました。 {{imagemul}} og:imageを以下のように変更しています。 { hid : 'og:image', property: 'og:image', content: "

2021年8月17日(火) 2時29分33秒 | 615 view

#Unity#PlayCanvas#移植🔀#モデル🧩#開発👨‍💻#tips💡

UnityからPlayCanvasへそのままヒエラルキーごとモデルを移植するいい感じの方法を見つけたので書きます

2021年6月7日(月) 1時11分14秒 | 1390 view

mailchimpのフッターに自動的に住所が表示されてしまう問題について、日本語の情報がなかったので作成します。 参考

2021年6月1日(火) 14時2分16秒 | 156 view

#nuxt.js#開発👨‍💻#tips💡

URLを発行したりしたときにコピーさせやすくするためのアレです こんなふうにテキストボックスを用意します <b-input ref="selectablebox" readonly id="inline-form-input-name" value="コピーしたいテキスト" @click="select($refs.selectablebox)" ></b-input> methodsにselect()を作成します select : function(target){ if(target.$el){ target.$el.select(); } } 以上。 注意点： refを利用してその後に$elで参照しているため Vueコンポーネント化されたDOMに対してのみしか動きません。 なのでデモではbootstrapのb-inputを利用しています。

2021年3月6日(土) 18時29分49秒 | 51 view

#ncmb#tips💡

どう見てもGETで返せばいいやろ、、、と思うスクリプトを作ったとしても POST，DELETEだとCORS開放済み ソース→ res.header()はエラーになる→CORSの設定はコードでできない つまりGETはクライアントでJSONPでのアクセスにしないといけない RESTでやるならいいけどtokenとか面倒だしみんなSDKでやっているはず SDKは内部的にHTTPRequest叩いてるだけでそのコードはライブラリ内 SDKからはJSONPに変更ができない つまりSDK＋GETスクリプトは使用不能 ということなので、どう見てもGETなライブラリも、POSTを使おう。 追記：残念なことにPOSTにしたスクリプトでも動いてくれなかった。 いつもこういうときはAPIのAPIをPHPとかで作ってしまうのだけど、ncmbのREST APIのヘッダー設定めんどくさすぎるのでパス 現在コミュニティで問い合わせ中。チュートリアル通りにやったので、なんとかしてほしい。。。 追記(3/9):普通にScript機能もCORS設定していないらしい。なんやて。。。 でも動かない。POSTでアクセスしているのに、、、 技術サポートは有償からなんだよな、、、困った、、、

2021年1月15日(金) 13時58分32秒 | 26 view

#PlayCanvas#tips💡

@yausterの3Diframeサンプルを利用して3Diframeを実装すると、model viewerで右クリック→ドラッグ操作でPANをしたときに、メニューが出て煩わしいことがあります。 iframe-plane.jsのinitialize()内に以下コードを追加するとメニューが出力されなくなります document.body.oncontextmenu = function () { return false; }; なんでこれサンプルに含まれていなかったんだろう。。。PlayCanvasにプルリクの機能があればしたい。。。

2021年1月15日(金) 7時46分53秒 | 232 view

#imagekit.io#php🐘#post#tips💡

はまったので忘備録 公式によると以下curlコマンドで画像アップができます。 curl -X POST " \ -u your_private_api_key: \ -F 'file=iVBORw0KGgoAAAAN' \ -F 'fileName=hoge.png' PHPで書き直すと以下のようになります $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", ); $curl=curl_init(" curl_setopt($curl,CURLOPT_POST, TRUE); curl_setopt($curl, CURLOPT_POSTFIELDS, $POST_DATA); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":"); curl_setopt($curl,CURLOPT_COOKIEJAR, 'cookie'); curl_setopt($curl,CURLOPT_COOKIEFILE, 'tmp'); curl_setopt($curl,CURLOPT_FOLLOWLOCATION, TRUE); $output= curl_exec($curl);crulの-uコマンドになじみがなくてよくわからなかったのですがどうやらこれはbasic認証らしいです。 phpのcurlでbasic認証を通す場合はcurl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":");のように記述します またこの記事同様デフォルトでランダム文字列が入ってしまうのですが、外す場合にはuseUniqueFileNameをfalseにする必要があります ただ、今回はmultipart/form-dataでの送信のため、http-build-queryなどを通さず、直接送信しているため $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => false );とすると、正しく動作しません。 正確には $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => 'false' );と文字列リテラルで渡す必要があります。 これで正しくアップロードできます

2021年1月15日(金) 4時24分0秒 | 47 view

#imagekit.io#imageCDN🌐#tips💡

imagekit.ioでは上書き防止のためにデフォルトではアップロード後に画像の末尾にランダム文字列が付与されるようになっています。 これを削除するには以下の方法から設定を変更します。 Image settingsからMEDIA LIBRARYを選択 >ENSURE UNIQUE IMAGE NAMES DURING UPLOAD をfalseにするとランダム文字列がつかなくなります