EduBoard Manual（version 1.001）
Table of Contents
Ⅰ Overview

１Ⅱ

Teacher Mode

２

Ⅲ

Student Mode

５

Ⅳ

Tools

７

Ⅴ

Title Bar

11

Ⅵ

Teacher Processing/Settings Functions

14

Ⅶ Board States (Open, Closed, Deletion)

17

Ⅷ

Support for Languages Other than Japanese

18

Ⅸ

Server Requirements

19

Ⅹ Known Issues and Update History

20

This system is operated on a server contracted by the author personally. Therefore,
depending on the usage load, specifications may be subject to change. Please be aware of
this.
If boards of education or schools intend to continue using this system, please consider
operating it on servers owned by the respective organizations. In such cases, the programs
and other necessary components will be provided free of charge. For details, please refer to"Ⅷ Server Requirements."
This system continuously communicates while in use, so please be aware of data charges if
you are using a metered network such as an LTE connection.
In the development of EduBoard, utmost care has been taken to avoid critical issues duringuse. However, it is difficult to completely eliminate the occurrence of issues during use.
Please understand that we cannot guarantee any compensation for damages incurred during
the use of this system.

0Ⅰ Overview
EduBoard is a "shared online whiteboard" with sticky note attachment functionality. It was developed as analternative tool to Google's JamBoard service, which has been widely used in many schools, to ensure asmooth transition for students without causing confusion by incorporating as many of JamBoard's interfaces
and features as possible.
EduBoard has two modes: "Teacher Mode" for teachers to open boards and "Student Mode" for students
to participate. The steps for using EduBoard are as follows:
Register as a teacher in "Teacher Mode". Upon registration, an 8-digit "Teacher Code" will be issued.
Next, use the "Teacher Code" to open a board. The opened board will be assigned a "Board Code" consistingof the "Teacher Code" + a 4-digit code.
Students will use this "Board Code" to join the board in "Student Mode".
This is the general flow of usage. For detailed instructions, please refer to the relevant sections of thismanual.
EduBoard is provided completely free of charge, with no advertisements, making it safe to use in schools.
On the other hand, EduBoard is operated on a server rented by the author personally, so there is not
sufficient surplus in data capacity. Therefore, opened boards are deleted after a certain period. For details
on the deletion period, please refer to the relevant sections of this manual. If boards of education or schools
possess servers that can run this system (see "Server Requirements" at the end of this manual), the programs
will be provided free of charge, so please consult us.

〇Supported Devices (Browsers)
Windows PC (Edge, Chrome), Mac (Safari, Edge, Chrome), Chromebook (Chrome), iPad (Safari, Edge,
Chrome), Android Tablet (Edge, Chrome), Fire Tablet (Silk), iPhone (Safari, Edge, Chrome), Android
Smartphone (Edge, Chrome)e.t.c.

〇Other Requirements
Internet connection (The system is constantly communicating while in use, so please be aware of data
charges if you are using a metered network such as an LTE connection).

1

Ⅱ Teacher Mode
"Teacher Mode" can be started by accessing the following URL in a supported browser:

https://edu-mat.sakuraweb.com/EduBoard/teacher/
The home screen will be displayed.
1. When you access the above URL, the startup screen will be displayed.
Click "Get Teacher Code" to obtain a "Teacher Code". If you already have a "Teacher Code", enter the"Teacher Code" and "Password" and refer to step 3.

2. A "Teacher Code" will be displayed, so please register a "Password". Be sure to keep your "Teacher Code"and "Password" safe, as there are no recovery measures available if they are lost.

2

3. The "Board List" will be displayed. Select one of the following: "New Board", "Open Board (local file)",or "Registered Boards listed".
Icons in the Board List:📙 Closed Board
This icon indicates that theboard is in a closed state.
Students cannot access thisboard until the teacher opens it.
📖 Open Board
This icon indicates that theboard is in an open state.
Students can access this board
even if the teacher has not
opened it.

・Selecting "New Board" will create a new board and display the board screen.

・Selecting "Open Board (local file)" will display a file selection dialog. You can open a locally savedboard in the board screen using the "Processing/Settings Screen" described later. The file extensionis ".edt".

・Selecting "Registered Boards listed" will display the specified board screen.
In any case, a dialog explaining how to delete objects on the board will be displayed when opening theboard screen.

34. In "Teacher Mode", the specified board will open and you will be able to edit it.

If you create a new board, click the "Board Title" at the top of the screen to change the board name.

4

Ⅲ Student Mode
"Student Mode" can be started by accessing the following URL in a supported browser:

https://edu-mat.sakuraweb.com/EduBoard/
The home screen will be displayed.
1. When you access the above URL, the startup screen will be displayed.
Please enter the "Code" and "Name".

2. By appending a "?" followed by the board code to the access URL as shown below, you can skip the board
code input by students. In this case, please enter the "Name". Note that the "Code" cannot be changedin this case.

http://edu-mat.sakuraweb.com/EduBoard/?1234-5678-9012

5

3. In either case (1 or 2), click [OK] to open the specified board in "Student Mode" and start editing.

In "Student Mode", a dialog explaining how to delete objects on the board will be displayed when opening
the board screen.

6

Ⅳ Tools
By clicking the icons on the "Tool Palette" displayed on the left edge of the screen (or at the bottom edgein portrait mode on smartphones), you can draw with the specified tool or place objects. Additionally,
objects other than "freehand drawing lines made with pen or eraser" and "laser pointer traces" can be
moved, resized, and rotated by manipulating the handles displayed when the object is selected.
Pen
You can draw freely on the screen using a mouse or stylus pen.
When this icon is selected, clicking it again will display the "Pen Submenu", where you can select the
pen type (pencil, brush, marker) and drawing color (black, blue, green, white, orange, red).

Eraser (Displayed within the Pen Submenu on smartphones)
Erase parts drawn with the pen using a mouse or stylus pen.
Edit
Edit the position and size of objects placed on the screen, such as sticky notes. Note that you cannot
edit content drawn with the pen or erased with the eraser.
Sticky Note
Clicking this icon will display the "Sticky Note Dialog". Here, you can enter the color and content of
the sticky note. By pressing the [OK] button, you can place the sticky note on the screen.
Double-clicking (or double-tapping on touch devices) an existing "Sticky Note" will display the "Sticky
Note Dialog" again, allowing you to modify the color and content of the sticky note.
Please note that the "Sticky Note Dialog" will automatically close after 10 seconds of inactivity.

7

ImageClicking this icon will display the "Image Selection Dialog". Here, you can select a tab from "File","Clipboard", or "Camera (Take Photo)", then specify an image. By pressing the [OK] button, you canplace the image on the screen. Note that there is no functionality provided to crop the specified image
file.

File
Press the [Select File] button to display the "File Selection Dialog" and choose the image file youwant to display. The selected image file will be previewed, so press the [OK] button.
Clipboard
Copy an image using an image editing application like "Paint" (this copy operation stores theimage in the clipboard). Then, press the [Paste] button to preview the copied image file, and press
the [OK] button.
Camera (Take Photo)Press the [Take Photo] button to preview the video from the camera connected to the device.
Here, decide the shooting range, and press the [Take Photo] button again to preview the still
image, then press the [OK] button.
Connection Line (Only when the device is a PC)
Draw connection lines between "Sticky Notes" or "Images" placed on the screen to create simple mindmaps.
To draw a connection line, click this icon, then click on the "Sticky Note" or "Image" that will be thestarting point of the connection line. Next, click on the "Sticky Note" or "Image" that will be theendpoint of the connection line. The drawn connection line will move in accordance with the
movement or size changes of the "Sticky Notes" or "Images" at the starting and ending points.

8

Shapes
Place shapes (ellipse, rectangle, triangle, rounded rectangle, hexagon, arrow) on the screen.
When this icon is selected, clicking it again will display the "Shape Submenu", where you can change
the type of shape to be placed.

Additionally, when this icon is selected or a placed shape is selected, the "Shape Border Color" buttonand "Shape Fill Color" button will be displayed on the title bar, allowing you to change the border colorand fill color of the shapes.

Border Color

Fill Color

Text (Displayed within the Shape Submenu on smartphones)
When this icon is selected, clicking on the screen will place a text box on the screen.

Additionally, when this icon is selected or a placed text box is selected, the "Text Color" button and"Text Alignment" button will be displayed on the title bar, allowing you to change the text color andalignment (left-aligned, centered, right-aligned).

Text Color

Text Alignment

9Laser Pointer (Displayed within the Shape Submenu when certain smartphones are in landscapemode)
Draws the trajectory of a mouse drag (touch move on touch devices) on the screen and erases it after
a certain period of time.

〇 Automatic Selection ReturnIf no operation is performed for more than 10 seconds after selecting a tool button, the selection willautomatically return to the "Edit Tool".
〇 Deleting Placed Objects
Long-pressing an object placed on the screen (excluding lines drawn with the pen or eraser and text
boxes) will display a delete icon.

In this state, clicking the delete icon

will display a delete confirmation dialog. Press the [OK]button to delete the object.

For text boxes, you can delete them by clearing the text within the text box.
Note that lines drawn with the pen or eraser cannot be deleted.

10Ⅴ Title Bar
The "Title Bar" displayed at the top of the screen varies in functionality and appearance depending onwhether you are in "Teacher Mode" or "Student Mode" and the type of device being used.
Examples of "Teacher Mode (PC)"

Examples of "Student Mode (PC)"

Logo Icon
An icon displayed at the left end of the "Title Bar" that shows the system version.
Clicking this "Logo Icon" will return you to the "Home Screen (startup code input screen)".

〇 Board Title
To the right of the "Logo Icon" is the board title. Following the board title, the "Name" (in "Teacher
Mode", it is displayed as "Teacher") is shown within ≪≫.
In "Teacher Mode", clicking on the "Board Title" area will display the board title edit dialog, allowing
you to edit the title.

11

〇 Previous Page, Next Page, Show Page List
In the center of the "Title Bar", the [Previous Page (＜)] button and [Next Page (＞)] button allow
you to change the page to be displayed or edited. The number of pages in a board is fixed at 20 pages
and cannot be changed.

Additionally, by clicking on the "Page Number Area", a list of pages will be displayed as thumbnails.
You can select the page to be displayed or edited from this list.

Zoom (Only when the device is a PC)
Adjust the display magnification.
Clicking the left side of the button will activate "Zoom Mode ()", allowing you to zoom in andout using the mouse wheel, and move the display position (pan the screen) by dragging the mouse.
Clicking the left side of the button again while in "Zoom Mode" will deactivate [Zoom Mode].
On touch devices, you can zoom in and out with pinch gestures and move the display position (pan thescreen) with touch move gestures.
Print Page (In "Student Mode", only if permission is set)
Print the currently displayed page.
Student Access Code (Only in "Teacher Mode")
Displays the QR code or URL for student access in "Student Mode".

12Processing/Settings (Only in "Teacher Mode")
Please refer to "Ⅵ Teacher Processing/Settings Functions".
ReloadRestart the system and display the current board and page in the latest state. There is no need to reenter any codes.
Click this button if the system is not functioning properly, such as when the drawing contents of others
are not being reflected. If the issue persists even after clicking the [Reload] button, please reload thebrowser or restart the browser.

13

Ⅵ Teacher Processing/Settings Functions
Clicking the "Processing/Settings" button () on the "Title Bar" will display the "Processing/Settings

Screen", where you can perform various board operations, set permissions for students, and configure pagespecific backgrounds.

◯ Board Operations
・Save
Save all data (20 pages) of the current board as a local file.
・PrintSelect and print pages from the entire board.

・ExportSave the current page as a PNG image file to a local file.
・Display the current page
Display the page currently shown on this device (teacher's device) on all connected devices.

14

・Set Timer
Displays the timer on all connected devices. Clicking the [Set Timer] button will display the 'Set
Timer' dialog."

Set the timer duration (in minutes).
After the timeout, new object placement, deletion, and editing of existing sticky notes will be
prohibited on all connected devices except this device (teacher's device).
If "Display the current page on all devices" is checked, the page currently displayed on this device(teacher's device) will be shown on all connected devices when the timer starts. In this case, the pagechange function will be disabled on all devices except this device (teacher's device).
If "Allow editing of existing sticky notes after timeout" is checked, editing of existing sticky notes
will be allowed on all connected devices except this device (teacher's device) after the timer times
out.
While the timer is running, the timer will be displayed in the title bar at the top of the screen (a[Stop] button will also be displayed for the teacher's device).

By clicking the [Stop] button, the timer on all devices will be stopped, returning to the normal state.
・Clear Page
Clear (erase) the drawing contents of the current page.
・Clear All Pages
Clear (erase) the drawing contents of all pages in the current board.
・Delete Page
Delete the current page and shift the subsequent pages forward by one page, adding a blank page as
the final (20th) page.

15

◯ Student Permissions
・Allow Printing of the Current Page
Enable the printing function for the current page in "Student Mode" (display the print icon).
・Allow Editing/Deleting of Sticky Notes Placed by Others
Allow editing and deleting of sticky notes placed by others in "Student Mode". Moving, resizing, androtating sticky notes are always allowed.
・Display the Name of the Last Person Who Wrote on the Sticky Note
Display the name of the last person who wrote on the sticky note in "Student Mode". In "Teacher
Mode", the name of the writer is always displayed.
・Allow Use on Smartphones (View Only, View and Edit)
Set whether "Student Mode" can be used on smartphones. The possible settings are "View Only"and "View and Edit".
Note that "Teacher Mode" cannot be used on smartphones.
◯ Background Settings
You can set one of the following seven system-registered backgrounds or a specified file as the
background for each page.

To specify a background file, click the following background icon and specify the image file to be usedas the background. The system will automatically adjust the aspect ratio of the specified file to fit thescreen, so please specify an image with an aspect ratio that matches the screen (2400:1340).

16

Ⅶ Board States (Open, Closed, Deletion)
There are two states for boards: "Open" and "Closed".
Boards that have not been accessed for two days will automatically become "Closed".
"Closed" boards cannot be opened in "Student Mode".
"Closed" boards can be reopened by accessing them in "Teacher Mode".
Additionally, board data that has been in a "Closed" state for seven days will be deleted.
There is no method provided to recover deleted board data, so please save and store important board
data as local files.
The "Close Processing" and "Board Data Deletion Processing" are executed on the server every day
between 4:00 AM and 4:30 AM. Therefore, the system cannot be accessed during this time.
Teacher codes that have not been accessed for one year will be deleted.
(Note) Depending on the system load and other factors, the number of days until automatic closing ordeletion may be changed.

17

Ⅷ Support for Languages Other than JapaneseThis system supports the following languages (in no particular order):Japanese

GermanTurkishNepaliJapanese (with ruby)

RussianIndonesian

BurmeseEnglishSimplified Chinese

Vietnamese

Mongolian

KoreanTraditional Chinese

Thai

Ukrainian

FrenchPortuguese

Hindi

ArabicSpanishDutch

CambodianItalian

Greek

Tagalog※ This system is developed in Japanese, and the translations into other languages are done using
machine translation. Therefore, there may be many unnatural expressions. We would appreciate
any information on more appropriate expressions. Also, in the current version, support for RTL
languages (Arabic) is incomplete and only available on PCs.
If you are using a browser with a language setting other than these, "English" will be used by default unless
an explicit language setting is made.
Language switching is done automatically based on the browser's language settings, but you can also switch
languages explicitly using the following method.
〇Language Settings for Each Device
1.

Click the logo icon at the top left of the screen while holding down the Shift key (or long-press for
3 seconds).

2.

The "Language Settings (Device Settings)" dialog will be displayed. Select the language you want
to use and press the [OK] button.

3.

The system will restart, and the language will switch.

〇Language Settings for Each Teacher Code1.

In "Teacher Mode", click the logo icon at the top left of the screen while holding down the Alt key.

2.

The "Language Settings (Database Settings)" dialog will be displayed. Select the language youwant to use and press the [OK] button.

3.

The system will restart, and the language will switch.

Note that the "Language Settings for Each Device" take precedence over the "Language Settings for Each
Teacher Code".
Additionally, in the case of "Language Settings for Each Teacher Code", the "Home Screen (startup code
input screen)" will use the browser's language setting. The language set by the "Language Settings for Each
Teacher Code" will be used after the "Teacher Code" and "Board Code" have been confirmed.

18

Ⅸ Server Requirements
This system operates using PHP programs on the server and JavaScript programs on the browser, inconjunction with a MySQL database.
Therefore, the requirements for a server that can run this system are:
An HTTP(S) server that supports PHP.
A MySQL database that is accessible from the above server.
Additionally, the system's "Close Processing" and "Board Data Deletion Processing", which are executed
daily at 4:00 AM, utilize the server's CRON functionality.

◯ Regarding the Provision of Programs
For any questions about the programs or if you wish to request the provision of the programs, pleasecontact us via email at the following address.

〇 EduBoard uses the following external libraries:
fabric.js

http://fabricjs.com/

HTML5 Canvas Libraryhammer.js

https://hammerjs.github.io/

Touch Gesture Library

qrcode.js

https://davidshimjs.github.io/qrcodejs/

2D Code Generation Library

Google Fonts

https://fonts.google.com/

Display font (to display a as a)19

Ⅹ Known Issues and Update History
ver1.001

There is awkwardness in the pinch-zoom and pan functions on touch devices.
Support for RTL languages (Arabic) is incomplete and only available on PCs.

20

スクリーンキャプチャは、1040 x 640

21