質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

805閲覧

【HTML】Piskelのオープンソースをスマホ用に改変したい【Javascript】

退会済みユーザー

退会済みユーザー

総合スコア0

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/01/22 05:42

編集2020/01/22 23:26

前提・実現したいこと

Piskelというブラウザ上で無料で利用できるドット絵ソフトがあるのですが
オープンソースがあり、それをiframe埋め込み型に変更してくれている人がいます。
それをどうにかスマホ用に移行したいと考えています。

github

スマホ用の画面にしたいため、必要なものだけ全画面表示にし
常に使うものじゃければボタンを押さない限り出てこないようにしようと考えています。
(divのdisplay設定のblock、noneでいけると思っています)

Buttonをクリックしたらtool iconの一覧を表示させたい為。
そのため、とりあえず「選択しているtool iconを取得したい」です。
取得したらBUTTONに同じものを表示させようと思っています。

発生している問題・エラーメッセージ

イメージ説明

ToolIconの画面は以下で設定していることは分かりました。
editor/index.html

html

1<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display" ></iframe>

editor/css/piskel-style-packaged-2015-09-02-11-47.css
上記にはツールアイコンや選択された後の金枠などの設定がされていることが分かっています。

css

1.tool-icon { 2 position : relative; 3 cursor : pointer; 4 width: 46px; 5 height: 46px; 6 margin: 1px; 7 background-color: #3a3a3a; 8 background-repeat: no-repeat; 9 background-position: 12px 12px; 10 background-size: 24px 24px; 11} 12 13.tool-icon.selected { 14 cursor: default; 15 background-color: #444; 16} 17 18.tool-icon.selected:before { 19 content:""; 20 position : absolute; 21 height : 100%; 22 width : 100%; 23 border: 3px solid gold; 24 box-sizing: border-box; 25 -moz-box-sizing: border-box; 26} 27 28.tool-icon:hover { 29 background-color: #444; 30}

pngファイル等は上記cssファイルで設定しているのは分かりましたが、
selectedで枠をgoldにするというのは共通で
現在選択されている画像等をどうやって取得するのかは分かりませんでした。

toolIDというものを取得すれば良いのかと思い以下調べましたが、分かりませんでした。
editor/js/piskel-packaged-2015-09-02-11-47.js

javascript

1 ns.ToolController.prototype.onSelectToolEvent_ = function(event, toolId) { 2 var tool = this.getToolById_(toolId); 3 if (tool) { 4 this.selectTool_(tool); 5 } 6 }; 7 8 9 /** 10 * @public 11 */ 12 ns.ToolController.prototype.init = function() { 13 this.createToolsDom_(); 14 this.addKeyboardShortcuts_(); 15 16 // Initialize tool: 17 // Set SimplePen as default selected tool: 18 this.selectTool_(this.tools[0]); 19 20 // Activate listener on tool panel: 21 $('#tool-section').mousedown($.proxy(this.onToolIconClicked_, this)); 22 23 $.subscribe(Events.SELECT_TOOL, this.onSelectToolEvent_.bind(this)); 24 };

試したこと

「this.tools[0]」が左上のただのペンアイコンなので、
これを利用すればBUTTONに表示も可能なのかと思いましたが、alertに何も表示されず。「getToolById」などのところにalertも追加しましたが何も表示されず。
キーワードで検索し、関係ありそうなところに色々実施しましたが、
収穫はゼロでした。

Piskelのスマホ向けアプリが出てくれれば良いのですが
まだ出来る予定もなさそうなのでスマホ向けに改変できないか検討しています。

出来ないのであれば出来ないで良く、とりあえず他の作業を進めようと思います。
ヒントでもなんでもいいのでわかる方がいらっしゃいましたら教えてください。

補足情報(FW/ツールのバージョンなど)

Win10
Monaca(HTML5ハイブリッドアプリ開発プラットフォーム)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oikashinoa

2020/01/22 14:00

タグでmonaca cordovaを付けたほうが良いです。 あとmonacaで構築するとして、出来たデータをどのように保存する予定か検討してみては?
退会済みユーザー

退会済みユーザー

2020/01/22 23:25

タグ編集します。 保存はギャラリーか.piskelで、元々あるものを利用しようと思ってます。 画面構築も上手くできていないため、保存などよりは前に画面かなと思いまして。
oikashinoa

2020/01/23 00:37

画面周りの修正が出来たけど、保存出来なかったら嫌ですよね? 画面周りを修正しなくてもsave offlineとかが動くのかは簡単に見ておいたほうが良いと思いました。むろん先に画面周りをやるのも悪くはないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問