{"id":19253540,"url":"https://github.com/webcyou/messageviewjs","last_synced_at":"2025-09-15T18:35:30.635Z","repository":{"id":58223358,"uuid":"42403633","full_name":"webcyou/MessageViewJS","owner":"webcyou","description":"Talking Scene JavaScript Library","archived":false,"fork":false,"pushed_at":"2016-06-11T10:44:40.000Z","size":1705,"stargazers_count":58,"open_issues_count":1,"forks_count":6,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-09-11T08:18:25.888Z","etag":null,"topics":["game","javascript","javascript-library","message"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcyou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-13T16:34:07.000Z","updated_at":"2024-08-29T13:28:17.000Z","dependencies_parsed_at":"2022-08-31T03:01:32.233Z","dependency_job_id":null,"html_url":"https://github.com/webcyou/MessageViewJS","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/webcyou/MessageViewJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2FMessageViewJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2FMessageViewJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2FMessageViewJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2FMessageViewJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcyou","download_url":"https://codeload.github.com/webcyou/MessageViewJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2FMessageViewJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275303797,"owners_count":25441155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game","javascript","javascript-library","message"],"created_at":"2024-11-09T18:31:33.161Z","updated_at":"2025-09-15T18:35:30.617Z","avatar_url":"https://github.com/webcyou.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MessageViewJS\nTalking Scene JavaScript Library\nHTML5, WebGame etc...\n\n![](https://github.com/webcyou/MessageViewJS/blob/master/demo/img/screen_shot.png)\n\n### これは何？\n「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです\n\n\n### demo\n[デモページ](http://webcyou.com/message_view_js/demo/)\n\n### Install\n\n#### Bower\n```\nbower install message_view.js\n```\n\n#### npm\n```\nnpm install message-view-js\n```\n\n### The Basics\n\n```\n\u003c!doctype html\u003e\n    \u003chead\u003e\n        \u003cscript src=\"/js/message_view.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n        \u003cscript\u003e\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                var message = new MessageViewer({\n                    \"data\": [{\n                        \"name\": \"生方 すみれ\",\n                        \"message\": \"はじめまして！\",\n                        \"img_url\": \"/img/character_0001.png\"\n                    }]\n                });\n            }, false);\n        \u003c/script\u003e\n    \u003c/head\u003e\n\u003c/html\u003e\n```\n\n### Multi\n\n```\nvar message = new MessageViewer({\n    \"data\": [{\n        \"name\": \"生方 すみれ\",\n        \"message\": \"はじめまして！\",\n        \"img_url\": \"/img/character_0001.png\"\n    },\n    {\n        \"message\": \"こんにちは！\"\n    }]\n});\n```\n\n### Character Change\n```\nvar message = new MessageViewer({\n    \"data\": [{\n        \"name\": \"生方 すみれ\",\n        \"message\": \"はじめまして！\",\n        \"img_url\": \"/img/character_0001.png\"\n    },\n    {\n        \"name\": \"高山 大介\",\n        \"message\": \"こんにちは！\"\n        \"img_url\": \"/img/character_0002.png\"\n    }]\n});\n```\n\n### Multi Class Change\n\n```\nvar message = new MessageViewer({\n    \"data\": [{\n        \"side_class\": \"right\",\n        \"name\": \"生方 すみれ\",\n        \"message\": \"はじめまして！\",\n        \"img_url\": \"/img/character_0001.png\"\n    },\n    {\n        \"side_class\": \"left\",\n        \"name\": \"高山 大介\",\n        \"message\": \"こんにちは！\"\n        \"img_url\": \"/img/character_0002.png\"\n    },\n    {\n        \"side_class\": \"right\",\n        \"name\": \"生方 すみれ\",\n        \"message\": \"今日はいい天気ですね！\",\n        \"img_url\": \"/img/character_0001.png\"\n    }]\n});\n```\n\n### CallBack Function\n\n```\nvar message = new MessageViewer({\n    \"data\": [{\n        \"name\": \"生方 すみれ\",\n        \"message\": \"はじめまして！\",\n        \"img_url\": \"/img/character_0001.png\"\n    }]\n}, function() {\n   console.log(\"callBack\");\n});\n```\n\n### Options\n\n```\nvar message = new MessageViewer({\n    \"data\": [{\n        \"name\": \"生方 すみれ\",\n        \"message\": \"はじめまして！\",\n        \"img_url\": \"/img/character_0001.png\"\n    }],\n    \"option\": {\n        \"loop\": true,\n        \"speed\": \"fast\"\n    }\n});\n```\n\n# Options Reference\n\n| OptionName        | DefaultValue         | SetValue                 | OptionDetail|\n| --------------- |:---------------:| -------------------- | -------:|\n| view | .messageView#default | className, idName, element        | MessageViewの大枠となる要素     |\n| contents | .messageView#default .mv-contents | className, idName, element | MessageViewのcontentsとなる要素     |\n| character | .messageView#default .mv-contents .mv-image.character  | className, idName, element|MessageViewのcharacterとなる要素|\n| characterImg | .messageView#default .mv-contents .mv-image.character img| img element|MessageViewのcharacterのimg要素|\n| messageView | .messageView#default .mv-contents .mv-comment|className, idName, element|メッセージ表示する親要素|\n| message | .messageView#default .mv-contents .mv-comment .val|className, idName, element|メッセージを挿入する要素|\n| name | .messageView#default .mv-contents .mv-name|className, idName, element|characterの名前表示する要素|\n| pointer | .messageView#default .mv-contents .mv-comment .pointer|className, idName, element|メッセージのポインタ要素|\n| messageOpenClass | in |className ( string )|MessageViewを表示する際、追加するクラス名|\n| messageCloseClass | hide |className ( string )|MessageViewを非表示する際（終了後）、追加するクラス名|\n| page | 0 |Number|Messageを開始するページナンバー|\n| speed | normal |\"normal\", \"fast\", \"slow\", Number|Messageを表示するスピード|\n| ignoreSkip | false |boolean|Messageのスキップを無効|\n| loop | false |boolean|Messageをループさせるか|\n| isPointer | false |boolean| Messageのポインター表示 |\n| isClose | true |boolean| MessageView終了後のView表示 |\n\n### Author\nDaisuke Takayama\n[Web帳](http://www.webcyou.com/)\n\n\n### License\nCopyright (c) 2015 Daisuke Takayama\nReleased under the [MIT license](http://opensource.org/licenses/mit-license.php)\n\n\n### Thanks\n素材提供：株式会社ブリリアントサービス\n『星宝転生ジュエルセイバー』[http://www.jewel-s.jp/](http://www.jewel-s.jp/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Fmessageviewjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcyou%2Fmessageviewjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Fmessageviewjs/lists"}